使用 React Query 和 NextAuth 登录后经过身份验证的请求

如何解决使用 React Query 和 NextAuth 登录后经过身份验证的请求

在使用 NextAuth 登录我的 Nextjs 应用程序后，我无法立即向我的 API 发送经过身份验证的请求。登录后发送的请求为未经身份验证的用户返回数据。

我认为问题在于 React Query 使用的是带有未定义 jwt（这意味着它未经身份验证）的先前版本的查询函数。这是有道理的，因为查询键没有改变，所以 React Query 不认为这是一个新查询，但是，我的印象是登录会导致 loading 暂时设置为 true 然后返回 false，这会导致 React Query 发送一个新的请求。

我已经尝试使用 queryClient 使应用程序中的所有查询无效，但这没有用。我还使用 React Query Devtools 在登录后使此特定查询无效，但它仍然返回未经身份验证的请求。只有在刷新页面后，它才会真正发送经过身份验证的请求。

// useGetHome.js
const useGetHome = () => {
  const [session,loading] = useSession();
  console.log(`session?.jwt: ${session?.jwt}`);
  return useQuery(
    'home',() => fetcher(`/home`,session?.jwt),{
      enabled: !loading,},);
}

// fetcher
const fetcher = (url,token) => {
  console.log(`token: ${token}`);  
  let opts = {};
  if (token) {
    opts = {
      headers: {
        Authorization: `Bearer ${token}`,};
  }

  const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}${url}`,opts);

  if (!res.ok) {
    const error = await res.json();
    throw new Error(error.message);
  }

  return res.json();
}

// Home.js
const Home = () => {
  const { data: home_data,isLoading,error } = useGetHome();
  ...

  return(
    ...
  )
}

附上登录后的控制台，登录后可以看到session对象包含jwt，但是在fetcher函数中是未定义的。

console after signing in

感谢这里的任何帮助。有没有更好的方法来使用 React Query 和 NextAuth 处理经过身份验证的请求？谢谢！