Typing custom hook with selector

[crieggalder]

Hi all - I'm trying to correctly type a custom hook wrapping useQuery with a selector. The custom hook does a few things:

• It accepts a GraphQL query document and variables and includes them in a fetch function
• It builds a key from a query name and variables as arguments
• It uses a selector to unnest data

My goal is to type this custom hook to accept a generic type e.g. Post, and return a data object that is an array of that type e.g. Post[], along with the rest of useQuery's standard return. How should I do that?

Here's my current code which is wrong in many places - I'm new to TS and it feels like I'm just misunderstanding how to use generics in this context/how the library uses them.

Thank you!!

import { useQuery, UseQueryResult } from '@tanstack/react-query';
import { RequestDocument } from 'graphql-request/dist/types';
import { GraphQLClient } from '../graphql/GraphQLClient';

// Pass in TData, which is type for item returned
export const useGQLQuery = <TData>(
    queryName: string,
    queryDocument: RequestDocument,
    objectName: string,
    variables?: any,
    options?: any,
    // Result typed as UseQueryResult that returns array of TData
): UseQueryResult<TData[] | undefined> => {
    // Type for the initial return of the query function, before select
    interface TQueryFnData {
        [index: string]: TData[] | undefined;
    }

    const fetchData = async () => await GraphQLClient.request(queryDocument, variables);

    // react-query request with generics
    return useQuery<TQueryFnData, Error, TData[] | undefined>(
        // Key built from queryName and variables
        [queryName, { variables: { ...variables } }],
        fetchData,
        {
            // Unnest data
            select: (data) => data[objectName],
            ...options,
        },
    );
};

[TkDodo]

see:

• How to create a custom useQuery hook with optional configuration options (useQueryOption)❓ #3227
• Custom hooks with QueryOptions & TypeScript #1195
• https://twitter.com/TkDodo/status/1491451513264574501