How to best handle non-(easily)-serializable query dependencies?

[aryzing]

I've come across a few cases where some of the query's dependencies may be complex objects, functions, or even classes. For example, the query reads a config object and uses it to construct the network request,

const useMyExampleQuery() {
    const config = useAppConfig(); // may contain methods, symbols, anything really
    const fetcher = useCurrentFetcher(); // a function

    return useQuery(['example', config, fetcher], ({queryKey}) => {
        const [_, config, fetcher] = queryKey;

        return fetcher(config);
    }))
}

What's the recommended way to handle these types of dependencies?

[louis-young]

Hi 👋

You can use queryKeyHashFn as mentioned here: https://tanstack.com/query/v4/docs/react/reference/useQuery

It's tricky to serialise things that aren't intrinsically serialisable but you can provide your own implementation as mentioned above.

I hope this helps 🙂