React-query как использовать useInfiniteQuery?

Я привязываю к передаче запроса getAnalysisListByPatientIdApi, поэтому я попытался поместить запрос в первый параметр массива useInfiniteQuery, например useQuery

  const { data: analyses } = useInfiniteQuery(
    ['getAnalysesByPatientIdApi', { patientId: selectedPatientId }],
    getAnalysisListByPatientIdApi,
    {
      getFetchMore: (lastGroup, allGroups) => {
        const morePagesExist = lastGroup?.data.result.contents.length === 9
        if (!morePagesExist) return false
        return allGroups.length + 1
      },
    },
  )


export const getAnalysisListByPatientIdApi = (_: string, query?: AnalysisListPatientQuery) => {
// should get query from useInfiniteQuery
  return api.post<PagingResponse<AnalysisListPatientResponse>>(`/analysis/list/patient`, {
    page: query?.page || 1,
    size: query?.size || 9,
    patientId: query?.patientId || '',
  })
}

Я ожидал получить {PatientId: selectedPatientId} от useInfiniteQuery в getAnalysisListByPatientIdApi, но возникла ошибка: Type '{ patientId: string; }' is not assignable to type 'string'.

Как это решить? Любые идеи?


typescript react-query
person JillAndMe    schedule 13.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ура ~! Я сделал это сам. Для тех, кто хочет знать, как использовать useInfiniteQuery ...

Ключевым моментом является то, что useInfiniteQuery сам по себе передает курсор в exampleApi. Все, что вам нужно сделать, это реализовать getFetchMore

import React from "react";
import { useInfiniteQuery } from "react-query";
import { ReactQueryDevtools } from "react-query-devtools";
import axios from "./fakeApis/axios";

const exampleApi = async (_: any, cursor: number) => {
  console.log(_, cursor);
  return await await axios.post(`/list/${cursor || 1}`);
};

export function App() {
  const { canFetchMore, isLoading, error, data, fetchMore } = useInfiniteQuery(
    "repoData",
    exampleApi,
    {
      getFetchMore: (lastGroup, allGroups) => {
        let morePagesExist = true;
        if (lastGroup && lastGroup.data.result) {
          morePagesExist = lastGroup.data.result !== null;
          console.log(morePagesExist);
        }
        if (!morePagesExist) return false;
        console.log(lastGroup?.data);
        // returns next cursor which will send to the cursor of eaxmpleApi
        return lastGroup?.data?.result?.currentPageNo + 1 || false;
      }
    }
  );

  return (
    <div>
      {isLoading && <div>"Loading..."</div>}
      {error && <div>"An error has occurred: " + error.message</div>}
      <button
        disabled={!canFetchMore}
        onClick={(e) => {
          fetchMore();
        }}
      >
        fetch more
      </button>
      {data?.map((o, index) => {
        return (
          <div key={index}>
            {JSON.stringify(o?.data?.result?.contents, 0, 1)}
          </div>
        );
      })}
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

https://codesandbox.io/s/react-query-useinfinitequery-be62c?file=/src/App.tsx

person JillAndMe    schedule 13.08.2020