I'm using next-mdx-remote in my next.js application. One of the components I'm passing to it does a API call via axios. This works fine. I now want to move to react-query however. I get the following error:
No QueryClient set, use QueryClientProvider to set one
I think I understand this error, but the thing is that I do have a QueryClient set in my QueryClientProvider in my _app.js file. Fetching via react-query also works in other pages & components, that are not part of my MDX structure.
I'm wondering what to do now? Do I need to configure something in next-mdx-remote for it to realise where my QueryClient is? For example here:
const mdxSource = await renderToString(content, { components });
The Component that fetches via react-query is part of this components object here that I pass down. However, everything in nextjs is by default rendered via _app.js - so I don't understand why it wouldn't find it?
_app.js :
<QueryClientProvider client={queryClientRef.current}>
<Hydrate state={pageProps.dehydratedState}>
<SettingsContextWrapper>
<Layout>
<GlobalStyles />
<Component {...pageProps} />
</Layout>
</SettingsContextWrapper>
</Hydrate>
</QueryClientProvider>
(and this all works in non-mdx contexts)
As far as I'm aware, renderToString creates a new root, so if you render a component with it that relies on react context (like useQuery does), you must specify the Provider with it:
const mdxSource = await renderToString(<QueryClientProvider client={queryClient}>{ components }</QueryClientProvider>);