QueryClientConsumer

import { useSuspenseQuery } from '@tanstack/react-query'
import { QueryClientConsumer } from '@suspensive/react-query'
 
const PostsPage = () => {
  const { data: posts } = useSuspenseQuery({
    queryKey: ['posts'],
    queryFn: () => getPosts(),
  })
 
  return (
    <>
      <QueryClientConsumer>
        {(queryClient) => (
          <button
            onClick={() =>
              queryClient.invalidateQueries({
                queryKey: ['posts'],
              })
            }
          >
            Posts refresh
          </button>
        )}
      </QueryClientConsumer>
      {posts.map((post) => (
        <Post key={post.id} {...post} />
      ))}
    </>
  )
}

import { QueryClient } from '@tanstack/react-query'
import { QueryClientConsumer } from '@suspensive/react-query'
 
const queryClient = new QueryClient()
 
const Example = () => {
  return (
      {/* 5️⃣ @tanstack/react-query v5을 사용하신다면 props.queryClient를 사용할 수 있습니다. */}
      <QueryClientConsumer queryClient={queryClient}>
        {(queryClient) => (<>{/* props.queryClient로 전달된 QueryClinet를 사용합니다. */}</>)}
      </QueryClientConsumer>
  )
}

import { createContext } from 'react'
import { QueryClient } from '@tanstack/react-query'
import { QueryClientConsumer } from '@suspensive/react-query'
 
const queryClient = new QueryClient()
const queryClientContext = createContext<QueryClient>(queryClient)
 
const Example = () => {
  return (
      {/* 4️⃣ @tanstack/react-query v4을 사용하신다면 props.context 사용할 수 있습니다.*/}
      <QueryClientConsumer context={queryClientContext}>
        {(queryClient) => (<>{/* props.queryClient로 전달된 QueryClinet를 사용합니다. */}</>)}
      </QueryClientConsumer>
  )
}

import React from 'react'
import { QueryClientConsumer } from '@suspensive/react-query'
 
class PostsRefreshButton extends React.Component {
  render() {
    return (
      {/* ✅ 레거시 클래스 컴포넌트에서 queryClient를 접근하여 쿼리 무효화(invalidateQueries)를 할 수 있습니다. */}
      <QueryClientConsumer>
        {(queryClient) => (
          <button
            onClick={() =>
              queryClient.invalidateQueries({
                queryKey: ['posts'],
              })
            }
          >
            Posts refresh
          </button>
        )}
      </QueryClientConsumer>
    )
  }
}
 
export default PostsRefreshButton