query: How to use useInfiniteQuery with custom props

Hello, I think this could be better documented. I also had trouble using useInfiniteQuery with an additional parameter until I found this issue.

The issue here is that you are not mapping up your query key to your query function’s arguments properly. Each item in the query key is passed to the query function, including infinite-posts in your case. The next issue is that you’re not accounting that the result from getFetchMore is passed as an optional parameter to your query function, which is why on the first request, you must provide a default value.

async function queryPosts (key, sort, page = 1) {
  // key === 'infinite-posts'
  // sort will always be there from the query-key
  // page information won't be there on the first request
  // which is why is has a defualt value of 1, but it will be
  // there on subsequent requests
  const res = await axios.get(`/posts?sort=${sort}&page=${page}`)

  return {
    items: res.data,
    page,
  }
}

const queryInfo = useInfiniteQuery(['infinite-posts', sort], queryPosts, {
  getFetchMore: ({ items, page }) => {
    if (items.length) {
      return page + 1 // This will be sent as the LAST parameter to your query function
    }

    return false
  },
})

😃 You’re welcome! Thanks for using it! You should consider writing a blog post on that thought. It sounds like a great prompt: “React Query: The missing abstraction for hooks and data fetching”

Following worked for me

export const getLookupDefsSorted = async ({queryKey, pageParam = 0}) => {
  const sortBy = queryKey[1];  // queryKey[0] is the original query key 'infiniteLookupDefs'
  const sortDirection = queryKey[2]; 
  const url = `${URL_LOOKUP_DEF}/?pageNumber=${pageParam}&pageSize=${LOOKUP_DEF_PAGE_SIZE}&sortBy=${encodeURIComponent(sortBy)}&sortDirection=${encodeURIComponent(sortDirection)}`;
  const res = await axios.get(url)
  return res.data
}

export const useInfiniteQueryLookupDefsSorted = (sortBy, sortDirection) => {
  return useInfiniteQuery([QUERY_NAME_LOOKUP_DEFS_INFINITE, sortBy, sortDirection], getLookupDefsSorted, {
      getNextPageParam: (lastPage, allPages) => lastPage.last ? null : lastPage.number + 1,
      staleTime: 5 * 60 * 1000, // 5 minutes
  });
}

@rsarai maybe this isn’t a good way to to send the props to the service since it forces we to write the API request with some boilerplate args or the args as object, probably breaking the re-usability of that service outside of react-query on some cases. Another point is that as I see on the docs neither the useInfiniteQuery or useQuery accepts getFetchMore method on react-query v3.

But as I found here, on the migration guide have a really useful doc about useInfiniteQuery args.

Basically we just need to call the service through a function like this:

// Old
 useInfiniteQuery(['posts'], (_key, pageParam = 0) => fetchPosts(pageParam))
 
 // New
 useInfiniteQuery(['posts'], ({ pageParam = 0 }) => fetchPosts(pageParam))

with this we can treat the pageParams isolated from the service and, sending an object to fetchNextPage we get the new props of the function, it becomes really useful if we create a custom hook as below. But is good to say, I have to work on a more readable way to write this, but at least IMO this is better than change the way we write our services here.

 const useMyRequest = (param1, param2) => {
  useInfiniteQuery(
    'posts', 
    ({ pageParam = 0 }) => {
      const obj = {
        param1: pageParam.param1 || param1,
        param2: pageParam.param2 || param2
      }
      
      return fetchPosts(obj.param1, obj.param2)
    }
  )
}

BTW I’m pretty new to react-query and I’m probably missing something, @tannerlinsley what you think about that approach?

For anyone facing a facet of this issue, the following worked for me:

async function queryPosts (queryKey, pageParam = 1) {
  const sort = queryKey[1];  // queryKey[0] is the original query key 'infinite-posts'
  const res = await axios.get(`/posts?sort=${sort}&page=${pageParam}`)

  return {
    items: res.data,
    page,
  }
}

const queryInfo = useInfiniteQuery(['infinite-posts', sort], queryPosts, {
  getFetchMore: ({ items, page }) => { // edit: this was replaced by getNextPageParam
    if (items.length) {
      return page + 1 // This will be sent as the LAST parameter to your query function
    }

    return false
  },
})

hey @Alecell, greetings, noticed we share the same timezone. You are 100% correct about the getFetchMore, on my project I’m actually using getNextPageParam (🙈).

I was trying to go for different types of query keys. I’m also new to react-query so I’m happy to hear other comments.

Unfortunately I have the same issue, is not clear from the docs how to use it 😦