graphql-code-generator

graphql-code-generator copied to clipboard

Describe the bug

Following the example snippets in the docs 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.

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

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

I'm stumbled about the same problem with the same setup.

Could you do me a favor and test fetchQuery() (instead of prefetchQuery) for me? I'm getting a TypeError: Failed to parse URL from /api/ error when using it in a ssg or ssr hook.

Still looking into this but it seems like the exposeFetcher docs maybe incorrect.

Docs (not working): await queryClient.prefetchQuery(userQuery.getKey(), () => userQuery.fetcher())

Updated (working): await queryClient.prefetchQuery(userQuery.getKey(), userQuery.fetcher())

As far as using fetchQuery in place of prefetchQuery not seeing an issue. I've included a working repo in my original comment, I'm wondering if your error is stemming from something else. Changing the fetcher end point is a FetchError, so I'm curious if code generation didn't run properly for the Type Error

Okay, after a lot digging, I've found out that my next node had no access to the graphql server, which both run in their own docker container.

prefetchQuery and fetchQuery also works now without using a anonymous function for the fetcher.

Still looking into this but it seems like the exposeFetcher docs maybe incorrect.

Yes this fixed it for me

Updated (working): await queryClient.prefetchQuery(userQuery.getKey(), userQuery.fetcher())

Does anyone know the correct syntax for prefetching, when fetcher is set to graphql-request? The generated useMyCustomQuery hooks do not have a fetcher() method.