docs: fixes fetch example which throws error

[Wipster]

I tried to run the example in a React Native project and it gave me the following error:

Error: Objects are not valid as a React child (found: TypeError: Cannot read property 'text' of undefined). If you meant to render a collection of children, use an array instead.

I guess the useQuery hook tries to access the text property of the response which is not available when returning json().

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tannerlinsley/react-query/e7gs5s45v
✅ Preview: https://react-query-git-fork-wipster-patch-1.tannerlinsley.vercel.app

[boschni]

Which example are you referring to? I don't think we should change the query function documentation because most people would actually want to have the data as a result instead of a Fetch Response object

[Wipster]

@boschni I'm referring to the example I changed on https://react-query.tanstack.com/guides/query-functions Usage with fetch and others clients that do not throw by default

You're right, I'd also rather have the data instead of the response. The problem as far as I can see is that React Native uses the npm package whatwg-fetch to polyfill fetch. It comes with a custom json function: https://github.com/github/fetch/blob/b5c8bd0fee1530f1c204cc5c68b427a3498dbdad/fetch.js#L324 . This function tries to access this.text() which doesn't work when called like in the example in the current docs.

It does work like this though:

useQuery(['todos', todoId], async () => {
  const response = await fetch('/todos/' + todoId)
  if (!response.ok) {
    throw new Error('Network response was not ok')
  }
  return response.json()
})

Would a note in the docs be useful, which covers the react native specifics?

[boschni]

Ah the json function is probably not bound in the polyfill. Can you change the PR with your last code snippet?

[tannerlinsley]

🎉 This PR is included in version 3.9.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀