Skip to main content

Query Params Generator and Loaders

This document 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: CustomQueryLoader​

import { useCustomQuery } from './path/to/queries';
import { dimensions } 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 QueryLoader = useCustomQuery({
        variables: queryParamsGenerator(params).nestedParam1,
        fetchPolicy: 'cache-only',
    });
  
    return (
        <React.Suspense fallback={<Spinner />}>
            <Await resolve={QueryLoader}>
                <SubComponent
                    loaderData={QueryLoader}
                    {...props}
                />
            </Await>
        </React.Suspense>
    );
}

This approach allows for flexible and reusable query parameter generation and loader implementation.

Back to Index | Previous: GraphQL Integration | Next: Generated Data Loaders