useInfiniteQuery keeps initialData even though variables change

[kcubero27]

Good morning 👋🏻

I would like to know if this behaviour is intended. Every time the variables change, the initialData is kept but new pages are added.

Here's an example:

Imagine initialData has 10 items. If the user changes any of the filters shown, the filterAsQuery string changes. Therefore, a new request is done. However, the initialData is kept and shown even though it's not related. In this case, the data returns two pages: one with 10 items and another one with 0 items.

const filterAsQuery = useSharedState();

const { status, data, fetchNextPage, isFetching, isFetchingNextPage, hasNextPage } =
    useInfiniteQuery(
      ['my-query', { type: 'event', ...filterAsQuery }],
      ({ pageParam }) => {
        return requestFn({
          ...filterAsQuery,
          type: 'event',
          offset: pageParam === 0 || pageParam === undefined ? 10 : pageParam * 10,
        });
      },
      {
        getNextPageParam: (lastPage, allPages) => (!lastPage.length ? undefined : allPages.length),
        { initialData: { pages: [...initialData], pageParams: [undefined] } }
      }
    );

I would like that every time the filters change, this initialData is not shown anymore. ¿Any suggestions?

[kcubero27]

Woah, I finally saw something: #355 (reply in thread)
It feels a bit confusing but it works 🤷🏼‍♀️

const [initialData, setInitialData] = React.useState(initialAccounts)

React.useEffect(() => {
  setInitialData(undefined)
}, [])

const [timeframe, setTimeframe] = React.useState('foo');
const { data } = useQuery(['accounts', timeframe], api.fetchAccounts, { initialData })

[TkDodo]

It feels a bit confusing but it works 🤷🏼‍♀️

I think a better way would be to bind initialData to the queryKey where you'd expect initialData to do something.

I'll take the timeframe example because it's simpler: apparently, we want initialData for the key ['acounts', 'foo'] but not for any other timeframes. we can achieve this like so:

const [timeframe, setTimeframe] = React.useState('foo');
const { data } = useQuery(
  ['accounts', timeframe],
  api.fetchAccounts,
  {
    initialData: timeframe === 'foo' ? initialAccounts : undefined
  }
)

of course ew can extract 'foo' to a constant if its more than just a string, but I think this notation is way more explicit.