Memoizing static values in an dynamic query

[brymon68]

I have a dynamic query (using search params) like:

  const { data } = useQuery<ToolDetails>({
    queryKey: [project, search.tool_name],
    queryFn: () =>fetch(`https://myapi.com/${project}tool=${search.tool_name}`),
    staleTime: Infinity,
  })

Lets assume that the data returned from this endpoint like:

{
   "static_data": {
          ... static data here...
   },
   "dyamic_data_from_query_params": {
          ... dyanmic data here...
   },
}

I have been trying to figure out a way to memoize / store in state the static data returned from this query (this static data will never change as the result of query parameters). The reason for doing this is I want to prevent rerendering of the components that use this data on one of my pages. I realize I could fix this all together by simply making two API queries but wanted to see if this is possible from a single API query.

So far I have tried both:

1. Memoizing the the static parts of the data I want to persist but as query parameters change and new data is loaded, the memoized data becomes undefined again.
2. I have also tried using select by setting additional state in my app but this causes infinite re-rendering.

Basically, I am asking is what I am trying to do even possible or should I just stick to two separate queries.

Thank you

[TkDodo]

The reason for doing this is I want to prevent rerendering of the components that use this data on one of my pages.

you can just use select to “pick” the static part only for the components that only need the static part; this will make them subscribe to the static part only, and they won’t re-render when the dynamic part changes.

I have also tried using select by setting additional state in my app but this causes infinite re-rendering.

no additional state is needed with select