Custom Query Factory Functions

[TClark1011]

I think it would be great if there were "factory functions" that helped developers compose custom hooks that can be conveniently re-used.

createCustomQueryHook

Create a custom query hook. The query key and query function would be passed into this function so they would not have to be specified every time the hook is used. You can also specify options in this functions, and option overrides could also be applied when the custom hook is called.

When specifying the options/query key , they can be provided as static values, however if the query function takes parameters, then you can provide a function that will return the query keys/options.

This function would then return an object with the fields useCustomQuery which would contain the newly created hook, and an options field which would contain the options used to create that hook. The reason for providing the hook and options in an object instead of only returning the hook itself, is that by returning the options we can then re-use those options inside useQueries. If the options of the hook were created with a function, then the options field would be a function that takes the same parameters as the query itself and then returns the options.

extendCustomQueryHook

Similar to createCustomQueryHook, except you pass a custom query hook as the first parameter and option overrides as the second parameter.

Mutations

You would also include mutation equivalents

• createCustomMutationHook
• extendCustomMutationHook

Examples

Hook With Parameters

const getEntity = (entityId: string) => someData;

// standard way of creating custom hook
const useGetEntity = (
  entityId: string,
  optionOverrides: QueryOptions<ExampleEntity> = {}
) =>
  useQuery(['getEntity', entityId], () => getEntity(entityId), {
    onError: doSomethingWithError,
    ...optionOverrides,
  });

// creating a hook using proposed `createCustomQueryHook`
const {
  useCustomQuery: useGetEntity,
} = createCustomQueryHook(getEntity, (id) => ['getEntity', id], {
  onError: doSomethingWithError,
});


// extend the custom hook
const {
  useCustomQuery: useGetInfoAboutEntity,
  options: getEntityInfoQueryOptions,
} = extendCustomQueryHook(useGetEntity, {
  select: deriveEntityInformation,
});

//Because the options are returned, we can easily re-use the logic with `useQueries`
const MyComponent = () => {
  const allQueries = useQueries([
    getEntityInfoQueryOptions('someEntityId', {
      enabled: conditionForQuery,
    }),
    ...otherQueries,
  ]);

  return null;
};

Without Parameters

const {
  useCustomQuery: useGetEntityList
} = createCustomQueryHook(getEntityList, "getEntityList")