infiniteQueryOptions

import { infiniteQueryOptions, useSuspenseInfiniteQuery, SuspenseInfiniteQuery } from '@suspensive/react-query'
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
 
const postsInfiniteQueryOptions = (page) =>
  infiniteQueryOptions({
    queryKey: ['posts', page] as const,
    queryFn: ({
      queryKey: [, page], // You can use queryKey.
    }) => fetch(`https://example.com/posts?page=${page}`).then(res => res.json()),
    getNextPageParam: (lastPage) => lastPage.nextPage ?? false,
  })
 
// No need to create a custom query hook.
// You can directly utilize infiniteQueryOptions in useInfiniteQuery, useSuspenseInfiniteQuery, and SuspenseInfiniteQuery.
const postsQuery = useInfiniteQuery(postsInfiniteQueryOptions(1))
const { data: posts, fetchNextPage, hasNextPage } = useSuspenseInfiniteQuery({
  ...postsInfiniteQueryOptions(1),
  refetchInterval: 2000, // Extensibility is clearly expressed in usage.
})
const Example = () => (
  <SuspenseInfiniteQuery {...postsInfiniteQueryOptions(1)}>
    {({ data, fetchNextPage, hasNextPage }) => (
      <div>
        {data.pages.map((page, index) => (
          <div key={index}>
            {page.posts.map(post => (
              <div key={post.id}>{post.title}</div>
            ))}
          </div>
        ))}
        <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>
          Load More
        </button>
      </div>
    )}
  </SuspenseInfiniteQuery>
)
 
// You can easily use queryKey and queryFn in queryClient's methods.
const queryClient = useQueryClient()
queryClient.refetchQueries(postsInfiniteQueryOptions(1))
queryClient.prefetchQuery(postsInfiniteQueryOptions(1))
queryClient.invalidateQueries(postsInfiniteQueryOptions(1))
queryClient.fetchQuery(postsInfiniteQueryOptions(1))
queryClient.resetQueries(postsInfiniteQueryOptions(1))
queryClient.cancelQueries(postsInfiniteQueryOptions(1))