标签: react-query

我正在尝试使用 React-Hook-Form 和 React-Query 制作一个表单，只要用户更改任何字段（去抖），它就会自动保存。我已经很接近了，但是当我变异时它会产生无限循环。这是我所拥有的：

"@tanstack/react-query": "^4.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.34.2",

import React from 'react'
import { useMutation, useQuery } from '@tanstack/react-query'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as Yup from 'yup'
import debounce from 'just-debounce-it'

type NameType = {
    id: number
    firstName: string
    lastName: string
}

const schemaValidation = Yup.object().shape({
    id: Yup.number().required('Required'),
    firstName: Yup.string().required('Required'),
    lastName: Yup.string()
        .min(2, 'Must be greater than 1 character')
        .max(50, 'Must be less than 50 …

我正在尝试使用react-query并向axios后端发送发布请求来注册用户，但是当我尝试通过单击按钮来触发参数突变时，我收到错误。

import React from 'react'
import { useMutation } from '@tanstack/react-query'
import axios from 'axios'
import { Button } from 'react-bootstrap'

const RegisterScreen = () => {
  const { data, error, isLoading, mutate } = useMutation((user) =>
    axios.post('/api/users', user)
  )

  const user = { name: 'john', email: 'john@example.com', password: '1234' }

  return (
    <div>
      <Button onClick={() => mutate(user)}>Register</Button>
    </div>
  )
}

export default RegisterScreen

错误信息：

ERROR in src/screens/RegisterScreen.tsx:15:37
[1] TS2345: Argument of type '{ name: string; …

我需要使 中的一些查询onSuccess无效useMutation。

我有一个queryKey这样的架构：

.....
1-["questions", "by_vendor" , "{vendor_code}" , "by_status", "{status}"]
2-["questions", "by_status", "{status}"]
3-["questions",  "by_vendor", "{vendor_code}"]
.....

我用来useQueryClient获取查询客户端。

我需要使使用的querykeys地方无效"by_status"。

有没有办法访问 active queryKeys.

有类似的方法queryClient.getQueryData()，但都需要queryKey提前。

谢谢你！

我正在学习反应查询，我正在尝试用它发布数据。

我可以使用反应查询获取数据，但无法执行相同的发布数据。我的问题是是否可以使用react-query 发布数据以及如何操作。

谢谢 ：）

我正在尝试编写一个自定义 useQuery 挂钩来获取练习列表。该钩子还应该接受一个可选的选择函数。在提供可选 select 函数的情况下，钩子返回的数据类型useQuery应为 类型number。当没有提供 select 函数时， 的类型应为PaginatedExerciseInfo<Exercises>。

我在以不扰乱打字稿的方式实现这一点时遇到了麻烦。目前，当我调用挂钩而不向其传递 select 函数时（如下所示），它返回的数据始终为 类型number。

const { data: exercises, isError, isLoading, refetch } = useGetExercises<Exercise>(muscleGroup);

由于我还没有将选择传递给它，我希望在这种情况下练习是类型PaginatedExerciseInfo<Exercises> | undefined

到目前为止，我已经尝试像这样编写钩子

export const getExercises = async (muscleGroup: MuscleGroup, page: number, perPage: number) => {
  const { data } = await axios.get(`http://localhost:8000/exercises/${muscleGroup}?page=${page}&per_page=${perPage}&sort=-date`);
  return data;
};

export const useGetExercises = <Exercises extends string>(muscleGroup: MuscleGroup, select?: (data: PaginatedExerciseInfo<Exercises>) => number) => {
  const { page, perPage } = …

在新项目中使用 react-query 并且有小问题。要求是在加载数据之前在空页面上显示加载微调器，而不是在用户使用不同查询获取新结果以在先前结果上方显示微调器之后。

第一种情况非常简单且有据可查：

  const { isLoading, error, data } = useQuery(["list", query], () =>
    fetch(`https://api/list/${query}`)
  );

  if (isLoading) return <p>Loading...</p>;

  return <div>{data.map((item) => <ListItem key={item.id} item={item}/></div>

但是，无法弄清楚第二种情况 - 因为，在查询更改后，react-query 执行从 useQuery 获取新结果和数据的操作为空，结果我得到默认的空数组，在这种情况下属于该条件 - if (isLoading && !data.length )

  const { isLoading, error, data=[] } = useQuery(["list", query], () =>
    fetch(`https://api/list/${query}`)
  );

  if (isLoading && !data.length ) return <p>Loading...</p>;

  return <div>
    {data.map((item) => <ListItem key={item.id} item={item}/>
    {isLoading && <Spinner/>}
  </div>

我真的不知道如何清楚地询问，但是，我会先粘贴我的代码并在下面询问。

function useToDos() {
  const queryCache = useQueryCache();
  const fetchTodos = useQuery(
    'fetchTodos',
    () => client.get(paths.todos).then(({ data }: any) => data),
    { enabled: false }
  );

  const createTodo = async ({ name ) =>
    await client.post(paths.todos, { name }).then(({ data }) => data);

  return {
    fetchTodos,
    createTodo: useMutation(createTodo, {
      onMutate: newItem => {
        queryCache.cancelQueries('fetchTodos');
        const previousTodos = queryCache.getQueryData('fetchTodos');
        queryCache.setQueryData('fetchTodos', old => [
          ...old,
          newItem,
        ]);
        return () => queryCache.setQueryData('fetchTodos', previousTodos);
      },
    }),
  };
}

如您所见，我正在尝试创建自己的自定义挂钩来包装反应查询功能。因此，我需要将fetchTodos查询设置为禁用，这样它就不会立即运行。但是，这会破坏所有后台数据获取吗？

具体来说，当我运行createTodo并且 …

我有一个非常基本的应用程序，可以获取用户并允许更改他的名字。我使用 React 查询获取用户，这样我就可以从缓存功能中受益。有用。

但是，当我想更新用户时，我使用 axios 的经典 post 请求。一旦用户在数据库中更新，我需要直接在 updateUser() 函数中更新缓存。我在网上看到过使用 queryCache.setCache 的教程，但它在这里不起作用。如何解决这个问题？或者也许有更好的方法来处理此类查询？

另外，我注意到大量的渲染...（请参阅应用程序文件中的“用户渲染”console.log）。

为了方便起见，我使用 pokeapi 在codesandbox 上制作了一个小脚本：

https://codesandbox.io/s/api-service-syxl8?file=/src/App.js:295-306

任何帮助将不胜感激！

我的代码如下所示：

import { useQuery, QueryClientProvider, QueryClient } from 'react-query'
import React from 'react'

const queryClient = new QueryClient()

const fetchData = async () => {
  return (await fetch(`http://jservice.io/api/random?count=50`)).json()
}

function App() {

  const [isLoading, error, data] = useQuery('qa', fetchData)

  console.log(data)


  return (

    <QueryClientProvider client={queryClient}>
      <div className="App">
      </div>
    </QueryClientProvider>

  );
}

export default App;

我使用了 React Query v3 中的确切示例，但仍然得到

Error: No QueryClient set, use QueryClientProvider to set one

我正处于完全放弃图书馆并求助于其他选择的边缘。

我正在关注我在 YouTube 上看到的一个使用React Query的示例，但我似乎无法让缓存按预期工作。在我的应用程序中，每次都会获取数据。不确定我是否遗漏了一些明显的东西。这是我的代码：https : //codesandbox.io/s/eager-faraday-nhmlb?file=/src/App.js

单击“行星”和“人物”按钮时，我可以看到每次来​​回切换时发出的网络请求。我希望看到它至少在缓存仍处于活动状态的一段时间内对每组数据发出一次请求。

有谁知道可能有什么问题？