标签: react-query

我正在使用带有打字稿的反应查询。赋予函数的参数的类型是什么？

导出 const useIsTokenValid = () => { const { data: token } = useQuery<string | null>(['token'], getToken, { refetchOnMount: false, }); return useQuery(['isTokenValid', token], validateToken, { refetchOnMount: false,enabled: typeof token !== 'undefined', }); };

export const validateToken = async ({ queryKey }: WHAT_TYPE_SHOULD_I_PUT_HERE) => {
  console.log('validating token');
  const [_, token] = queryKey;
  if (token) {
    const res = await axios.get<boolean>(BACKEND_URL + '/', {
      headers: {
        Authorization: token,
      },
    });
    return res.data;
  } else {
    return false;
  }
};

我应该在“WHAT_TYPE_SHOULD_I_PUT_HERE”处放置什么类型？ …

我想使用react-query并发出网络请求。我想给我的请求一个超时时间，以便在该时间之后网络请求被放弃/超时。

我已通读 useQuery 文档，但似乎没有列出符合此要求的内容。

我可以用反应查询来做到这一点吗？如果没有，您还有什么建议？谢谢你！

我试图创建一个可重用的钩子，其中包括来自反应查询的另外 2 个突变钩子，它执行 2 个不同的操作。我成功地创建了我的自定义挂钩，一切都按预期工作。我唯一的问题是，在构建钩子时，我必须在自定义钩子中使用 useEffect 。我只是想知道在自定义挂钩中使用 useEffect 是否是一种不好的做法，我是否需要更改我的方法？会因此而产生性能问题吗？有什么我应该注意的吗？

我react-query与 Next JS getServerSideProps 结合使用，在页面加载之前使用文档中指定的水合方法来获取数据，如下所示：

// Packages
import { dehydrate, QueryClient } from '@tanstack/react-query';

// Hooks
import { useGetGoogleAuthUrl, useGetMicrosoftAuthUrl } from '../hooks/auth';
import { getGoogleAuthUrl, getMicrosoftAuthUrl } from '../hooks/auth/api';

export async function getServerSideProps({ req, res }) {
  const queryClient = new QueryClient();
  const microsoftAuthQueryClient = new QueryClient(); // Not working
  
  await queryClient.prefetchQuery(['getGoogleAuthUrl'], getGoogleAuthUrl);
  await microsoftAuthQueryClient.prefetchQuery(['getMicrosoftAuthUrl'], getMicrosoftAuthUrl); // Not working

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
      dehydratedMicrosoftAuthState: dehydrate(microsoftAuthQueryClient), // Not working
    },
  };
}

export default function Signin() …

这里我使用 React Query 来获取数据。我在 useQuries refetchInterval 中使用了 3000 毫秒，所以每 3 秒就会重新获取数据。因此，当我显示数据时，它会随着我们重新获取数据而自动更改。但就我而言，我不想重新获取数据超过 3 次，假设我只想使用 {refetchInterval : 3000} 3 次，然后它将停止重新获取数据。

有什么办法可以做到这一点吗？我怎样才能使用 refetchInterval 选项修复它 3 次。ecah time 它将在 3 秒后重新获取，onec 它重新获取 3 次它将自动停止，并且不再有 reftech 将工作。

请帮我解决这个问题并在 3 次后中断 refetchInterval。感谢您的提前尝试！

  const fetchData = () => {
            const rA=  devices?.map(async (id) => {
                const info = await axios.get(`https://www.roads.com/road/api/roadControl/${id}`, myHeaders).then((res) => {
                    return res.data;
                })
                return info
                
            })
            
            return rA;
        };
    
        const { data } = useQuery("post", fetchData,
            { refetchInterval: 3000 });

在这个问题上已经停留了一段时间，现在尝试将反应查询重新安装到我的代码库中。

我有一个使用 getStaticProps 的工作版本。

我一直在尝试使用 next/router 中的 router.isReady 来尝试强制页面等待 router.query 值出现，然后再将其作为 props 传递给反应钩子。

这是我的代码...

页面/艺术家/[artistId].js

import React, { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useQuery } from "@tanstack/react-query";

import Head from "next/head";
import ArtistHeader from "../../components/ArtistHeader";
import UploadButton from "../../components/UploadButton";
import fetchArtist from "../../hooks/getArtists";

import styles from "../../styles/artistPage.module.css";

export default function Artist() {
  const { status } = useSession();
  const [artist, setArtist] = useState(null);
  const router = …

我不确定如何使用 trpc 进行乐观更新？这是“内置的”还是我必须使用react-query的useQuery钩子？

到目前为止，我正在尝试这样做，但它不起作用：

 const queryClient = useQueryClient();

    const updateWord = trpc.word.update.useMutation({
        onMutate: async newTodo => {
            // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
            await queryClient.cancelQueries({ queryKey: ['text', 'getOne'] })

            // Snapshot the previous value
            const previousText = queryClient.getQueryData(['text', 'getOne'])

            // Optimistically update to the new value
            queryClient.setQueryData(['text', 'getOne'], old => old ? {...old, { title: "Hello" }} : undefined)

            // Return a context object with the snapshotted value
            return { previousText }
        },
//... …

我只是想在执行突变后从服务器获取最新数据。我的代码看起来像这样：

  const utils = trpc.useContext()
  const markAsUnreadMutation = trpc.useMutation(['update-mark-as-unread'], {
    onSuccess() {
      utils.invalidateQueries() //THIS IS NOT WORKING!
    },
    onError(data) {
      toast({
        type: 'error',
        message: data.message,
      })
    },
  })

  function markAsUnread(isUnread: boolean) {
    markAsUnreadMutation.mutate({
      id: parseInt(channel.id),
      markAsUnread: isUnread,
    })
  }

我正在做一个 React JS 项目。在我的项目中，我使用 React 查询https://react-query.tanstack.com/docs/guides/mutations。我正在使用突变向服务器发出发布请求。但是当 API 调用失败并返回 onError 时，我正在尝试从服务器获取响应返回。

这是我的代码。

let [ createItem ] = useMutation(payload => createItem(payload), {
    onSuccess: (response) => {
      
    },
    onError: (error) => {
      // here I am trying to get the response. In axios, we can do something like error.data.server_error_code
    },
    onMutate: () => {
      
    }
  })

正如您在评论中看到的那样，我试图在 onError 回调中读取从服务器返回的字段。我怎样才能做到这一点？

目前我redux在不同的项目中使用状态管理。几天前，我听说react-query它也用于状态管理并提供缓存和异步获取。我试图找出这两个库之间的主要区别。我应该在哪里使用react-query以及在哪些情况下我需要 redux。