[react-query] Fetcher headers get generated as ...([object Object])

[ovidiuwin]

Describe the bug When passing headers to the fetcher config, those get generated as ...([object Object]). Maybe I'm missing something here.

To Reproduce Steps to reproduce the behavior: https://codesandbox.io/s/stoic-swanson-qhck5?file=/generated/index.ts Check the codegen.yml and how the headers get generated in this file.

Expected behavior The headers to get generated as expected.

[ovidiuwin]

For anyone bumping into this issue, I was able to send the headers to the generator by using the following for the fetcher config:

  fetcher:
    endpoint: "your_endpoint"
    fetchParams: >
      {
        headers: {
          "Content-Type": "application/json"
        }
      }`

[achen0115]

It works for me without the trailing back-tick symbol. Thanks a lot. 👍

[zirkelc]

The object fetchParams in the fetcher methods https://github.com/dotansimha/graphql-code-generator/blob/a856c7ac6daf628ee08a24efe8558c79ec59e85d/packages/plugins/typescript/react-query/src/fetcher-fetch-hardcoded.ts#L23-L25 must be JSON.stringified in case of an Object. I would suggest the following adaption:

if (this.config.fetchParams) { 
  const fetchParamsString = typeof this.config.fetchParams === 'string' 
    ? this.config.fetchParams 
    : JSON.stringify(this.config.fetchParams);
  fetchParamsPartial = `\n    ...(${fetchParamsString}),`; 
} 

[hpohlmeyer]

For anyone using a JS GraphQL Config, you can stringify the object yourself until it is fixed:

fetcher: {
  endpoint: "http://localhost:3001/graphql",
  fetchParams: JSON.stringify({
    headers: {
      "Content-Type": "application/json"
    }
  })
}

[royderks]

I have the same error..

[Urigo]

Hi and thank you all for the report

Sorry but I'm not adding a lot here but just labeling it according to our new Contribution Guide and issue flow.

It seems already got into stage 1 thanks to your reproduction! Thank you for that!

Now in order to advance to stage 2 we'll need a failing test, would be great if someone could help progress the issues through the stages.

Thank you and sorry that this comment is not a complete solution (yet).

[zirkelc]

I've added a test case via PR https://github.com/dotansimha/graphql-code-generator/pull/7024. It also adapts the react-query/src/config.ts type definition for HardcodedFetch.

The test case fails as expected:

Please let me know if everything is correct :-)

[Urigo]

Wow thank you so much @zirkelc !!

It seems already got into stage 2 thanks to your reproductions and tests, that is a huge push for us!

The next stage 3 phase is about finding a solution for the issue locally. If anyone wants to help, check out the instructions here on how to clone the repo and gradually become aware of the internal codebase.

We would love to help with any questions you might have!

Thank you and sorry that this comment is not a complete solution (yet).

[zirkelc]

I added a fix for fetchParams as I described it in my comment above. The new test case does succeed now:

I also generated a changeset as requested by stage 4.

Let me know in case I missed something

[dotansimha]

Available in @graphql-codegen/typescript-react-query@3.2.2 🎉