在 next-mdx-remote MDX 组件中使用 react-query？答案

【问题标题】：Using react-query inside next-mdx-remote MDX Components?在 next-mdx-remote MDX 组件中使用 react-query？
【发布时间】：2021-09-29 10:31:00
【问题描述】：

我在 next.js 应用程序中使用 next-mdx-remote。我传递给它的组件之一通过 axios 进行 API 调用。这工作正常。不过，我现在想搬到react-query。我收到以下错误：

没有设置QueryClient，使用QueryClientProvider设置一个

我想我理解这个错误，但问题是我的QueryClientProvider 在我的_app.js 文件中确实设置了一个QueryClient。通过 react-query 获取也适用于不属于我的 MDX 结构的其他页面和组件。

我想知道现在该怎么办？我是否需要在next-mdx-remote 中配置一些东西才能知道我的 QueryClient 在哪里？例如这里：

const mdxSource = await renderToString(content, { components });

通过 react-query 获取的组件是我传递下来的 components 对象的一部分。但是，默认情况下，nextjs 中的所有内容都是通过 _app.js 呈现的 - 所以我不明白为什么它找不到它？

_app.js：

  <QueryClientProvider client={queryClientRef.current}>
                <Hydrate state={pageProps.dehydratedState}>
                    <SettingsContextWrapper>
                        <Layout>
                            <GlobalStyles />
                            <Component {...pageProps} />
                        </Layout>
                    </SettingsContextWrapper>
                </Hydrate>
            </QueryClientProvider>

（这一切都适用于非 mdx 上下文）

【问题讨论】：

标签： javascript reactjs next.js react-query mdxjs

【解决方案1】：

据我所知，renderToString 创建了一个新根，因此如果您使用它渲染依赖于反应上下文的组件（如 useQuery 所做的那样），您必须使用它指定提供程序：

const mdxSource = await renderToString(<QueryClientProvider client={queryClient}>{ components }</QueryClientProvider>);

【讨论】：