Tanstack/react-query 在我的 vercel 应用程序中不起作用

问题描述 投票：0回答：1

包裹和问题..

"@tanstack/react-query": "^5.14.2",
"@tanstack/react-query-devtools": "^5.14.2",

"next": "^13.5.6",
"react": "18.2.0",
"react-date-range": "^1.4.0",

QueryProvider.js

"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; // downgrading react and next version raise peer dependency errors

export default function QueryClientProviderComponent ({ children }) {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60 * 5  // added the staleTime for queries globally
      }
    }
  });

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen/>
    </QueryClientProvider>
  )
}

布局.js

import './globals.css';
import { Inter } from 'next/font/google';

import QueryClientProviderComponent from "./components/QueryClientProvider";
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'abc',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <QueryClientProviderComponent>
      <html lang="en">
        <body className={inter.className}>
          {children}
          <ReactQueryDevtools initialIsOpen />
        </body>
      </html>
    </QueryClientProviderComponent>
  )
}

我面临的问题是开发工具只有在运行 

npm run dev
时才能正确显示。

我如何在 vercel 部署的应用程序和暂存环境中显示它。

如有任何帮助，我们将不胜感激。

我尝试按照官方文档进行操作 https://tanstack.com/query/latest/docs/react/devtools - 仅当运行 

npm run dev
且不在 vercel 上时，devtools 才会正确显示

  1. 我尝试通过传递 ReactQueryDevTools 将代码修改为上面的代码。
  2. 尝试降级我的依赖项，但应用程序内部崩溃了。
  3. 将结构修改为
....
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <QueryClientProviderComponent>
          {children}
          <ReactQueryDevtools initialIsOpen />
        </QueryClientProviderComponent>
      </body>
    </html>
  )
}
  1. 尝试使用 Safari 而不是 chrome
  2. 遵循此处
    3. 概述的结构
reactjs next.js devtools tanstackreact-query
1个回答
0
投票

有 2 种方法可以实现。

方法1（按照官方文档）：链接

第 1 步：在 QueryProvider 文件中添加按照官方文档描述的必要更改

QueryProvider.js

'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; // downgrading react and next version raise peer dependency errors
import { Suspense, lazy, useEffect, useState } from 'react';

const ReactQueryDevtoolsProduction = lazy(() =>
  import('@tanstack/react-query-devtools/build/modern/production.js').then(
    (d) => ({
      default: d.ReactQueryDevtools,
    }),
  ),
);

export default function QueryClientProviderComponent({ children }) {
  const [showDevtools, setShowDevtools] = useState(false);

  useEffect(() => {
    // @ts-ignore
    window.toggleDevtools = () => setShowDevtools((old) => !old);
  }, []);

  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60 * 5, // added the staleTime for queries globally
      },
    },
  });

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen />
      {showDevtools && (
        <Suspense fallback={null}>
          <ReactQueryDevtoolsProduction />
        </Suspense>
      )}
    </QueryClientProvider>
  );
}

这会在您的窗口中添加一个名为 

toggleDevtools
的功能。

第2步：下载开发工具

打开您打开网站的选项卡的控制台。粘贴 

window.toggleDevtools()
并按 Enter。

这将启动开发工具。

方法二：默认下载

如果您在方法1中注意到，showDevtools的初始值为false，因此您必须手动点击toggleDevtools方法。如果你想避免它，那就改变吧

const [showDevtools, setShowDevtools] = useState(false);

至

const [showDevtools, setShowDevtools] = useState(true);

这将确保您不必手动调用 window.toggleDevTools()

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.