i have a problem when use useInfiniteQuery

[ryuhojin]

I want to initialize and refetch data when i change text for search
how can i do this?

  const [search, setSearch] = useRecoilState(searchAtom); // when i change this parameter
  const {
    status,
    data,
    fetchNextPage,
    hasNextPage,
  } = useInfiniteQuery(
    'issuelist',
    async ({ pageParam = { query: search, page: 0 } }) => {
      return await getIssues({ query: pageParam.query, page: pageParam.page })
    },
    {
      getNextPageParam: lastPage => {
        return lastPage.nextId ? { query: search, page: lastPage.nextId } : false
      },
      refetchOnMount: false,
      refetchOnWindowFocus: false
    }
  )

[TkDodo]

search needs to be part of the queryKey:

  const [search, setSearch] = useRecoilState(searchAtom);
  const {
    status,
    data,
    fetchNextPage,
    hasNextPage,
  } = useInfiniteQuery(
    ['issuelist', search], // <--- here
    async ({ pageParam = 0 }) => {
      return await getIssues({ query: search, page: pageParam })
    },
    {
      getNextPageParam: lastPage => {
        return lastPage.nextId ? lastPage.nextId : false
      },
      refetchOnMount: false,
      refetchOnWindowFocus: false
    }
  )```

react-query will create a new cache entry and thus refetch if the key changes.

https://tkdodo.eu/blog/practical-react-query#treat-the-query-key-like-a-dependency-array

[ryuhojin]

Thanks so much, You made my day :)