What's the best approach to transform data and then subscribe to it?

[magbicaleman]

Using v3 and given the code below, the expensiveTransform will run on each use of useCustomHook each separate subscription. Is there a pattern to transform data, and subscribe to it separately?

Seems like perhaps transforming in the fetchCoolData.

const useCustomHook = () => {
  const { data } = useQuery(
    ['cool-data'],
    () => fetchCoolData(),
    {
      notifyOnChangeProps: 'tracked',
      select: expensiveTransform, 
    },
  )
  }

// A.js
useCustomHook()

/// B.JS
useCustomHook()

/// C.JS
useCustomHook()

// If this hook above is used at different times but on the same route, they will all run the expensive select.

If I do transform within the fetchCoolData function, this means it will run that expensiveTransform on every fetch regardless if the data changed or not, is that correct?

const fetchCoolData = async () => {
 const res = await fetch(`https://cool...etc`)
 return res.json()
   .then(expensiveTransform)
   .catch(logError)
}

[louis-young]

Hi 👋

Yes, whatever operation(s) you perform in the query function will run every time the data is fetched (i.e the query function runs). You might want to consider memoising the select function or transforming the data at render (with memoisation). Query data is referentially stable if nothing actually changes which is nice.

Please see: https://tkdodo.eu/blog/react-query-data-transformations 🙂

[magbicaleman]

Hey @louis-young, I really appreciate your response thank you.

Memoizing the select doesn't work since the select get's ran on every instance of my custom hook (unless I'm doing something wrong, even if I add notifiyOnPropsChange: ['data']), so if I used it 4 times, the function runs 4 times.

I'm looking to created computed values, only when the data of that endpoint changes, and the subscribers to my data just use the computed data, it almost seems like a I need a specific transform options separate from the select options.

Otherwise, I'm guessing then I could store that into a store, and just use selectors for the data. Like redux or jotai, which I'm trying to avoid.

I forgot to mention I'm still on version 3 for TanStack the ol "React Query"

[louis-young]

No problem 🙂

Why doesn't transforming the data in the query function work for your use case?

[magbicaleman]

It would work, just trying to take advantage of how query works, and seeing if there was an approach that worked within select options.

I think I did end up getting what I'm looking for based on this comment:

• Advanced data manipulation of a synchronized server state #4960 (reply in thread)

Changing my code

// ... other imports
import { createSelector } from 'reselect'

const computedData= createSelector(
  data => data,
  expensiveTransform,
)

const useCustomHook = () => {
  const { data } = useQuery(
    ['cool-data'],
    () => fetchCoolData(),
    {
      notifyOnChangeProps: 'tracked',
      select:computedData, 
    },
  )
}

// A.js
useCustomHook()

/// B.JS
useCustomHook()

/// C.JS
useCustomHook()

// If this hook above is used at different times but on the same route
// the expensive computation runs only once

[louis-young]

As far as I know select will run per query hook instance. I can't see any real downsides to using the query function for this though.

Perhaps you could try it and see if you like it 🙂

[TkDodo]

so, in summary:

• run it in the queryFn - it will be executed on every fetch, even if data didn't change, because it happens before structural sharing
• run in as select - it will run once for every subscriber

The solution would be to introduce another caching that memoizes the transformation outside of react by its input so that you use it for select, but run it only once. reselect works well for that, and your shown code is exactly how I would do it / have done it in the past:

const computedData= createSelector(
  data => data,
  expensiveTransform,
)

👍

[magbicaleman]

Thanks @TkDodo, I appreciate the response.

[UnderTheMoonspell]

I came across this question because I have the same problem as the OP.

Thing is, in my scenario, the accepted solution doesnt work because I need data from another useQuery hook for the selector, so the selector needs to be inside the React Component. Its a shame that the select doesnt cache the result, as this makes it almost mandatory to use redux. In our app its not a big deal as we already have redux, but we were trying to eliminate more client state :)

[TkDodo]

Its a shame that the select doesnt cache the result

select does cache the result, so I'm not sure I understand the problem. This is also a pretty old discussion - can you maybe show a minimal sandbox of what doesn't work for you?

[pastinepolenta]

Joining the conversation here as I have a pretty similar need but trying to mix redux data with RQ data in a unique efficient selector. I can move it to a different discussion if you prefer. I read many issues and discussions related to this topic (also a blog post which mentions the same need) but still could not find a clean way to achieve it.

The problem
I would like to efficiently select RQ data based on Redux data (global client state) so that if and only if either of the 2 changes, the data is recomputed. I might get away with a component and useMemo but that approach in my mind limits the reusability compared to what I used to do with pure Redux and reselect in a clean and reusable way

The code
To better illustrate the problem I created a codesandbox with comments

Thanks!

[TkDodo]

I'd combine it with select from useQuery:

https://codesandbox.io/p/github/codesandbox/codesandbox-template-vite-react/csb-7x5nmy/draft/festive-butterfly?file=/src/App.tsx:22,1

[pastinepolenta]

Correct me if I am wrong or if it's an implementation problem but I see 2 issues with that approach:

• the selector is not really memoized, as in pure redux, in the sense that when the selectedKeyword changes, useTodosQuery re-runs, potentially leading to a data re-fetch. Data re-fetch is not bad per se, but it's not what I would expect from a selector when only the filter changes. Ideally only the selector output should recompute, not the data fetching. Maybe there is a better way to write this using select and avoiding the problem

• if in the selector I want a more complex mutation of the data, I end up with a query useTodosQuery that because of the select can change the shape of the returned data. This is quite annoying to type is typescript and counter intuitive imho. I would like keep the return type of useTodos consistent (array of todos) and feed those data into a separate selector that is typed with the correct return value (e.g. a todo count (number) or a single todo). And this still using the other redux data as input. Basically I wonder if on-top of the useQuery select there is a form of query composability to have clean return types

[TkDodo]

in the sense that when the selectedKeyword changes, useTodosQuery re-runs, potentially leading to a data re-fetch.

it won't lead to a refetch. selectedKeyword is not part of the queryKey. As far as react-query is concerned, there is just a random re-render happening, so it will read data from the cache. The only time when a fetch is happening here is if you have no todos fetched yet, in which case there has to be a fetch.

you can further memoize select by wrapping the function itself into useCallback:

  const { data, isLoading } = useTodosQuery(
      useCallback((data) =>
        data.filter((todo) => todo.title.includes(selectedKeyword)),
      [selectedKeyword])
  );

now, the select function will only run if data changes or if selectedKeyword changes. You can also combine this with reselect if you want.

Basically I wonder if on-top of the useQuery select there is a form of query composability to have clean return types

I don't understand the types issue, sorry. Yes, select can change the output type. That's what select is for. useSelector can also change the output type from State to whatever it returns. That's what selectors are for