0

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

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

我想我理解这个错误，但问题是我的文件中有一个QueryClient集合 。通过 react-query 获取也适用于不属于我的 MDX 结构的其他页面和组件。QueryClientProvider_app.js

我想知道现在该怎么办？我是否需要对其进行配置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 上下文）

4

1 回答 1

0

据我所知，renderToString创建一个新的根，所以如果你用它渲染一个依赖于反应上下文的组件（就像这样useQuery做），你必须用它指定提供者：

const mdxSource = await renderToString(<QueryClientProvider client={queryClient}>{ components }</QueryClientProvider>);
于 2021-09-29T10:56:55.650 回答