Using initialData with useInfiniteQuery

[AlexDring]

I've got an infinite query setup to display a list of recommendations:

function useRecommendations (query) {
  const result = useInfiniteQuery(recommendationsConfig(query))
  return result
}

const recommendationsConfig = (query) => {
  const searchQuery = query ? query : 'all'
  return {
    queryKey: ['recommendations', searchQuery], 
    queryFn: async ({ pageParam = 0 }) => {
      const response = await axios.get(`${baseUrl}?page=${pageParam}&title=${searchQuery}`)
      const pagesNo = Math.ceil(response.data.totalRecommendations/12)
      return {
        recommendations: response.data.recommendations, 
        totalResults: response.data.totalRecommendations, 
        totalPages: pagesNo, 
        nextPage: pageParam + 1 === pagesNo ? undefined : pageParam + 1
      }
    },
    getNextPageParam: (lastPage, pages) => lastPage.nextPage
  }
}

The majority of the data for each recommendation exists in the cache, so I was looking to prepopulate the recommendation using initialData:

function useRecommendation(id) {
  const queryClient = useQueryClient()
  const result = useQuery({
    queryKey: ['recommendations', id],
    queryFn: () => axios.get(`${baseUrl}/${id}`).then(response => response.data),
    initialData: () => {
      return queryClient.getQueryData(['recommendations', 'all'])?.pages[0].recommendations.find(p => p._id === id)
    }
  })
  return {...result, recommendation: result.data}
}

The problem with the above is that it doesn't account for the later page numbers:
return queryClient.getQueryData(['recommendations', 'all'])?.pages[0].recommendations.find(p => p._id === id)

I haven't really been able to get my head around how to pass the page numbers into this? Any help would be much appreciated.

[TkDodo]

I guess you just want to loop over all pages and take the first one where a recommendation was found?

return queryClient.getQueryData(['recommendations', 'all'])?.pages
  .map(page => page.recommendations.find(p => p._id === id)
  .find(r => !!r)

[AlexDring]

Many thanks for the reply. I realised how silly my question was almost as soon as I'd posted this.

I ended up doing this with a coupole of for loops but your answer seems a lot cleaner, thanks!