๐Ÿ‘€ Suspensive v2์—์„œ์˜ ๋ณ€๊ฒฝ์„ ํ™•์ธํ•˜์„ธ์š”. ๋”๋ณด๊ธฐ โ†’
๋ฌธ์„œ๋ณด๊ธฐ@suspensive/react-queryinfiniteQueryOptions

infiniteQueryOptions

infiniteQueryOptions๋Š” Infinite Query์—์„œ queryOptions๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค. ์ด๋Š” queryOptions๊ฐ€ ์‚ฌ์šฉ๋˜๋Š” ์ด์œ ์™€ ์œ ์‚ฌํ•œ ์žฅ์ ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

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], // queryKey๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    }) => fetch(`https://example.com/posts?page=${page}`).then(res => res.json()),
    getNextPageParam: (lastPage) => lastPage.nextPage ?? false,
  })
 
// ์ปค์Šคํ…€ ์ฟผ๋ฆฌ ํ›…์„ ๋งŒ๋“ค ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
// useInfiniteQuery, useSuspenseInfiniteQuery, SuspenseInfiniteQuery์—์„œ ์ง์ ‘ infiniteQueryOptions๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
const postsQuery = useInfiniteQuery(postsInfiniteQueryOptions(1))
const { data: posts, fetchNextPage, hasNextPage } = useSuspenseInfiniteQuery({
  ...postsInfiniteQueryOptions(1),
  refetchInterval: 2000, // ์‚ฌ์šฉ์ฒ˜์—์„œ ํ™•์žฅ์„ฑ์„ ๋ช…ํ™•ํžˆ ํ‘œํ˜„๋ฉ๋‹ˆ๋‹ค.
})
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>
)
 
// queryClient์˜ ๋ฉ”์†Œ๋“œ์—์„œ queryKey์™€ queryFn์„ ์‰ฝ๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
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))
import { Suspense } from '@suspensive/react'
import {
  infiniteQueryOptions,
  SuspenseInfiniteQuery,
} from '@suspensive/react-query'
import { useQueryClient } from '@tanstack/react-query'
import { getPosts } from './api'

const postsInfiniteQueryOptions = (page) =>
  infiniteQueryOptions({
    queryKey: ['posts', page],
    queryFn: ({ queryKey: [, page] }) => getPosts(page),
    getNextPageParam: (lastPage) => lastPage.nextPage ?? false,
  })

export const Example = () => {
  const queryClient = useQueryClient()

  return (
    <div>
      <button
        onClick={() => queryClient.resetQueries(postsInfiniteQueryOptions(1))}
      >
        Reset Query
      </button>
      <Suspense fallback={<div>Loading...</div>}>
        <SuspenseInfiniteQuery {...postsInfiniteQueryOptions(1)}>
          {({ data, fetchNextPage, hasNextPage }) => (
            <div>
              {data.pages.map((page, index) => (
                <div key={index}>
                  {page.posts.map((post) => (
                    <div key={post.id}>
                      <h1>{post.title}</h1>
                      <p>{post.body}</p>
                    </div>
                  ))}
                </div>
              ))}
              <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>
                Load More
              </button>
            </div>
          )}
        </SuspenseInfiniteQuery>
      </Suspense>
    </div>
  )
}