Skip to content

Firestore re-arch w/ hooks+suspense #345

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.

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

Merged
merged 32 commits into from
Sep 15, 2020
Merged

Firestore re-arch w/ hooks+suspense #345

merged 32 commits into from
Sep 15, 2020

Conversation

tjlav5
Copy link
Contributor

@tjlav5 tjlav5 commented Aug 28, 2020

The scope is a little on the XL-size but it made sense to bundle a few of the action-items together.

At a high-level, this is a re-architecture of the Firestore feature to rely on hooks+suspense. The biggest benefit here is that since we have nested-routing (where a document conditionally renders a sub-collection, and a collection conditionally renders a sub-document), we can now render as many documents/collections as are in the ROUTE and then lazily populate data in each component as it comes in over the wire; this gets us "missing document" support.

Missing document fix

image

Render <Collection />
-- Conditionally render a sub <Document /> if the route accounts for it
-- The collection does not exist, show some copy: "Collection does not exist blah blah"
-- The <Document /> can still render

Additional updates

New dependencies

swr

  • hook based xhr requests
  • supports polling (10s polling for rest-api's collection-ids)

reactfire

  • lazy-loading SDKs
  • better hooks for fetching collection/document/etc data than previous hooks we were using
  • suspense support

firebase-emulators + @firebase/testing

  • rethinking of the firestore test-suite
  • all applicable tests now connect to a local-emulator and use "real" documentRefs/collectionRefs/etc (e.g. we are no longer maintaining those gnarly fakes!)

@tjlav5 tjlav5 changed the title Tl react fire Firestore re-arch w/ hooks+suspense Aug 28, 2020
@tjlav5 tjlav5 marked this pull request as ready for review August 28, 2020 21:17
@tjlav5 tjlav5 requested review from yuchenshi and davideast August 28, 2020 21:17
Copy link
Member

@yuchenshi yuchenshi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First pass on the foundational files and setup. Will get to Firestore operations on the next pass and yet another line by line pass.

Copy link
Member

@davideast davideast left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ReactFire bits look good. My only concern is about the upcoming API change (FirebaseExtended/reactfire#255).

const collectionSnapshot = useFirestoreCollection<unknown>(
  filteredCollection
);

// turns into

const { data } = useFirestoreCollection<unknown>(
  filteredCollection
);	 

You can merge now but just know that the update will come soon.

Copy link
Member

@yuchenshi yuchenshi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated tests LGTM. Great work cleaning those mocks up!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Firestore sub-collections with nonexistent parents are not showing in emulator
4 participants