Integration Issue with @tanstack/react-query in a Custom local Strapi Plugin

Questions and Answers
1
System Information
  • Strapi Version: 4.10.7:
  • Operating System: macos 13.4:
  • Database: sqlite:
  • Node Version: v18.16.1:
  • NPM Version: 9.5.1:
  • Yarn Version: 1.22.19:

Hello everyone,

I am currently developing a custom plugin for Strapi and am trying to integrate @tanstack/react-query to manage data queries within my components. Unfortunately, I am encountering an issue that is halting my progress.

I have wrapped my App component in a QueryClientProvider as shown below:

const App = () => {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      {/* ... */}
    </QueryClientProvider>
  );
};

And I am using the useQuery hook in my HomePage component:

const HomePage = () => {
  const { get } = useFetchClient();
  const queryClient = useQueryClient();
  const { data: response, error, status } = useQuery({/* ... */});

  // ...
};

Despite this, I am continually receiving the following error when running my application:

Error: No QueryClient set, use QueryClientProvider to set one

I have double-checked that my HomePage component is indeed a child of App and thus should have access to the context provided by QueryClientProvider.

I am open to any suggestions or advice that might help me resolve this issue. If anyone has encountered and overcome this issue before, your help would be greatly appreciated.

Thank you in advance for your time and assistance.

2

Btw setting a queryClient should be done outside that pp not inside it :slight_smile:
Else you will instanciance a new one on every render

3

Thank you for your suggestion! I see the logic in not initializing a new queryClient with every render.

Could you possibly suggest a recommended location within custom plugin structure to initialize the queryClient put the QueryClientProvider?

4

Put it once when the plugin gets bootstrapped then prop it down might be the best idea.

5

Sorry I can’t wrap my head around this one you mean I should use the plugin hook bootstrap ?
Because I can’t see how can one instantiate a variable there an then pass it to the plugin component as props.

Do you have any draft or example to see how this could work ?

Thank you for your answers and your patience

6

Hi @ayhid :wave:
Did you find an answer to this? I’m trying to use react-query on a collection type page and can’t work out where to put the Provider. Any tips greatly appreciated :pray: