rare-sapphire

Passing data between routes

I am using Tanstack Router and Tanstack Query. Let's say we have a route that does a search. We have a form that accepts "code" as a search input. When the user click search, that value of the code is put into the url as search parameter and this useQuery is enabled.

const {data} = useQuery({
    queryKey: [{entity: "stocks", scope: "search", code: "<value from code input>"}],
    ...
})

const {data} = useQuery({
    queryKey: [{entity: "stocks", scope: "search", code: "<value from code input>"}],
    ...
})

We take the data and render the list as a table. Each row has an edit button, that will navigate to another route defined as /$id. I also want to pass the initial data so that I do not have to fetch the detail with that id and so that I can populate the edit form. What should be an ideal way to do it cleanly?

6 Replies

adverse-sapphire•2mo ago

Idk know what you are doing but if you get let's say "users" in screen 1 and you want user with id 15 in "screen 2" you just need to lookup the cache using the query client. You need to "seed" the cache on your screen 1. For me, this is a bad experience, I prefer to fetch.

rare-sapphireOP•2mo ago

To lookup the query cache, we need to supply the exact query key. The problem is screen 2 does not have access to parts of the query key. In my application the query key is comprised of filters and I do not want to pass the filters to screen 2.

adverse-sapphire•2mo ago

Then query the whole entity. No point to skip that. It's not a big deal imo

fascinating-indigo•2mo ago

You could try passing relevant data through state prop in navigation API this would look something like

const navigate = useNavigate();
navigate({ 
  to: '/profile',
  state: { user: userData } 
});
//or
<Link to="/profile" state={{ user: userData }}>
  View Profile
</Link>

const navigate = useNavigate();
navigate({ 
  to: '/profile',
  state: { user: userData } 
});
//or
<Link to="/profile" state={{ user: userData }}>
  View Profile
</Link>

eastern-cyan•2mo ago

Normally at my company, when we have this exact situation, we have two endpoints, the list and the id endpoint. List returns a paginated array of the same data that id returns, so that you can use this to pre-seed the query cache for the id endpoint and works quite well. If your requirements do not allow this, then I can also think of a couple options. 1. As Jee Zee said, you can pass state through the navigate (this is not type safe) 2. Use search params or a global store to store the cached data somewhere that is accessible on both pages (typesafe at least but duplicating data from the cache) 3. Have both routes accept the same search params that you are using for your queryKey as filters, and then calling the query on the new page will have the same cached data available which you can then select from and guarantees that the data is available.

fascinating-indigo•2mo ago

I second approach with two endpoints that @ViewableGravy mentioned. But if that is not option other approaches are also ok. 1. this approach is not type safe oob but with not that much work can be made safe. 2. TS query cache is accessible from anywhere in app, and you if you have query key and "entry id" its possible to find data using queryCache api -> https://tanstack.com/query/latest/docs/reference/QueryCache 3. same as above, TQ cache is available everywhere, you just need to figure how data necessary data is passed to route.

QueryCache | TanStack Query Docs

The QueryCache is the storage mechanism for TanStack Query. It stores all the data, meta information and state of queries it contains. Normally, you will not interact with the QueryCache directly and...

Gaming

Programming

Passing data between routes

Did you find this page helpful?