리액트 쿼리의 fetchQuery시 새로 만들어진 키가 stale되지 않는 이슈

[doggopawer]

문제상황
리액트에서 카테고리 인풋에 원하는 값을 넣고 검색 버튼을 누르면
리액트 쿼리 키에 "입력한 값" 이 포함된 키가 생성되고 새로운 데이터가 생성되는게 기대가 되지 만,
아래 사진과 같이 새로 생성된 [,,,,"아이폰"] 키가 statle되지 않고 inactive 한 상태입니다.

해당 코드는 아래와 같습니다.
어떤 문제떄문에 발생하는 것이고, 해결방법은 무엇인가요?

import React from 'react'
import { useFormContext } from 'react-hook-form'
import { useQueryClient } from '@tanstack/react-query'
import Image from 'next/image'
import Input from '@/components/ui/Input'
import Assets from '@/config/assets'
import { getItems } from '@/services/item/item'

const SearchInput = () => {
  const { register, getValues } = useFormContext()
  const queryClient = useQueryClient()

  const handleFetchData = () => {
    queryClient.fetchInfiniteQuery({
      queryKey: [
        'items',
        getValues('category'),
        getValues('priceRange'),
        getValues('name'),
        getValues('status'),
        5,
      ],
      initialPageParam: 0,
      queryFn: async ({ pageParam = 0 }) =>
        await getItems({
          category: getValues('category'),
          priceRange: getValues('priceRange'),
          name: getValues('name'),
          status: getValues('status'),
          size: 5,
          cursorId: pageParam,
        }),
    })
    queryClient.invalidateQueries({
      queryKey: [
        'items',
        getValues('category'),
        getValues('priceRange'),
        getValues('name'),
        getValues('status'),
        5,
      ],
    })
  }

  return (
    <div className="relative w-4/5">
      <Input
        {...register('name')}
        placeholder="찾으시는 물건을 입력해주세요."
      />
      <div
        className="absolute right-3 top-2.5 hover:cursor-pointer"
        onClick={handleFetchData}
      >
        <Image src={Assets.search} alt="검색 아이콘" />
      </div>
    </div>
  )
}

SearchInput.displayName = 'SearchInput'

export default SearchInput

[doggopawer]

해결방법

import React from 'react'
import { useFormContext } from 'react-hook-form'
import Image from 'next/image'
import Input from '@/components/ui/Input'
import Assets from '@/config/assets'
import { useItemsQuery } from '@/hooks/api/useItemsQuery'

const SearchInput = () => {
  const { register, getValues } = useFormContext()

  const { fetchNextPage } = useItemsQuery({
    category: getValues('category'),
    priceRange: getValues('priceRange'),
    cardTitle: getValues('cardTitle'),
    status: ['TRADE_AVAILABLE'],
    size: 5,
  })

  return (
    <div className="relative w-4/5">
      <Input
        {...register('cardTitle')}
        placeholder="찾으시는 물건을 입력해주세요."
      />
      <div
        className="absolute right-3 top-2.5 hover:cursor-pointer"
        onClick={() => {
          fetchNextPage()
        }}
      >
        <Image src={Assets.search} alt="검색 아이콘" />
      </div>
    </div>
  )
}

SearchInput.displayName = 'SearchInput'

export default SearchInput

해당 이슈는 useInfiniteQuery가 아닌 queryClient.fetchInfiniteQuery를 사용했기 때문에 일어난 이슈였습니다.
보통 queryClient를 사용하는 경우는 컴포넌트 내부가 아닌 외부라고 합니다.
따라서 새로 만든 키가 stale되지 않고 inactiv 했던 것입니다.

리액트 쿼리 사용시 참고 바랍니다.

[oaoong]

아아 전역이 TanstackQueryContext로 감싸져 있기 때문에 csr 로직에서는 useQueryClient인가 메서드를 통해 불러오면 됩니다.
만약 서버에서 query를 사용하는 경우에만 사용하신 것처럼 queryClient를 따로 두시면 좋을 것 같습니다!