dotansimha / dotansimha/graphql-code-generator-community

typescript-react-query does not work during SSR with queryClient.prefetchQuery in Next

Open
#202 6 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

### Describe the bug

Following the example snippets [in the docs](https://www.graphql-code-generator.com/plugins/typescript-react-query#using-graphql-request) and using SSR with Next, the prefetchQuery never makes a request.

Reading the docs one would need `exposeQueryKeys` and `exposeFetcher`. `exposeFetcher` even states: "For each generate query hook adds fetcher field with a corresponding GraphQL query using the fetcher. It is useful for queryClient.fetchQuery and queryClient.prefetchQuery." And the provided sample `await queryClient.prefetchQuery(userQuery.getKey(), () => userQuery.fetcher())`

In setting up the SSR for Next, this doesn't actually make any requests but instead populates a dehydrated state with a query hash and key and no data.

![Screen Shot 2022-07-06 at 7 59 32 PM](https://user-images.githubusercontent.com/3144419/177802009-244333fa-768f-43db-974a-ff6bbbd48583.png)

Another interesting outcome is that arguments are ignored. So `query.fetcher({ arg: value })` doesn't do anything but a type error will be present if the query requires an argument.

### Your Example Website or App

https://github.com/wsfuller/next-space-x

### Steps to Reproduce the Bug or Issue

1. Pull down provided repo
2. yarn
3. yarn dev
4. localhost:3000

No data is pulled during SSR

### Expected behavior

Would expect a pre-populated HTML document that accepts arguments when using the `queryClient.prefetchQuery` as per the documentation

### Screenshots or Videos

![Screen Shot 2022-07-06 at 7 59 32 PM](https://user-images.githubusercontent.com/3144419/177802635-6c359f16-3707-4896-9bfa-6c854ccc3dec.png)
![Screen Shot 2022-07-07 at 7 48 28 AM](https://user-images.githubusercontent.com/3144419/177803618-5492d9b7-6148-4abe-860c-e5015aed0013.png)

### Platform

- OS: macOS 12.4
- NodeJS: 16.14.2
- `graphql` version: 16.5.0
- `@graphql-codegen/*` version(s): cli: 2.7.0, typescript: 2.6.0, typescript-graphql-request: 4.4.11, typescript-operations: 2.4.2, typescript-react-query: 3.5.15

### Codegen Config File

```
overwrite: true
schema: "https://api.spacex.land/graphql/"
documents: "./src/graphql/**/*.gql"
generates:
src/graphql/generated/index.ts:
plugins:
- typescript
- typescript-operations
- typescript-react-query
config:
pureMagicComment: true
exposeQueryKeys: true
fetcher: # note have tried setting this to graphql-request and continues to fail
endpoint: "https://api.spacex.land/graphql/"
fetchParams:
headers:
Content-Type: "application/json"
exposeFetcher: true
```

### Additional context

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.