标签: react-query

我有类似的东西：

// useMyList hook:

const allQueries = myList.map((myData) => {
  return {
    queryKey: ['myquerykey'],
    queryFn: myQueryFn
  }
}

return useQueries(buildQuery)

现在在我的组件中，我有：

const myData: any = useMyList()

const allQueriesSuccess: boolean = myData.every((result: any) => result.isSuccess)

来自 queryFunction 的响应数据将与已设置的名为 的类型匹配IMyData。我怎样才能正确输入myData和结果？myData将是一个反应查询标准响应数组，其中data每个元素匹配的字段IMyData。

我正在使用 React 18、React 测试库 14.0.0 和 React Query 3.3。在浏览器（真实用户）上下文中，一切都像魅力一样工作。但在测试时我遇到了一些问题。

我的组件（简化）：

import { useQuery } from "react-query"

export const Dashboard = () => {
    const { data } = useQuery(...)
    const { data: project } = useQuery(...)

return <div data-testid="project-name">{project.name}</div>

考试：

import { ReactElement, Suspense } from "react"
import { render } from "@testing-library/react"
import { QueryClient } from "react-query"

export const testRenderer = (test: ReactElement) => 
render(<Suspense fallback={<div>loading...</div>}>
  <QueryClientProvider
    client={
      new QueryClient({
        defaultOptions: {
          queries: {
            suspense: true,
          },
        }, …

他们在 React Query 中提到的这个缓存在哪里，是 localStorage/IndexedDB/SessionStorage 吗？他们经常说它是内存，它也指向cookies或localStorage。这个“缓存”的位置在哪里？

如果叫内存的话，我们如何对这块内存中的缓存数据进行CRUD操作呢？（我假设RAM就是内存）

例如，我想处理当前在我的反应应用程序中运行的所有查询的过期访问令牌错误。

1. 我需要捕获全局过期的访问令牌错误
2. 取消其他查询很快就会抛出相同的错误
3. 更新上下文中的访问令牌
4. 使所有失败/取消的查询无效并使用新的访问令牌重新获取。

React Query 是否提供了一种方法来做到这一点？您能展示一下如何实现这一目标的简单示例吗？

目前，我的代码如下所示。当突变成功时，我必须重新获取所有数据，因为tasks不会更新。tasks提交或删除任务时如何更新客户端？

  const { data: sessionData } = useSession()

  const {
    data: tasks,
    refetch: refetchTasks,
  } = api.task.getAll.useQuery(undefined, {
    enabled: sessionData?.user !== undefined,
  })

  const createTask = api.task.create.useMutation({
    onSuccess: async () => await refetchTasks(),
  })

  const createTaskValues = (values: { title: string }) =>
    createTask.mutate({ title: values.title })

  const deleteTask = api.task.delete.useMutation({
    onSuccess: async () => await refetchTasks(),
  })

聚苯乙烯

useContext()除非你想每次都重新获取数据，否则使用比调用 refetch 函数更好。

const utils = api.useContext()

  const createTask = api.task.create.useMutation({
    onSuccess: () => utils.task.getAll.invalidate()
  }) …

在使用 TypeScript 进行 React 查询中，我有一个 getRecommendations 钩子，我只想发送最新的记录（可能还有另一个用于监视列表等的钩子）。我在 queryKey 中收到错误消息：

“没有重载与此调用匹配。上次重载出现以下错误。类型为 '{ queryKey: string[]; queryFn: () => Promise<FetchResponse |Recommendations[]>; }' 的参数不可分配给类型参数'QueryKey'。对象文字只能指定已知属性，并且 'queryKey' 不存在于类型 'readonlyknown[]'.ts(2769) 中”

import { useQuery } from "@tanstack/react-query";
import apiTest from "../../Services/api-test";

export interface Recommendations {
  title_description: string;
  title_id: number;
  title_name: string;
}

export interface FetchResponse<T> {
  latestrecs: T[];
  watchlist: T[];
}

const useRecommendations = () =>

  useQuery<FetchResponse<Recommendations>, Error>({
    queryKey: ['recommend'],
    queryFn: () =>
      apiTest.get<FetchResponse<Recommendations>>("/titles")
        .then((res) => res.data.latestrecs),
  })


export default useRecommendations;

我有一个 JSON 数据示例，如下所示：（每个数据中会有更多标题）

{
    "latestrecs": [ …

我需要更多细节来支持这个问题：Explain data revalidation in Next JS 13

我正在使用新的 next js 13 应用程序目录功能来获取数据；正如 Next JS 13 文档所述，在本页标题为“在服务器上获取数据”的部分中：

只要有可能，我们建议在服务器上获取数据。

该文档讨论了新的数据获取技术（例如服务器操作和路由处理程序）如何允许客户端组件与服务器通信以获取数据，而不是直接在客户端中获取数据。服务器操作和路由处理程序用于创建可直接访问数据库的专用 API；但是，我使用的是 Supabase，Supabase 生成了一个 API 供我与数据库进行通信。

因此，我正在争论在服务器操作或路由处理程序上执行 Supabase API 调用是否有意义，或者（因为 Supabase API 已经托管在 supabase 服务器上）客户端 API 调用是否可以。

具体来说，Next JS 建议在服务器上获取数据，然后调用生成的 api（服务器操作或路由处理程序），我有点困惑；虽然服务器操作和路由器处理程序可以为我进行 api 调用，但这有必要吗？由于我正在调用在其他地方提供服务的专用 API 路由，而不是直接数据库调用，为什么不直接从客户端进行调用（例如 fetch api 或 React 查询，直接在客户端组件中）。这与调用服务器操作或路由处理程序有何不同，因为它们只是生成要从客户端调用的 api？

import React, {useState, useEffect, Component} from 'react';
import {Grid, Paper, TextField} from '@material-ui/core'
import DataManager from './../data_manager/data_manager'

const dataManager = new DataManager();

const Tile = (props)=>{
    // Initializing State Variables
    const [state, setState] = useState({
        data : {}
    })

    const { status, data, error, isFetching } = useQuery("data",async()=>{
        const res = await fetch("localhost:8000");
        return res.json()
    }

    if(status==="success"){
        setState({data})
    }else{
        return(<p>Doing</p>)
    }
}

此代码会导致无限循环，渲染不断循环进行。

我认为这是因为setState导致useQuery再次执行再次设置状态等等。

任何帮助表示赞赏。我想将从 useQuery 获得的数据存储在状态变量中。

TIA。

设置

我有以下react-query钩子：

const STALE_TIME_MS = 12 * 60 * 60 * 1000; // 12h

const useUser = () => {
  const services = useServices();
  const { isLoading, error, data } = useQuery(
    'user',
    () => services.user.verify(),
    {
      staleTime: STALE_TIME_MS,
      cacheTime: STALE_TIME_MS,
    }
  );
  return {
    isLoading,
    error,
    user: data,
  };
};

然后，我有一个App组件作为一个孩子住在里面QueryClientProvider：

const App = () => {
  const { isLoading } = useUser();

  if (isLoading) {
    return <Authenticating />;
  }

  return (
    <HashRouter> …

我有一个页面，其中加载了一个下拉组件。该组件调用一个自定义钩子，该钩子使用反应查询来获取要在下拉列表中显示的数据。初始加载时，该组件处于加载状态并呈现加载图标。当react-query成功完成调用时，组件将数据列表呈现到下拉列表中。

const SelectItem = ({ handleSelectChange, selectedItem }) => {
  
  const { data, status } = useGetData(url, 'myQueryKey');

  if (status === 'loading') {
    return <RenderSkeleton />;
  }

  if (status === 'error') {
    return 'An Error has occured';
  }

  return (
    <>
      <Autocomplete
        options={data}
        getOptionLabel={(option) => `${option.name}`}
        value={selectedItem}
        onChange={(event, newValue) => {
          handleSelectChange(newValue);
        }}
        data-testid="select-data"
        renderInput={(params) => <TextField {...params}" />}
      />
    </>
  );
};

我如何正确测试这个？即使在实现 msw 来模拟响应数据之后，我的测试也仅呈现骨架组件。所以我假设它基本上只等待“isLoading”状态。

it('should load A Selectbox data', async () => {
  render(
    <QueryClientProvider client={queryClient}> …