chore: Add all screen queries to routes.tsx for prefetching #11709
Conversation
olerichter00
changed the title
- Added ArtistShowsScreenQuery to ArtistShows.tsx and updated routes.tsx - Added ViewingRoomArtworkScreenQuery to ViewingRoomArtwork.tsx and updated routes.tsx - Exported screen queries for use in route definitions to enable data prefetching
olerichter00
changed the title
olerichter00
changed the title
| @@ -33,7 +33,7 @@ export const ArtQuizResults = ({ isCalculatingResult }: { isCalculatingResult?: | |||
| ) | |||
| } | |||
|
|
|||
| const artQuizResultsQuery = graphql` | |||
| export const ArtQuizResultsScreenQuery = graphql` | |||
There was a problem hiding this comment.
I chose this naming pattern because it's the one that is currently used for most queries. However, I'm open to changing it.
| @@ -442,6 +492,7 @@ export const artsyDotNetRoutes = defineRoutes([ | |||
| path: "/artist/:artistID/shows", | |||
| name: "ArtistShows", | |||
| Component: ArtistShowsQueryRenderer, | |||
| queries: [ArtistShowsScreenQuery], | |||
There was a problem hiding this comment.
In some cases like this query, we need queryVariables as well so this would work properly. So we might need to export it as well.
There was a problem hiding this comment.
You are right. In this case, the variable :artistID will be taken from the path, but for other routes, we will need to either add the variables here or set the defaults within the GraphQL query.
I'm not sure if I can automate this work. So far, I have manually tested whether the prefetching worked and added the variables in case it hasn't... 🤔
There was a problem hiding this comment.
Thanks for explaining.
this past week with infinite-discovery I tried prefetchQuery and it failed because it's missing the query variables and only worked when I added them.
Let's move with this then and keep an eye on Sentry
There was a problem hiding this comment.
We should go the the route approach as that's our centralized hub which contains all screen dependencies and avoid adding details to our queries that can be handled on the JS side. Over in force this is how we do it:
- prepareVariables:
- And then in the RouterLink's
usePrefetchRoutehook, we look it up:
So as things grow, and if we ever need to add anything more, the routes file / route item is the only place you need to go, and then just call findRoutesByPath and pass it the route path in question. Has worked well over there.
There was a problem hiding this comment.
I received some more warnings related to this that I didn't expect.
olerichter00
deleted the
olerichter00/add-missing-screen-queries-to-routes-for-prefetching
branch
Description
This PR adds missing screen queries to routes.tsx. The queries will be used for prefetching.
🤖 Generated with Claude Code
PR Checklist
To the reviewers 👀
Changelog updates
Changelog updates
Cross-platform user-facing changes
iOS user-facing changes
Android user-facing changes
Dev changes
routes.tsxfor prefetching - oleNeed help with something? Have a look at our docs, or get in touch with us.