下一个 JS 通过 url 查询参数获取 API

Question

Helo，我正在使用 next js 开发 Web 应用程序，使用 react 查询获取 api，现在有一个问题，当基于 url param_app.tsx 创建本地存储时=16=]

http://localhost:3000?token=123456789

如果我从索引页访问它，则找不到此本地存储

// app.tsx

import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { Hydrate, QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query/devtools';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }: AppProps) {
  const { isReady, query }: string | any = useRouter();
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            refetchOnWindowFocus: false,
            staleTime: 0,
            retry: false,
          },
        },
      })
  );

  useEffect(() => {
    if (isReady) {
      if (query.token) {
        console.info('token ', query.token);
        localStorage.setItem('token', query.token);
      } else {
        window.console.info('no token');
      }
      console.info('current token ', window.localStorage.getItem('token'));
    }
  }, [isReady]);

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
      <ReactQueryDevtools />
    </QueryClientProvider>
  );
}

export default MyApp;

及以下当我尝试从本地存储访问令牌时未找到它

  const { data, error, isFetching } = useQuery('event_list', () =>
    getEventList({
      token: window.localStorage.getItem('token') || null,
      query: {
        order_start: 'desc',
      },
    })
  );

Answer 1

由于即使 isReady 为 false 也会呈现您的页面，查询可能会在设置 localStorage 项目的效果开始之前触发一次。由于令牌不是查询的依赖项，它如果令牌更改，则不会重新获取。

您可以做的是：

如果 isReady 为假/您没有令牌，则不会呈现您的应用，但这可能会完全禁用 SSR。
将令牌放在反应上下文中，在您的查询中访问它并将其放入查询键中。这将确保您的查询 re-fetches 令牌更改时。您还可以在没有令牌时禁用查询：

const token = useTokenFromContext()
const query = useQuery(
  ['event_list', token],
  () => getEventList(token),
  {
    enabled: !!token
  }
)

下一个 JS 通过 url 查询参数获取 API

Next JS fetch API by url query param

reactjs

next.js

react-query