dotansimha / dotansimha/graphql-code-generator
Generate dynamic fetchers for each Query and Mutation
- Dominant language
- TypeScript
- Stars
- 11.3k
- Forks
- 1.4k
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 23
Description
**Is your feature request related to a problem? Please describe.**
The [React Query plugin](https://www.graphql-code-generator.com/plugins/typescript-react-query) supports 3 types of fetcher functions at the moment:
- `fetch` with our without fetchParams
- `graphql-request` with GraphQLClient
- `file#identifier` with a custom fetcher method
In all 3 cases, the generated fetcher function is *static* and the same for all `useQuery` and `useMutation` hooks. It receives the 2 parameters `query` and `variables` and returns the GraphQL execution result. That result will then be cached by React Query and returned as `data`.
Very often, I must do query-specific post-processing of the data. For example, parsing a field that contains a JSON string into an object, so that is available to all query listeners. I used to do this with the `select` function option of `useQuery`, but I recently found out that this function is being called after the data has been inserted into the cache and every time it is being retrieved from the cache via `useQuery`. Here is some more context on this topic on the ReactQuery repository: https://github.com/tannerlinsley/react-query/discussions/3387
This behaviour has 2 big disadvantages:
1. Performance is being affected by repeated calls of `select` every time `useQuery` returns its data from the cache. If I have one or more JSON fields on my query, that means multiple `JSON.parse` calls on every re-render. Clearly, one `JSON.parse` call before the data is being cached should be enough.
2. The `select` function is not being called when data from the cache is being retrieved by `useQueryClient` and `queryClient.getQueryData`. Let's say I have a mutation that creates a new item and via the mutations `onSuccess` handler I want to insert the new item into the list of items in the query cache. That means I have use `queryClient.getQueryData` and `queryClient.setQueryData`. But the data returned by `getQueryData` is not the same as returned as the `data` from the `useQuery` hook because it applies the `select` function beforehand.
I raised this issue on ReactQuery repo, but see it as a missing customising capability from `graphql-codegen` and I think I have to agree. The `fetcher` function should be considered as pre-cache manipulation and the `select` function as post-cache manipulation. Any transformations to queried data should therefore occur in the fetcher function.
As the fetcher function is not specific to any query, this behaviour is not possible at the moment.
**Describe the solution you'd like**
I suggest a new type of fetcher: a `callback` function specified as `file#identifier` that is being called during the generation of each Query and Mutation and that returns implementation as string of the fetcher function specific to this type. This callback receives the GraphQL `OperationDefintionNode` so it can check the type of each field in the query. I think the existing interface [`FetcherRenderer`](https://github.com/dotansimha/graphql-code-generator/blob/7e504ce7d2c7d7ee1cf04fcce4a7b56816fd6156/packages/plugins/typescript/react-query/src/fetcher.ts) and `generateFetcherFetch` already contains all required parameters.
---
If you are going to consider this request useful, then I would offer my help and submit an initial PR for it. Let me know what you think :)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.