Better Typescript typings for resources (#43)

Author: theKashey

examples/basic-routing-with-resources/about.tsx

@@ -9,7 +9,7 @@ export const aboutResource = createResource({
     const response = await fetch(
       'https://dog.ceo/api/breed/schnauzer/images/random'
     );
-    const result = await response.json();
+    const result:{ message: string} = await response.json();
 
     return result;
   },

examples/basic-routing-with-resources/home.tsx

@@ -7,7 +7,7 @@ export const homeResource = createResource({
   maxAge: 0,
   getData: async () => {
     const response = await fetch('https://dog.ceo/api/breeds/image/random');
-    const result = await response.json();
+    const result:{ message: string} = await response.json();
 
     return result;
   },

src/__tests__/unit/controllers/hooks/resource-store/test.tsx

@@ -23,6 +23,7 @@ const mockSlice = {
   data: null,
   error: null,
   loading: false,
+  key: 'i-am-a-key',
   promise: Promise.resolve(),
   expiresAt: 0,
 };

src/__tests__/unit/controllers/router-store/test.tsx

@@ -474,12 +474,15 @@ describe('SPA Router store', () => {
 
       const ComponentB = () => (
         <ResourceSubscriber resource={resourceB}>
-          {({ data, loading }) => {
-            if (loading) {
-              return <div>{loading}</div>;
+          {props => {
+            if (props.loading) {
+              return <div>{props.loading}</div>;
+            }
+            if (props.error) {
+              return <div>{props.error}</div>;
             }
 
-            return <div>{data}</div>;
+            return <div>{props.data.toString()}</div>;
           }}
         </ResourceSubscriber>
       );

src/common/types.ts

@@ -66,39 +66,66 @@ export type RouteResourceLoading = boolean;
 
 export type RouteResourceTimestamp = number | null;
 
-export type RouteResourceError = Record<string, any> | Error | null;
+export type RouteResourceError = Record<string, any> | Error;
 
-export type RouteResourceData = Record<string, any> | null;
+export type RouteResourceDataPayload = Record<string, any>;
 
-export type RouteResourcePromise = Promise<any> | null;
+export type RouteResourcePromise<T> = Promise<T> | null;
 
-export type RouteResourceUpdater = (
+export type RouteResourceUpdater<RouteResourceData = unknown> = (
   data: RouteResourceData
 ) => RouteResourceData;
 
-export type RouteResourceResponse = {
-  loading: RouteResourceLoading;
+export type RouteResourceResponseBase<RouteResourceData> = {
+  loading?: RouteResourceLoading;
+  error?: RouteResourceError | null;
+  data?: RouteResourceData;
+  key?: string;
+  promise?: RouteResourcePromise<RouteResourceData>;
+  expiresAt: RouteResourceTimestamp;
+};
+
+export type RouteResourceResponseLoading<RouteResourceData> = {
+  loading: true;
+};
+
+export type RouteResourceResponseError<RouteResourceData> = {
+  loading: false;
   error: RouteResourceError;
+};
+
+export type RouteResourceResponseLoaded<RouteResourceData> = {
+  loading: false;
+  error: null;
   data: RouteResourceData;
-  promise: RouteResourcePromise;
-  expiresAt: RouteResourceTimestamp;
 };
 
+export type RouteResourceResponse<
+  RouteResourceData = unknown
+> = RouteResourceResponseBase<RouteResourceData> &
+  (
+    | RouteResourceResponseLoading<RouteResourceData>
+    | RouteResourceResponseError<RouteResourceData>
+    | RouteResourceResponseLoaded<RouteResourceData>
+  );
+
 export type RouteResourceGettersArgs = [RouterContext, ResourceStoreContext];
 
-export type RouteResource = {
+export type RouteResource<RouteResourceData = unknown> = {
   type: string;
   getKey: (...args: RouteResourceGettersArgs) => string;
   maxAge: number;
-  getData: (...args: RouteResourceGettersArgs) => RouteResourcePromise;
+  getData: (
+    ...args: RouteResourceGettersArgs
+  ) => RouteResourcePromise<RouteResourceData>;
 };
 
 export type RouteResources = RouteResource[];
 
 export type ResourceStoreContext = Record<string, any>;
 
 export type RouteResourceDataForType = {
-  [index: string]: RouteResourceResponse;
+  [index: string]: RouteResourceResponseBase<unknown>;
 };
 
 export type ResourceStoreData = {

src/controllers/hooks/resource-store/index.tsx

@@ -11,22 +11,21 @@ import { useRouterStoreStatic, RouterStore } from '../../router-store';
 import { EntireRouterState, AllRouterActions } from '../../router-store/types';
 import { createHook } from 'react-sweet-state';
 
-type UseResourceHookResponse<
-  D = RouteResourceResponse['data']
-> = RouteResourceResponse & {
-  data: D;
-  update: (getNewData: RouteResourceUpdater) => void;
+type UseResourceHookResponse<RouteResourceData> = RouteResourceResponse<
+  RouteResourceData
+> & {
+  update: (getNewData: RouteResourceUpdater<RouteResourceData>) => void;
   refresh: () => void;
 };
 
 type UseResourceOptions = {
   routerContext?: RouterContext;
 };
 
-export const useResource = (
-  resource: RouteResource,
+export const useResource = <RouteResourceData extends unknown>(
+  resource: RouteResource<RouteResourceData>,
   options?: UseResourceOptions
-): UseResourceHookResponse => {
+): UseResourceHookResponse<RouteResourceData> => {
   const [, actions] = useResourceActions();
   const [, { getContext: getRouterContext }] = useRouterStoreStatic();
 
@@ -51,11 +50,19 @@ export const useResource = (
   );
 
   const key = useKey(options?.routerContext!)[0];
-  const [slice] = useResourceStore({ type: resource.type, key });
+  const [slice] = useResourceStore({
+    type: resource.type,
+    key,
+  }) as RouteResourceResponse<RouteResourceData>[];
 
   const update = useCallback(
-    (updater: RouteResourceUpdater) => {
-      actions.updateResourceState(resource.type, key, resource.maxAge, updater);
+    (updater: RouteResourceUpdater<RouteResourceData>) => {
+      actions.updateResourceState(
+        resource.type,
+        key,
+        resource.maxAge,
+        updater as RouteResourceUpdater<unknown>
+      );
     },
     [resource, key, actions]
   );
@@ -72,5 +79,5 @@ export const useResource = (
     actions.getResourceFromRemote(resource, routerContext);
   }, [resource, routerContext, actions]);
 
-  return { ...slice, update, refresh };
+  return { ...slice, update, key, refresh };
 };

src/controllers/resource-store/index.tsx

@@ -105,7 +105,7 @@ export const actions: Actions = {
   getResourceFromRemote: (resource, routerStoreContext) => async ({
     getState,
     dispatch,
-  }): Promise<RouteResourceResponse> => {
+  }): Promise<RouteResourceResponse<unknown>> => {
     const { type, getKey, getData, maxAge } = resource;
     const { setResourceState } = actions;
     const { data: resourceStoreData, context } = getState();
@@ -218,7 +218,7 @@ export const actions: Actions = {
     }
     const hydratedData = transformData(
       getNextStateValue<ResourceStoreData>(data, resourceData),
-      ({ error, ...rest }: RouteResourceResponse) => ({
+      ({ error, ...rest }) => ({
         ...rest,
         error: !error ? null : deserializeError(error),
       })
@@ -240,12 +240,13 @@ export const actions: Actions = {
   getContext: () => ({ getState }) => getState().context,
 
   /**
-   * Returns safe, portable and reydratable data.
+   * Returns safe, portable and rehydratable data.
    *
    */
   getSafeData: () => ({ getState }) =>
-    transformData(getState().data, ({ data, error }) => ({
+    transformData(getState().data, ({ data, key, error }) => ({
       data,
+      key,
       promise: null,
       expiresAt: null,
       error: !error
@@ -284,7 +285,7 @@ export const ResourceActions = createSubscriber<State, Actions, void>(
 export const ResourceSubscriber = createSubscriber<
   State,
   Actions,
-  RouteResourceResponse,
+  RouteResourceResponse<unknown>,
   { resourceType: string; resourceKey: string }
 >(ResourceStore, {
   displayName: 'ResourceSelectorSubscriber',
@@ -302,7 +303,7 @@ export const getResourceStore = () =>
 export const useResourceStore = createHook<
   State,
   Actions,
-  RouteResourceResponse,
+  RouteResourceResponse<unknown>,
   ResourceSliceIdentifier
 >(ResourceStore, {
   selector: getSliceForResource,

src/controllers/resource-store/selectors.ts

@@ -12,7 +12,8 @@ export const getSliceForResource = (
   props: ResourceSliceIdentifier
 ): RouteResourceResponse => {
   const { type, key } = props;
-  const slice = state.data[type] && state.data[type][key];
+  const slice =
+    state.data[type] && (state.data[type][key] as RouteResourceResponse);
 
   return slice ? { ...slice } : getDefaultStateSlice();
 };

src/controllers/resource-store/utils/transform-data/index.ts

@@ -1,11 +1,13 @@
 import {
   ResourceStoreData,
-  RouteResourceResponse,
+  RouteResourceResponseBase,
 } from '../../../../common/types';
 
 export const transformData = (
   data: ResourceStoreData,
-  transformer: (slice: RouteResourceResponse) => RouteResourceResponse
+  transformer: (
+    slice: RouteResourceResponseBase<unknown>
+  ) => RouteResourceResponseBase<unknown>
 ) =>
   Object.keys(data).reduce((acc: ResourceStoreData, type: string) => {
     if (!acc[type]) {

src/controllers/resource-utils/index.ts

@@ -1,39 +1,47 @@
-import { RouteResource, RouteResourceGettersArgs } from '../../common/types';
+import {
+  RouteResource,
+  RouteResourceDataPayload,
+  RouteResourceGettersArgs,
+} from '../../common/types';
 import { DEFAULT_RESOURCE_MAX_AGE } from '../resource-store/constants';
 
 /**
  * Utility method to created async versions of getData functions
  *
  */
-type GetDataLoader = () => Promise<{
-  default: RouteResource['getData'];
+type GetDataLoader<T> = () => Promise<{
+  default: RouteResource<T>['getData'];
 }>;
 
 type BaseResource = Pick<RouteResource, 'type' | 'getKey'>;
 
-interface CreateResourceSync extends BaseResource {
-  getData: RouteResource['getData'];
+interface CreateResourceSync<T> extends BaseResource {
+  getData: RouteResource<T>['getData'];
   maxAge?: number;
 }
-interface CreateResourceAsync extends BaseResource {
+interface CreateResourceAsync<T> extends BaseResource {
   getDataLoader: (
     ...args: RouteResourceGettersArgs
   ) => Promise<{
-    default: GetDataLoader;
+    default: GetDataLoader<T>;
   }>;
   maxAge?: number;
 }
 
-const handleGetDataLoader = (asyncImport: GetDataLoader) => {
+const handleGetDataLoader = (asyncImport: GetDataLoader<unknown>) => {
   return async (...args: RouteResourceGettersArgs) => {
     const { default: getDataFn } = await asyncImport();
 
     return getDataFn(...args);
   };
 };
 
-export function createResource(args: CreateResourceSync): RouteResource;
-export function createResource(args: CreateResourceAsync): RouteResource;
+export function createResource<T extends unknown = RouteResourceDataPayload>(
+  args: CreateResourceSync<T>
+): RouteResource<T>;
+export function createResource<T extends unknown = RouteResourceDataPayload>(
+  args: CreateResourceAsync<T>
+): RouteResource<T>;
 export function createResource(args: any) {
   return {
     type: args.type,