T
TanStack•4mo ago
adverse-sapphire

Accessing context in route `head`

Is there a specific reason you can not access the route context in a route head? I am passing my i18n context from the root, and it would be nice to be able to use it there to I can call i18n._("This page title")
19 Replies
rare-sapphire
rare-sapphire•4mo ago
you can via match.context
adverse-sapphire
adverse-sapphireOP•4mo ago
Ha thank you, I missed this! The documentation around this is quite sparse Additional related question: is there a way to add something at the end of the title for every page? Similar to title templates with unhead
rare-sapphire
rare-sapphire•4mo ago
no. you could iterate over all matches and accumulate what they provide as title we certainly could add a higher level API for that
adverse-sapphire
adverse-sapphireOP•4mo ago
In my root route head function I assume? In which order are the head function called for the current route? I guess what is mostly missing is the future documentation that is refered to here: https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management#deduping 🙂
rare-sapphire
rare-sapphire•4mo ago
In which order are the head function called for the current route
right now that order is not defined unfortunately. we'll fix this so they are run serially like beforeload
adverse-sapphire
adverse-sapphireOP•4mo ago
Great Thanks a lot, and thanks a lot for Tanstack Router. I think I now have a plan to switch Mastodon to it from a very old react router version 🎉
rare-sapphire
rare-sapphire•4mo ago
oh wow
adverse-sapphire
adverse-sapphireOP•4mo ago
(and we plan to switch our data fetching layer to tanstack query in the next 12 months)
rare-sapphire
rare-sapphire•4mo ago
cool! let us know if there are any issues on the way
adverse-sapphire
adverse-sapphireOP•4mo ago
The main issue will probably be: how do you migrate a huge 8 year codebase from old react router / dirty hacks / old redux (with the container pattern) / immutable.js / very few typescript to tanstack 😄 I am starting to have a good plan for it, but I am pretty sure it will be even more complex
rare-sapphire
rare-sapphire•4mo ago
i fear LLMs wont be too much help there 😄
adverse-sapphire
adverse-sapphireOP•4mo ago
We have a no-LLM policy 🙂 (and that wont help much, the problem is more in figuring out the migration path with the 2 architectures in //)
rare-sapphire
rare-sapphire•4mo ago
curious why that? not a huge fan myself of AI at the moment, at least for what we write here (library code) it's not that helpful
adverse-sapphire
adverse-sapphireOP•4mo ago
Ethics, + code quality
adverse-sapphire
adverse-sapphireOP•4mo ago
If you have pointers on how to properly manage such a view (= Tweetdeck) with Tanstack Router, that might help me. Right now we have one column that is controlled by the path, but it is not a very good pattern and causing lot of issues
No description
adverse-sapphire
adverse-sapphireOP•4mo ago
For example if I click on the first post in my left column, it will navigate to it in the last column (which is controlled by the path). It may be much better to allow each column to navigate independently, but I have no idea how to make this work nice with the router
No description
rare-sapphire
rare-sapphire•4mo ago
query params are much more flexible i assume there is no limit to how many columns you can have?
adverse-sapphire
adverse-sapphireOP•4mo ago
Correct (well, we have a maximum for performance reasons, but some people have 12 of them…) One of my idea was to have a query param for each column, which is either empty (= display the default content) or with a reference to the specific context currently displayed (specific post, account…) But then we also need to keep the scroll position somewhere in the column, if we navigate within each column
rare-sapphire
rare-sapphire•4mo ago
maybe that's already happening with scroll restoration in router we are monitoring scroll and restoring for each scrollable element

Did you find this page helpful?