标签: tanstackreact-query

错误：(0, tanstack_react_query__WEBPACK_IMPORTED_MODULE_3 _.useQuery) 不是函数

我正在使用 next js 和 @tanstack/react-query 来获取数据，但在获取数据时出现上述错误。

我所做的代码如下。

这是我用于获取和呈现数据的组件。

import React from 'react'
import ServiceProps from '../interfaces/ServiceProps'
import { fetchServices } from '../api/services/api'
import { useQuery } from "@tanstack/react-query";

const Service = ({ title, content }: ServiceProps) => {
    const { data, isLoading, isError, error, } = useQuery({ queryKey: ["fetchServices"], queryFn: fetchServices });
    console.log(data)
    return (

        <div className="dark:bg-transparent rounded-lg  dark:border-[#212425] dark:border-2 bg-blue-50 p-8">
            {/* <img alt="icon" srcset="/images/icons/icon-1.svg 1x, /images/icons/icon-1.svg 2x" src="/images/icons/icon-1.svg" width="40" height="40" decoding="async" data-nimg="1" className="w-10 h-10 …

我需要帮助弄清楚为什么我的代码无法工作，并且我不断收到此错误：

No overload matches this call.
  Overload 1 of 3, '(options: UndefinedInitialDataInfiniteOptions<any, Error, InfiniteData<any, unknown>, string[], undefined>, queryClient?: QueryClient | undefined): UseInfiniteQueryResult<...>', gave the following error.
    Argument of type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: undefined; }) => Promise<any>; getNextPageParam: (lastPage: any) => any; refetchInterval: false | 1000; }' is not assignable to parameter of type 'UndefinedInitialDataInfiniteOptions<any, Error, InfiniteData<any, unknown>, string[], undefined>'.
      Property 'initialPageParam' is missing in type '{ queryKey: string[]; queryFn: ({ pageParam }: { pageParam?: …

我正在使用 MUI X Data Grid v5 和 Tanstack React Query v4 我尝试在 Datagrid 组件上使用分页，当页面最初加载时，它会按预期正常获取并加载网格。当我点击进入网格的下一页时，问题就出现了，我尝试通过向我的 api 发送跳转来重新获取数据。api 没有问题，它可以正确获取下一组数据。然而，在Datagrid中，它只渲染结果集的最后一条记录。在我的控制台和网络响应中，我看到一个包含正确数量记录的数组。如果我向后导航，它将立即呈现所有“丢失”的行，但然后继续获取 onPageChange 并正确呈现所有记录。

代码沙箱链接：

这是我尝试过的：

const ApprovalGrid = () => {
  const authorization= useContext(AuthorizationContext);
  const [skip, setSkip] = useState(0);
  const [page, setPage] = useState(0);
  const pageSize = 10;
  const fetchData = async () => {
    return await doFetch(
      '/get/approvals', {
        query: {pageSize: pageSize, skip: skip },
      }),
      authorization,
    );
  };

  const { data, isLoading, isFetching, isRefetching, refetch } = useQuery(
    ['Approvals-viewAll', page],
    async () …

将反应查询更新到最新版本后，使用 useMutation 时，“isLoading”状态未定义。这是代码：

const useAddUserNote = (owner: string) => {
  const queryClient = useQueryClient();
  const { mutate, error, data, isLoading } = useMutation({
    mutationFn: (note: CreateNoteData) => addUserNote(note),
    onSuccess: () => {
      queryClient.invalidateQueries(["allUserNotes", owner]);
    },
  });

  if (error instanceof Error) error;

  return { mutate, data, error, isLoading };
};

这是类型错误

Property 'isLoading' does not exist on type 'UseMutationResult<any, Error, CreateNoteData, unknown>'.

当我控制台记录“isLoading”时，它是未定义的