Estoy usando next-mdx-remote en mi aplicación next.js. Uno de los componentes que le estoy pasando hace una llamada API a través de axios. Esto funciona bien. Sin embargo, ahora quiero pasar a react-query . Obtuve el siguiente error:
No se ha establecido QueryClient, use QueryClientProvider para establecer uno
Creo que entiendo este error, pero la cuestión es que tengo un QueryClient configurado en mi QueryClientProvider en mi archivo _app.js . La obtención a través de react-query también funciona en otras páginas y componentes, que no forman parte de mi estructura MDX.
Me pregunto qué hacer ahora. ¿Necesito configurar algo en next-mdx-remote para que se dé cuenta de dónde está mi QueryClient? Por ejemplo aquí:
const mdxSource = await renderToString(content, { components }); El componente que se obtiene a través de la consulta de reacción es parte de este objeto de components aquí que transmito. Sin embargo, todo en nextjs se procesa de forma predeterminada a través _app.js , por lo que no entiendo por qué no lo encuentra.
_app.js :
<QueryClientProvider client={queryClientRef.current}> <Hydrate state={pageProps.dehydratedState}> <SettingsContextWrapper> <Layout> <GlobalStyles /> <Component {...pageProps} /> </Layout> </SettingsContextWrapper> </Hydrate> </QueryClientProvider>(y todo esto funciona en contextos que no son mdx)
Por lo que sé, renderToString crea una nueva raíz, por lo que si renderiza un componente con él que se basa en el contexto de reacción (como lo hace useQuery ), debe especificar el proveedor con él:
const mdxSource = await renderToString(<QueryClientProvider client={queryClient}>{ components }</QueryClientProvider>);