Transform data before saving to Cache

[zirkelc]

The select function of useQuery seems to be called on every render when data is returned from the cache. I was wondering if a transform function would make sense that gets called right before the data returned by the queryFn gets inserted into the cache?

My two use cases for the select function are

1. parsing string fields returned by the GraphQL API into an object via JSON.parse and
2. remove the query name as the first element of the returned data so that I have an object of type User rather than type GetUserQuery in the cache (to be then updated by mutations).

[TkDodo]

You can just so that inside the queryFn, right before you return the value - which react-query then puts into the cache.

[zirkelc]

Unfortunately, the custom fetcher applies to all queries and mutations and it receives two parameters, the GraphQL query (as string) and the variables. So it is not really possible to distinguish between different queries.

I agree that this should be customisable via codegen. I just wanted to hear your opinion if it may also be useful to have some kind of pre-cache manipulation function.

[TkDodo]

I just wanted to hear your opinion if it may also be useful to have some kind of pre-cache manipulation function.

I think it would just get confusing. right now, what you return from the queryFn will be put in the cache and visible in the devtools. There are other ways to do transformations like select, but they work on a different level. I wouldn't like to add more complexity here.

[neefrehman]

@zirkelc id be curious to hear if you've found a solution to this problem, as I'm currently running into it as well. Though I agree that this shouldn't be RQ's responsibility.

[louis-young]

I'm going to mark this as answered as I think we're all aligned; it's been answered as far as TanStack Query is concerned. Please feel free to continue the discussion though 🙂

[zirkelc]

@zirkelc id be curious to hear if you've found a solution to this problem, as I'm currently running into it as well. Though I agree that this shouldn't be RQ's responsibility.

Yes, I was able to find a solution that works for me, even though it's quite complicated. I'm using the @graphql-codegen/cli package and to generate all my GraphQL types. This package has a lot of different plugins to generate types, function, hooks, etc. However, I built my own plugin to generate the fetcher functions that are then being used by React Query. Each query and mutation has its own fetcher function that is statically generated based on the input variables and the output. If any field in the input or output is a JSON field (the scalar type is AWSJSON as I'm using the AWS AppSync GraphQL service), then this field will automatically be stringified in case of inputs, or parsed in case of outputs.