标签: react-query

我是新来的反应查询并且到目前为止很喜欢它。我知道它主要是一个 UI 库。所以它非常适合处理/显示错误、加载状态。但我经常发现自己想要以异步方式等待某些特定操作。因此，我希望能够在触发操作（例如重定向）之前等待承诺返回。

这是一个例子：

const NewPostForm = props => {
  const history = useHistory();
  const mutatePostInfo = useUpdatePost(); // useMutate hook
  const [value, setValue] = useState("")
  
  const handleSubmit = () => {
    mutatePostInfo.mutate(value);
    // I WANT TO: wait for the action to complete before redirecting
    history.push("/new-route/")
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
    </form>
  )
}

给出以下代码：

const setFriendCode = (data: Params) => api({ data })
const [mutateSetFriendCode, state] = useMutation<Response, Params>(
  setFriendCode
)

“(data: Params) => Promise”类型的参数不可分配给“MutationFunction<Response, undefined>”类型的参数。参数“数据”和“变量”的类型不兼容。类型“未定义”不可分配给类型“Params”.ts(2345)

为了避免我使用的编译错误。

const setFriendCode = (data?: Params) => api({ data })
const [mutateSetFriendCode, state] = useMutation<Response, Params>(
  setFriendCode
)

但我想根据需要提供“数据”。

如何去掉上面的问号data？

我第一次尝试响应查询，然后在我的 React 应用程序开始时得到了这个。

import React from 'react'
import { useQuery } from "react-query";

const fetchPanets = async () => {
    const result = await fetch('https://swapi.dev/api/people')
    return result.json()
}

const Planets = () => {
    const { data, status } = useQuery('Planets', fetchPanets)
    console.log("data", data, "status", status)
    return (
        <div>
            <h2>Planets</h2>
        </div>
    )
}

export default Planets

我想通过以下方式实现这个场景react-query：

我的组件获取一个 API，并且应该在客户端的互联网断开连接时尝试一次，并且如果重新连接互联网则永远不会重新获取...并且在 3 秒后如果重试不成功，应该显示错误并带有用于重试请求的按钮。

const URL = 'https://randomuser.me/api/?results=5&inc=name';

const Example = () => {
  const { error, data, isLoading, refetch } = useQuery('test', () =>
    fetch(URL).then(response => response.json()).then(data => data.results), {
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
    retry: 1,
    retryDelay: 3000
  });

  if (isLoading) return <span>Loading...</span>

  if (error) return <span>Error: {error.message} <button onClick={refetch}>retry</button></span>

  return (
    <div>
      <h1>Length: {data ? console.log(data.length) : null}</h1>
      <button onClick={refetch}>Refetch</button>
    </div>
  )
}

考虑到上面的代码，我设置refetchOnReconnect: false为在连接互联网后禁用重新获取，retry: 1设置一次尝试并retryDelay: 3000设置重试时间限制。

但是当我在 DevTools …

我是一个使用react的用户。我在使用react-query时没有很好地使用isloading函数。在ui方面，我认为正在加载用于向用户显示加载屏幕。我认为我不必显示加载，因为数据获取速度很快。

但突然，我想到了这个想法。

如果你把 props 交给子组件，在数据通过 undefined 并获取到数据后，你经常会渲染获取的数据，所以我认为这可能是因为优化渲染的原因，还是有其他原因？

我意识到：如果我想使用钩子，import { useQuery } from 'react-query'我只能在 React 函数组件中做到这一点。

我是否必须用 React 函数语法重写旧的类组件，或者是否有一种简单的方法可以将 React-query 与类语法一起使用？

我确信它在某个地方有记录，但我只能找到使用 React 函数组件的教程。

使用 useInfiniteQuery 时如何使单个项目无效？这是一个示例，演示了我正在尝试完成的工作。

假设我有一个成员列表，每个成员都有一个关注按钮。当我按下关注按钮时，会单独调用服务器以标记给定用户正在关注另一个用户。在此之后，我必须使整个无限查询无效以反映单个成员的关注状态。这意味着我可能在无限查询中加载了很多用户，我需要重新获取已经加载的所有项目，以反映一个项目的更改。

我知道我可以在 follow fetch 返回成功时更改 queryClient.setQueryData 中的值，但没有跟随这个无效和获取成员，我基本上与服务器不同步并依赖本地数据。

任何可能的方法来解决这个问题？

这是一张参考 UI 照片，以防万一它会有所帮助。

考虑一个自定义useSignUp钩子，该mutate()钩子函数需要一些字段（name在email本例中）：

export default function App() {
  const name = "David";
  const email = "david@gmail.com";
  const signupMutation = useSignUp();

  return (
    <button
      onClick={() => {
        signupMutation.mutate(
          { name, email },
          {
            onSuccess: (result) => {
              ...
            },
            onError: (result) => {
              // Wanted: result of type ErrorResult<"name" | "email">
            }
          }
        );
      }}
    >
      Sign Up
    </button>
  );
}

在这种情况下，我希望onError的结果是这种类型ErrorResponse<"name" | "email">。但是，我明白了ErrorResponse<string>。

这是为什么？我如何指示 TypeScript 根据传递的数据推断特定的类型（即"name" | …

查询，\n我现在正在制作一个公告板。\n因此，我将信息title, content中的值 \xe2\x80\x8b\xe2\x80\x8bof 放入函数Form中。在该值中，console.log没有反应。react-queryonSuccess

export const useAddFAQPost = () => {\n    return useMutation(FaqPost)\n}\n\nexport function FaqPost(data: FAQ) {\n    return axios.post<FAQ>('/add', data, {\n     \n    })\n}\n

  const { mutate } = useAddFAQPost()\n\n    const onSubmit = useCallback((event: React.ChangeEvent<FormEvent>) => { \n        event.preventDefault();\n        return mutate({ title, type } as FAQ), {\n            onSuccess: async (data: string, context: string) => {\n                console.log(data);\n                console.log('why not?');\n            },\n            onError: async (data: string, context: string) => {\n                console.log(data);\n            } \n        };\n    }, [title, …

我目前正在我的项目中尝试react-query。

我在处理突变中的错误时遇到了麻烦。

在我的网络选项卡中，我可以确认服务器正在响应代码 400 或 500，我认为这会使 axios 抛出错误，从而触发定义的 onError 函数。

但是，无论 API 调用如何进行，onSuccess 函数始终会被调用。

我在这里缺少什么？提前致谢。

const { mutate } = useMutation(
['mutation'],
() => axios.patch(API_URL, params),
{
  onSuccess: () => {
    //this is always fired, even when response code is 400, 500, etc.
    void queryClient.invalidateQueries('query');
  },
  onError: () => {
    //should do something but never fired
  },
}

）；