react-query doesn't work

[Notaduck]

Description

I am trying to implement the react-query v3 package into a gatsbyjs project, however I get the following error: Error: No QueryClient set, use QueryClientProvider to set one even though I have wrapped everything with the QueryClientProvicer and given it a client in gatsby-browser.js

import { QueryClient, QueryClientProvider } from 'react-query'
import React from 'react'

export const wrapPageElement = ({ element, props }) => {

    const queryClient = new QueryClient();

    return (
        <QueryClientProvider clien={queryClient}>
            {element}
        </QueryClientProvider>
    )
}

Steps to reproduce

https://codesandbox.io/s/7uh7q

Expected result

react-query should fetch the data from the star wars api.

Actual result

The QueryClientProvicer doesn't get the client.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

[quantizor]

@Notaduck there's a typo in your code example. clien vs client

[LekoArts]

Hi!

Your reproduction on codesandbox doesn't work for me, it always fails to start. As probablyup also said you've got a typo in there. Lastly, I'd recommend sharing the code between gatsby-browser.js and gatsby-ssr.js so that you don't create the client twice and do not repeat code as well.

[Notaduck]

@Notaduck there's a typo in your code example. clien vs client

And that is why it is better to go to sleep instead of opening a issue...... Sry! It is working now

[LekoArts]

@Notaduck Why did you reopen?

[Notaduck]

That was a mistake, sry!

[Notaduck]

Sorry for reopening this gain but I just tried to implement it again.... However it still looks like there is problems. It works just fine in development but as soon as I build the project will it fail:

failed Building static HTML for pages - 0.144s

 ERROR #95313

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  23 |
  24 |   if (!queryClient) {
> 25 |     throw new Error('No QueryClient set, use QueryClientProvider to set one');
     | ^
  26 |   }
  27 |
  28 |   return queryClient;


  WebpackError: No QueryClient set, use QueryClientProvider to set one

  - QueryClientProvider.js:25
    node_modules/react-query/es/react/QueryClientProvider.js:25:1

  - useBaseQuery.js:6
    node_modules/react-query/es/react/useBaseQuery.js:6:35

  - useQuery.js:7
    node_modules/react-query/es/react/useQuery.js:7:22

  - index.js:11
    src/pages/index.js:11:38

Prove -> https://github.com/notaduck/use-react-gatsby-demo

  System:
    OS: macOS 11.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 88.0.4324.146
    Firefox: 85.0
    Safari: 14.0.2

[Abdullah-Rohail]

Hi, were you able to resolve the issue?
i am getting the same error on build, works fine on development.

[Notaduck]

I was, could you put your code in a sandbox? Then I can take a look at it.

[jeremy-london]

@Notaduck Hitting this issue as well.. What's the magic trick to get the builds working? Development is working just fine, but cant get past the build step

In gatsby-browser.js and gatsby-ssr.js

export const wrapPageElement = ({ element }) => {
  const queryClient = new QueryClient();

  broadcastQueryClient({
    queryClient,
    broadcastChannel: 'broadcast-sync',
  });

  return (
    <QueryClientProvider client={queryClient}>
      <>
        {element}
        <ReactQueryDevtools initialIsOpen={false} />
      </>
    </QueryClientProvider>
  );
};

[LekoArts]

Moving it, since it's not a bug with Gatsby.

Try adding the contents of gatsby-browser.js also to gatsby-ssr.js. During Gatsby build otherwise the client is missing.

[Notaduck]

Ooooh, I forgorgot to commit that part. But the gatsby-browser and ssr file is identical.

[JUNNNI]

I confirme that creating a gatsby-ssr.js file with the same content than gatsby-browser.js solve the issue.