标签: react-query

我正在使用反应查询。

有一系列文档（仅描述数据，没有真正的 blob），并提供下载选项。他们有一个 onClick 处理程序，它调用一个处理下载的函数。

如果用户单击下载按钮，则会出现一个 http 请求 getDocumentById 来获取您要下载的文档。

问题是，我无法在该handleDownload 函数中调用我的自定义查询挂钩。但我拥有特定文档 ID 的唯一位置是在该函数中。

const parseDocuments = () => {
    return documents.map(document => ({
      ...document,
      name: document.fileName,
      date: formatDateForUI(new Date(document.created)),
      downloadDocumentHandler: () => downloadFileClickHandler(document),
      read: document.read
    }));
  }

function handleDownload(document) {
  <here I need to call the getDocumentById>
}

return (
  <DocumentsTable documents={parseDocuments()} headers={headers} accountId={accountId} />
)

处理这个问题的最佳方法是什么？

我有以下代码

const { 
   isLoading, 
   error, 
   data: calculatorProducts 
} = useQuery('fetchSomething', ()=> fetchFunc())

当我访问我的主页时应该调用此函数，但是当从另一个页面返回此路由时，不会触发此请求，并且我没有获取新数据。我想要的是每次像 useEffect 一样调用这个查询

我有一个使用 formik 和反应查询的表单。我想在成功时重置表单。

有没有办法将 resetForm 函数作为参数传递给 onSuccess ？

const mutation = useMutation(
  (newUser) =>
    axios.post(`/api/accounts`, newUser),
  {
    onSuccess: (data) => {
      alert(JSON.stringify(data));
      router.push(`/confirm-email?email=${data.email}`);
    },
    onError: (error) => {
      if (error.response && error.response.data.message) {
        openSnackbar(error.response.data.message);
      } else {
        openSnackbar('Something went wrong, please retry later');
      }
    },
  }
);

形式

<Formik
  onSubmit={(values, { setSubmitting, resetForm }) => {
    mutation.mutate(values);
    setSubmitting(false);
  }}
>
  ...
</Formik>

我正在使用useQueryfromreact-query来获取我只希望查询在某种条件下运行的数据。我该如何使用它？以下是我要使用的代码useQuery

  const query = useQuery<APIResponse, Error>(
    [{query: creatGQL, variables: variables}],
    async () => {
      const result: APIResponse = await ucFetch(apiUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          query: creatGQL,
          variables: variables,
        }),
      });
      return result;
    }  );
  return query;

大家是怎么处理这个案子的：

• 查询帖子返回列表
• 然后编辑帖子，所以我只需要再次获取该帖子的详细信息

它可能在某种程度上与标准化有关，但我认为我们可以有一些最佳实践来处理这个问题。

也许我们可以有一把钥匙

• 列表：['post']
• 帖子项目：['post', {id: number}]

然后，当我们获取列表时，我们实际上为帖子项目设置了数据，并且只['list']保存了 id。

那有意义吗？或者任何人对此有更好的解决方案

反应查询的新功能。有一个带有手动刷新按钮的漂亮表格。拥有表和按钮行的父级拥有查询，我通过 props 向下传递一个“重新加载”函数，onClick（向下几级）执行该函数：

const MyComponent = () => {
   
   var qKey = ['xyz', foo, bar];
   
   const reload = () => {
        useQueryClient().invalidateQueries(qKey)
   }

   const {isLoading, error, data, isFetching} = useQuery(qKey, async () => {
      /* stuff */
      return response.json()
    }, {keepPreviousData: true});

   return (
      <ActionsBar onRefresh={reload} onClear={foo} onSearch={bar}/>
      <Other stuff...>
   )
}

const ActionBar = (props) => {
   const {onRefresh, onClear, onSearch} = props;

   return (
      <Button onClick={ () => onRefresh()}>Refresh</Button>
      /* other stuff */

收到错误消息“reload”正在调用钩子，但不是 React 函数组件或客户 React 钩子函数。 …

当 useEffect 挂钩被触发时，如何等待 useQuery 挂钩完成？

我有一个非常复杂的功能组件，并且我正在触发一个 useEffect 挂钩，其依赖项来自祖父母功能组件。useQuery 钩子和 useEffect 钩子都可以成功工作。然而，当 useEffect 钩子被触发时，它不会等待查询完成就执行 useEffect 调用的函数。

失败的解决方案#1：我尝试使用async和await，但是当你使用returnawait时，你只是“uwrapping”一个承诺，只是为了再次“包装”该值（因为你在一个async函数中），所以它是多余的。

解决方案 #2 失败。我可以使用 .then() 但需要调用的函数将在 .then() 内，我将如何从 useEffect 中调用它。

const data = useQuery('lists', ...{promise is returned)..);
const functionToBeCalled = () => { //uses data }
useEffect(() => {
        if (grandparent prop) { functionToBeCalled()}
    }, [grandparent prop]);

任何支持将不胜感激。

我创建了一个 vite-react 应用程序，在我的应用程序中我试图获取公共 API

https://api.football-data.org/v4/matches

// This does not work

但我得到

Access to fetch at 'https://api.football-data.org/v4/matches' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我知道该错误意味着什么，但这是一个公共 API，我对在哪里添加 CORS 感到困惑。

但我注意到我可以使用相同的方法成功获取另一个公共 API。

http://swapi.dev/api/planets/1/

// This API works

页面.tsx

const fetchAllCompetitions = async () => {
  const res = await fetch("https://api.football-data.org/v4/matches");
  return res.json(); …

在 redux/context api 中，我们曾经获取数据并保存在全局状态一次。然后我们可以在整个应用程序中重用全局状态。例如：保存用户 ID、令牌等的用户身份验证状态。我想知道做同样事情的反应查询方式是什么。

我正在尝试使用打字稿进行反应查询教程，但是在获取数据时发生了错误。

代码：

type heroType = {
  id: number;
  name: string;
  alterEgo: string;
};

function QueryDataFetch() {
  const fetchdata = ()=>{ return axios.get("http://localhost:8000/superheroes")}
  const { isLoading, data ,error} = useQuery<heroType[]>(["heros"],fetchdata);

此错误红色 unline 显示在fetchdata

数据：

[
{
"id": 1,
"name": "Batman",
"alterEgo": "Bruce Wayne"
},
{
"id": 2,
"name": "Superman",
"alterEgo": "Clark Kent"
},
{
"id": 3,
"name": "Wonder Woman",
"alterEgo": "Princess Diana"
}
]

错误：

TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of …