标签: react-query

我正在运行一个 React Native 项目，在其中测试用 React-query 编写的自定义钩子。我正在使用 Jest、@testing-library/react-hooks 和 @testing-library/react-native。在我的测试中，我似乎找不到调用钩子返回的 mutate 函数的方法。

看一下自定义钩子：

    export default function useAuthentication() {
      const { mutate, data, isSuccess, isError } = useMutation(
        authenticationApi.authenticateUser
      );
      return { mutate, data, isSuccess, isError };
    }

根据react-query的文档，我使用 renderHook() 渲染钩子并等待突变调用的结果：

    const authBody: AuthBody = {
      username: '111111',
      password: '111111',
    };
    
    describe('Authentication Hook', () => {
      const sanityCall = () =>
        axios.post('http://localhost:4000/auth/authenticate');
      console.log(sanityCall());
    
      const queryClient = new QueryClient();
      it('Gets authentication data', async () => {
        const wrapper = ({ children }: any) …

我正在使用反应查询，因为它非常强大，但我正在努力尝试在提供程序内的许多组件之间共享我的数据。我想知道这是否是正确的方法。

PostsContext.js

import React, {useState} from 'react';
import { useTemplate } from '../hooks';

export const PostsContext = React.createContext({});

export const PostsProvider = ({ children }) => {
    const fetchTemplate = useTemplate(templateId);
   
    const context = {
        fetchTemplate,
    };

    return <PostsContext.Provider value={context}>{children}</PostsContext.Provider>;
};

使用模板.js

import React from 'react';
import { useQuery } from 'react-query'
import { getTemplateApi } from "../api";

export default function useTemplate(templateId) {
    return useQuery(["templateId", templateId], () => getTemplateApi(templateId), {
        initialData: [],
        enabled:false,
    });
}

然后是我使用上下文的组件

function Posts () { …

因此，我在 onSuccess 中有一些辅助行为，例如分析等。我需要传递到跟踪，不仅是查询/突变的结果（在本例中是突变），还需要传递我传入的参数。似乎只有将其附加到返回“数据”时我才能做到这一点？

    export default function useProductToWishList () {
      const queryClient = useQueryClient();
    
      return useMutation(
        async ({ product, email }) => {
          const data = await product.addWishList({ product, email });
          if (data.status === 500 || data.err) throw new Error(data.err);
    
          return data;
        },
    
        {
          onSuccess:(data) => {
            const { product: response = {} } = data?.data ?? {};
    
            queryClient.setQueryData(['products'], {...response });
            analytics(response, email); // HERE. How can I get at email?
          }
        }
      )
    }

当我不需要它来响应但需要副作用时，这样做似乎很奇怪。有什么想法吗？

    return { ...data, email }

我正在寻找一种解决方案来跨 React-Query 突变共享数据，而无需创建自己的内部状态或上下文。

我创建了一个负责 API 调用的自定义挂钩。

myData.ts

const useDataMutation = () => useMutation('MY_DATA_MUTATION', postData);

然后，我在不同的组件中使用我的自定义挂钩。

Component1 负责变异。data一旦变异成功，响应数据将可用。

组件1.tsx

  const { mutate, data } = useDataMutation();
  
  useEffect(() => mutate('some_data'), []); 

在另一个嵌套组件中，我想访问从响应返回的数据。但我不想将数据传递到3-4层组件。我想避免使用上下文来访问这些数据。

我想要的是这样的：

组件2.tsx

  const { data } = useDataMutation();
  
  console.log({ data }); // log data once available. 

但在此示例中，Component2.ts 中的数据始终未定义。

有没有一种简单的方法可以实现这样的目标？

谢谢。

我有一个反应选择组件，其中我从 api 数据归档选项，每当我从 api 编辑一个人的姓名时，选项中的名称会发生​​变化，但值上的名称保持不变。

我想在更改人名后更改 select 的值。

--这里我使用react-query更新一个人的名字

  const deliveryPersonUpdate = (values) => {
    const id = deliveryBoy && deliveryBoy.id;
    const params = { deliveryBoyId: id, ...values };
    updateDeliveryPerson.mutate(params, {
      onSuccess: (data) => {
        toggle();
        setDeliveryBoy(data?.delivery_boy);
        queryClient.invalidateQueries([GET_DELIVERY_BOY_LIST.name]);
        toast.success("Category Updated");
      },
      onError: (error) => {
        showErrorMessages({ error });
      },
    });
  };

  const handleSubmit = (values) => {
    deliveryPersonUpdate(values);
  };

--选择组件

<Select
 onChange={(obj) => handleChange(obj)}
                paintBg
                noOptionsMessage={noOptionsMessage}
                name="deliveryBoySelect"
                className={cx(styles.addDeliveryBoySelect)}
                defaultValue={
                  !isEmpty(data?.delivery_boys) && {
                    label: data?.delivery_boys?.[0].name,
                    value: data?.delivery_boys?.[0].id,
                  }
                }
                options={data?.delivery_boys.map((d) => …

我正在使用jest并@testing-library/react-hooks测试react-query在我的 React Native 代码中实现的钩子。

测试工作正常，但最后我得到：

Jest did not exit one second after the test run has completed.

This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue.

这是我的简化代码：

import { renderHook } from '@testing-library/react-hooks'
import React from 'react'
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const useSomething = () => {
  return useQuery('myquery', () => 'OK')
}

beforeAll((done) => { …

我正在使用“react-query”从组件调用 API。为了解决这个问题，我将从 API 返回一个模拟响应。

每次，我打开下拉菜单时，都会调用 useQuery 函数，该函数又调用模拟 API。

应用程序.js

import React from 'react';
import './style.css';
import { QueryClient, QueryClientProvider } from 'react-query';
import { DropDown } from './Dropdown.js';
const queryClient = new QueryClient();
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <DropDown />
      </div>
    </QueryClientProvider>
  );
}

Dropdown.js

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

export const DropDown = () => {
  console.log('DropDown re-rendered');

  const { data, isLoading, isError …

我在实现表单时遇到一个问题，其中select 中使用的数据（通过 React-query 从数据库检索）只能在单击 input 时检索一次，并且后续单击不应导致 refetch。

如何以干净的方式做到这一点？

钩：

export const useUnitOfMeasureSelectData = ({
  queryPageIndex,
  queryPageSize,
  queryFilters,
  enabled,
  refetchOnWindowFocus,
}) => {
  return useQuery(
    ["unitofmeasure-list", queryPageIndex, queryPageSize, queryFilters],
    () => fetchItemData(queryPageIndex, queryPageSize, queryFilters),
    {
      keepPreviousData: true,
      staleTime: 60000,
      enabled,
      refetchOnWindowFocus,
      select: (data) => {
        const categories = data.data.results.map((obj) => ({
          value: obj.id,
          label: obj.name,
        }));
        return categories;
      },
    }
  );
};

onClick={()=>refetch()}在每次点击时调用重新获取数据的组件中。

  const {
    data: unitOfMeasureSelectData = [],
    refetch: refetchUnitOfMeasureSelectData,
  } = useUnitOfMeasureSelectData({
    queryPageIndex: queryPageIndex, …

我正在尝试将 queryKey 变量与 useInfiniteQuery 中的 pageParam 一起传递？我已经尝试了一段时间但是：

• 无法获取页面数据
• 在某些情况下，数据会被重复呈现。

我应该如何传递变量？

export const fetchInfiniteVariants = async (
  filters = {},
  { pageParam = 0 }
) => {
  const records = await axios.get(baseURL, {
    headers: authHeader,
    params: {
      pageSize: 24,
      offset: pageParam,
      fields: [
        "name",
        "packshot",
        "packshot_size",
        "brand_logo",
        "price",
        "slug",
      ],
      // filterByFormula: `({validated} = 1)`,
      filterByFormula: `(${filterByFields(filters)})`,
      "sort[0][field]": "priority",
      "sort[0][direction]": "asc",
    },
  })
  return records
}

export const useInfiniteVariantsQuery = (
  initialRecords,
  offset,
  filters = { brand: "HAY" }
) …

我们使用一个糟糕的 API，其中 404 响应意味着一个空数组。

有没有办法告诉 React Query 将 404 错误转换为空数组？

我希望有办法做这样的事情吗？

const {data, isLoading, isError} = useQuery('key', apiCall, {
    onError: (error) => {
      if(error.statusCode === 404) {
        setData([]);
        setIsError(false);
      }
    }
});