Skip to main content

Generalized Query Loaders Documentation

This documentation describes how to pass nested variables to queries using a parameter generation function and how to implement query loaders with custom logic.

Query Params Generator Implementation​

The queryParamsGenerator function generates query parameters based on the input parameters.

Usage​

export const queryParamsGenerator = (params) => ({
    nestedParam1: {
        subParam: {
            key: params.value,
        },
    },
    nestedParam2: { key: params.value },
});

Query Loader Implementation​

This section describes how to implement query loaders using the variables generated by the queryParamsGenerator function.

Example Query Loader 1: CustomQueryLoader1​

The CustomQueryLoader1 loads data using the variables generated by the queryParamsGenerator function with a specified fetch policy.

Usage​

const CustomQueryLoader1 = useCustomQuery1({
    variables: queryParamsGenerator(params).nestedParam1,
    fetchPolicy: 'custom-fetch-policy',
});

General Example​

Here is a generalized example of how to use the CustomQueryLoader1 and CustomQueryLoader2 together:


import { useCustomQuery1, useCustomQuery2 } from './path/to/queries';
import { dimentsions } from './dimension.js';

export const queryParamsGenerator = (params) => ({
    nestedParam1: {
        subParam: {
            key: params.value,
        },
        dimensions: dimensions,
    },
    nestedParam2: { key: params.value },
});

const ExampleComponent= (props) => {

  const params = { value: 'uniqueIdentifier' };
  
  const QueryLoader1 = useQuery1({
      variables: queryParamsGenerator(params).nestedParam1,
      fetchPolicy: 'cache-only',
  });
  
  const QueryLoader2 = useCustomQuery2({
      variables: queryParamsGenerator(params).nestedParam2,
      fetchPolicy: 'cache-only',
  });
  
  return (
      <React.Suspense fallback={<Spinner></Spinner>}>
            <Await
                resolve={Promise.all([QueryLoader1,QueryLoader2])}
            >
                <ExampleComponent
                    loaderData={[QueryLoader1, QueryLoader2]}
                    {...props}
                />
            </Await>
        </React.Suspense>
  )

}