Using react-query inside next-mdx-remote MDX Components?

Question

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)

Answer 1

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>);