小编dav*_*sto的帖子

我尝试使用自行开发的包中的钩子，该包在 create-react-app 应用程序中使用 useQuery 。

这是我的场景：我正在开发两个 npm 项目：“ Core ”和“ Demo ”。 Core包含我想在其他应用程序中使用的函数、挂钩和组件（例如作为 CRA 的Demo ）。一些钩子包含 useQuery (react-query)。不幸的是，当在Demo等其他应用程序中使用此挂钩时，即使我设置了QueryClientProvider，我总是收到错误消息“未设置 QueryClient，请使用 QueryClientProvider 设置一个” 。

我是否必须在Core中设置任何配置才能使所需的行为发挥作用（例如，将使用的挂钩放置在应用程序上下文中）？我是否必须将包构建为特定模块？或者是否可以将应用程序的 QueryClient 传递给Core的自定义挂钩？

这是一些代码来展示我的尝试：

核心/hooks/useHookWithUseQuery.js

export function useHookWithUseQuery() {
  const queryClient = useQueryClient();
  const { data } = useQuery(
    "QUERY_KEY",
    getDataFn
  );

  const invalidateData = () => {
    queryClient.invalidateQueries("QUERY_KEY");
  };

  return { data, invalidateData };
}

演示/index.js：

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient} contextSharing={false}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
); …

有时*，在登录页面访问时，document.cookie我会得到一个空字符串，即使：

1. cookie 列在 Chrome 和 Firefox 开发者工具中，
2. 我感兴趣的 cookie 的 httpOnly 标志设置为 false，
3. 我感兴趣的 cookie 路径设置为“/”。

期望的行为

我的 React 单页应用程序 (SPA) 有一个登录页面，其中包含一个<form />用于将登录凭据发送到后端的元素。当收到后端的响应并且身份验证成功时，我检查身份验证 cookie 是否已正确设置。如果是这种情况，将触发重定向，显示登录用户的内容。

实际行为

不幸的是，大约15%的登录尝试document.cookie会返回一个空字符串，这会阻止重定向并将用户保留在登录页面上。按 并F5不能解决问题，但在成功登录请求后手动替换 url 路径时（例如，将“www.website.tld/ login ”更新为“www.website.tld/ start ”），用户将被转发到所需页面仅适用于登录用户。

我无法手动重现该错误。这似乎是随机发生的。但是当它发生时，我查看开发人员控制台，我可以看到来自后端的所有 cookie（设置正确）。

附加信息

• django 服务器在后端运行
• 所需的 cookie 设置为response.set_cookie('key', 'value', secure=False httponly=False, samesite='strict')
• JS 库（axios、react-router）

有关的：

• 无法在JS中从document.cookie访问cookie，但浏览器显示cookie存在（httpOnly）
• 无法在JS中使用document.cookie访问cookie（仅http）

登录页面 (JSX)

    import React, { useState } from "react";
    import { Redirect } from "react-router-dom";
    import …