Omit running select when placeholderData is returned and placeholderData: keepPreviousData is set

[nik-webdevelop]

I want to omit running select when placeholderData returns a result of the previous fetch.

According to the docs:

The select function will only run if data changed, or if the reference to the select function itself changes

From the point of a query, which key (queryKey: ['tasks', filters]) has been changed in the result of a filters change, this makes sense. As it is a new fetch and a new cache entry.

But from the point of a reusable query hook consumer, it's not very intuitive (for me):

const transformData = (data) => ({
  ...data, // changes object instance
  number: data.number * 2,
});
  
const useGetTasks = (filters) => useQuery({
  ...
  placeholderData: keepPreviousData, // or any other function that doesn't mutate previous data
  select: transformData, // no new references to function
})

cosnt { data, isPlaceholderData } = useGetTasks(filters);

useMemo(() => {
  // After filters has changed and isPlaceholderData is true, this function will rerun,
  // but, while in load state, the data returned from hook hasn't changed yet, it just returns new instance created by select
  // I would like to rerun useMemo only when there is new data after a successful fetch
}, [data]);

Or maybe there is a better approach for this use case?

[TkDodo]

I want to omit running select when placeholderData returns a result of the previous fetch.

sorry that doesn’t make much sense to me. Consider the following example:

const query = useQuery({
  queryKey: ['post', id],
  queryFn: fetchPostById,
  select: (post) => post.title,
  placeholderData: keepPreviousData,
})

return <div>{query.data?.toUppercase()}</div>

This component fetches a post, selects the title and renders it as upper cased. When you transition between ids, it will keep the title of the previous query and transition to the new title once new data comes in.

If we don’t run select when keepPreviousData is set, you would get the full post object, and .toUppercase() would fail. Your query data wouldn’t be of type string, it would be of type string | Post.

I would like to rerun useMemo only when there is new data after a successful fetch

I think that should just work in the example code you’ve shown. Please show a stackblitz or codesandbox reproduction that shows that this useMemo runs more often than you’d expect.

it just returns new instance created by select

I think you are right that we probably shouldn’t re-run select here, but it’s not that easy because we can’t know what placeholderData returns. Yes, we could compare it with the last selectResult here and then just assign this directly:

query/packages/query-core/src/queryObserver.ts

Lines 527 to 529 in 1b54538

	if (options.select && placeholderData !== undefined) {
	try {
	placeholderData = options.select(placeholderData)

I think this would do it:

placeholderData =
  this.#selectResult !== 'undefined' &&
  placeholderData === this.#lastQueryWithDefinedData?.state.data
    ? this.#selectResult
    : options.select(placeholderData)

but only if you return exactly previousData from the placeholderData function. Not sure if that’s worth it, because we also use structural sharing on the result of select, so even if select runs again, structural sharing would make sure that you get the same reference back if nothing changed and your useMemo shouldn’t re-run.

Also, side question: You can do what you do inside useMemo in select directly and avoid that step...

[nik-webdevelop]

@TkDodo Thanks for the quick reply!

Here is StackBlitz reproduction

There is a select function with commented return statements that are triggering useEffect

[TkDodo]

yes, it says right here:

• fix(query-core): make sure we don't invoke select too often when using placeholderData #9007 (comment)

npm i https://pkg.pr.new/@tanstack/react-query@9007

[nik-webdevelop]

It still behaves the same, but in my use case, I do transform data in the select. So that's explaining the whole deal.

Sorry, I totally missed this part from the docs:

Note: This optimization only works if the queryFn returns JSON compatible data. You can turn it off by setting structuralSharing: false globally or on a per-query basis, or you can implement your own structural sharing by passing a function to it.

[nik-webdevelop]

StackBlitz with previw build

Hm, maybe I'm missing something, but queryFn returns JSON compatible data. It's the select that transforms it to non-compatible data by parsing date. But shouldn't it compare queryFn results and not select results?

[TkDodo]

yeah sorry it seems like we have to run select at least once for the new query, even if you have placeholderData and a stable select.

[nik-webdevelop]

Got it, thank you