Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ENG-4634 feat(repo): adds initial data hydration pattern to template playground routes #885

Merged
merged 3 commits into from
Nov 5, 2024
Merged

ENG-4634 feat(repo): adds initial data hydration pattern to template playground routes #885

merged 3 commits into from
Nov 5, 2024

Conversation

jonathanprozzi
Copy link
Member

@jonathanprozzi jonathanprozzi commented Nov 5, 2024 •
edited
Loading

Affected Packages

Apps

  • data populator
  • portal
  • template

Packages

  • 1ui
  • api
  • graphql
  • protocol
  • sdk

Tools

  • tools

Overview

  • This adds example query patterns to the template playground routes that leverages fetching initialData on the server and then passing the initial data to a client-side hook that uses the same queryKey. We can use this pattern when we have a loader (we won't be able to within modals where we'd fall back to using 100% client-side hooks instead)
  • The server prefetches the data and sends with the initial response -> client hydrates with this data (no initial fetch needed unless something has changed) -> any following client-side updates then use Tanstack Query caching
  • With query params: user visits URL with query params -> server reads params and prefetches with them -> client hydrates with this filtered data. Then when things change (new search) -> URL updates w/o a full reload -> Tanstack Query handles the new request client-side and invalidates -> if user refreshes/shares the URL back to server-side flow
  • When we do this in Portal / other Apps we can likely bring the <HydrationBoundary/> into the root/providers so that we don't need to keep adding that boilerplate
  • Once we start using these patterns within an app context we can remove from the template or make them more generic so people have an example starter query to build from

Screen Captures

initial-data-partial-hydration-search-pagination

Declaration

  • I hereby declare that I have abided by the rules and regulations as outlined in the CONTRIBUTING.md

@jonathanprozzi
Updates the template provider to add hydration config and adds a play…
22a4124 
…ground-hydration example for the initialData hydration pattern
@jonathanprozzi
Adds test route for search as well as the initial data test that now …
e9b5d1a 
…also includes pagination pattern
@linear Linear
Copy link

linear bot commented Nov 5, 2024

ENG-4634 Initial data + client side hook hydration pattern

@jonathanprozzi jonathanprozzi changed the title ENG-4634 feat(template): adds initial data hydration pattern to template playground ENG-4634 feat(template): adds initial data hydration pattern to template playground routes Nov 5, 2024
@jonathanprozzi jonathanprozzi changed the title ENG-4634 feat(template): adds initial data hydration pattern to template playground routes ENG-4634 feat(repo): adds initial data hydration pattern to template playground routes Nov 5, 2024
@jonathanprozzi
Copy link
Member Author

The PR title check change I've added should work for future PRs -- I thought I added template when I added the others

@jonathanprozzi jonathanprozzi merged commit d2d2e39 into main Nov 5, 2024
3 of 5 checks passed
@jonathanprozzi jonathanprozzi deleted the eng-4634-initial-data-hydration-pattern branch November 5, 2024 20:33
@jonathanprozzi jonathanprozzi mentioned this pull request Nov 6, 2024
Merged
10 tasks
jonathanprozzi added a commit that referenced this pull request Nov 7, 2024
@jonathanprozzi
ENG-4659 feat(portal): set up hydration boundary in portal provider (#…
90c148e 
…888)

- Adds in the `HydrationBoundary` in the `providers.tsx` -- this enables
the partial hydration pattern referenced in #885
- Once this wraps Portal via the providers we can partially hydrate as
long as the `queryKey` matches server + client side. This won't have any
bearing on our client-side only hooks such as in modals but enables the
hydration pattern where loaders are available
- The `HydrationBoundary` ensures that our client-side cache for each
query (where loaders are available) starts with the same data that was
fetched and rendered on the server
@jonathanprozzi jonathanprozzi mentioned this pull request Nov 9, 2024
Merged
10 tasks
jonathanprozzi added a commit that referenced this pull request Nov 9, 2024
@jonathanprozzi
ENG-4659 feat(portal): set up hydration boundary (#898)
2a47620 
- Adds in the HydrationBoundary in the providers.tsx -- this enables the
partial hydration pattern referenced in
#885
- Once this wraps Portal via the providers we can partially hydrate as
long as the queryKey matches server + client side. This won't have any
bearing on our client-side only hooks such as in modals but enables the
hydration pattern where loaders are available
- The HydrationBoundary ensures that our client-side cache for each
query (where loaders are available) starts with the same data that was
fetched and rendered on the server
- Note: This re-opens PR #888 into `feature/graphql-migration` instead
of onto `main`
jonathanprozzi added a commit that referenced this pull request Nov 12, 2024
@jonathanprozzi
ENG-4659 feat(portal): set up hydration boundary (#898)
841e347 
- Adds in the HydrationBoundary in the providers.tsx -- this enables the
partial hydration pattern referenced in
#885
- Once this wraps Portal via the providers we can partially hydrate as
long as the queryKey matches server + client side. This won't have any
bearing on our client-side only hooks such as in modals but enables the
hydration pattern where loaders are available
- The HydrationBoundary ensures that our client-side cache for each
query (where loaders are available) starts with the same data that was
fetched and rendered on the server
- Note: This re-opens PR #888 into `feature/graphql-migration` instead
of onto `main`
Vitalsine85 pushed a commit that referenced this pull request Nov 13, 2024
@jonathanprozzi @Vitalsine85
ENG-4659 feat(portal): set up hydration boundary (#898)
6462ef1 
- Adds in the HydrationBoundary in the providers.tsx -- this enables the
partial hydration pattern referenced in
#885
- Once this wraps Portal via the providers we can partially hydrate as
long as the queryKey matches server + client side. This won't have any
bearing on our client-side only hooks such as in modals but enables the
hydration pattern where loaders are available
- The HydrationBoundary ensures that our client-side cache for each
query (where loaders are available) starts with the same data that was
fetched and rendered on the server
- Note: This re-opens PR #888 into `feature/graphql-migration` instead
of onto `main`
jonathanprozzi added a commit that referenced this pull request Nov 14, 2024
@jonathanprozzi
ENG-4659 feat(portal): set up hydration boundary (#898)
39b3c09 
- Adds in the HydrationBoundary in the providers.tsx -- this enables the
partial hydration pattern referenced in
#885
- Once this wraps Portal via the providers we can partially hydrate as
long as the queryKey matches server + client side. This won't have any
bearing on our client-side only hooks such as in modals but enables the
hydration pattern where loaders are available
- The HydrationBoundary ensures that our client-side cache for each
query (where loaders are available) starts with the same data that was
fetched and rendered on the server
- Note: This re-opens PR #888 into `feature/graphql-migration` instead
of onto `main`
0xjojikun pushed a commit that referenced this pull request Nov 15, 2024
@jonathanprozzi @0xjojikun
ENG-4659 feat(portal): set up hydration boundary (#898)
f544a7b 
- Adds in the HydrationBoundary in the providers.tsx -- this enables the
partial hydration pattern referenced in
#885
- Once this wraps Portal via the providers we can partially hydrate as
long as the queryKey matches server + client side. This won't have any
bearing on our client-side only hooks such as in modals but enables the
hydration pattern where loaders are available
- The HydrationBoundary ensures that our client-side cache for each
query (where loaders are available) starts with the same data that was
fetched and rendered on the server
- Note: This re-opens PR #888 into `feature/graphql-migration` instead
of onto `main`
0xjojikun pushed a commit that referenced this pull request Nov 22, 2024
@jonathanprozzi @0xjojikun
ENG-4659 feat(portal): set up hydration boundary (#898)
088aeb7 
- Adds in the HydrationBoundary in the providers.tsx -- this enables the
partial hydration pattern referenced in
#885
- Once this wraps Portal via the providers we can partially hydrate as
long as the queryKey matches server + client side. This won't have any
bearing on our client-side only hooks such as in modals but enables the
hydration pattern where loaders are available
- The HydrationBoundary ensures that our client-side cache for each
query (where loaders are available) starts with the same data that was
fetched and rendered on the server
- Note: This re-opens PR #888 into `feature/graphql-migration` instead
of onto `main`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Vitalsine85 Vitalsine85 Vitalsine85 approved these changes

Assignees
No one assigned
Labels
feat Feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@jonathanprozzi @Vitalsine85