refactor(examples): add kitchen-sink example #203

cabljac · 2025-08-18T10:47:24Z

No description provided.

changeset-bot · 2025-08-18T10:47:28Z

⚠️ No Changeset found

Latest commit: 2b79f00

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

docs-page · 2025-08-18T10:47:29Z

To view this pull requests documentation preview, visit the following URL:

docs.page/invertase/tanstack-query-firebase~203

Documentation is deployed and generated using docs.page.

gemini-code-assist

Summary of Changes

Hello @cabljac, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refactors the React examples by introducing a new "kitchen-sink" application. This comprehensive example consolidates existing authentication examples and adds a new Firestore collection query example, demonstrating various TanStack Query Firebase hooks and patterns within a single, navigable application.

Highlights

New Kitchen Sink Example: A new kitchen-sink example application has been added, serving as a comprehensive showcase for TanStack Query Firebase hooks.
Authentication Example Integration: The existing useGetIdTokenQuery example has been integrated into this new application, demonstrating Firebase Authentication token management.
Firestore Collection Query Example: A new Firestore example, CollectionQueryExample, has been introduced, showcasing useCollectionQuery for data retrieval, along with useAddDocumentMutation and useDeleteDocumentMutation for data manipulation, including filtering capabilities.
Project Renaming and Restructuring: The project structure has been refactored, renaming the previous useGetIdTokenQuery example directory and its associated files to align with the new kitchen-sink structure.
Enhanced Firebase Emulator Setup: Firebase emulator connections have been enhanced to include both Authentication and Firestore emulators for local development.
React Router Integration: react-router-dom has been integrated to provide client-side routing, allowing seamless navigation between different example sections within the application.
Build Configuration Updates: Build configurations (vite.config.ts, tsconfig.json) and package dependencies (pnpm-lock.yaml) have been updated to support the new application structure and added libraries.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request refactors the useGetIdTokenQuery example into a more comprehensive "kitchen-sink" example, which is a great addition for showcasing various features. The new structure with routing is well-organized. I've identified a critical issue with the implementation of the delete mutation that would cause a runtime error, and a high-severity type-safety issue regarding Firestore Timestamps. Additionally, I've provided some suggestions to improve code clarity and performance by adhering to TanStack Query and React best practices.

examples/react/kitchen-sink/src/components/CollectionQueryExample.tsx

examples/react/kitchen-sink/src/App.tsx

examples/react/kitchen-sink/src/components/CollectionQueryExample.tsx

Copilot

Pull Request Overview

This PR refactors the existing examples structure by removing the standalone useGetIdTokenQuery example and creating a comprehensive "kitchen-sink" example that demonstrates multiple Firebase and TanStack Query integration patterns. The kitchen-sink example includes authentication, Firestore collection queries, nested collections, and TypeScript safety patterns in a single navigable application.

Consolidates Firebase examples into a single comprehensive demonstration app
Adds routing and navigation between different Firebase integration patterns
Extends Firestore security rules to support the new example data structures

Reviewed Changes

Copilot reviewed 20 out of 26 changed files in this pull request and generated 2 comments.

File	Description
firestore.rules	Adds security rules for products, conversations, and tasks collections
examples/react/useGetIdTokenQuery/*	Removes standalone useGetIdTokenQuery example files
examples/react/kitchen-sink/*	Creates comprehensive multi-pattern example with routing

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.}

Copilot · 2025-08-18T16:06:55Z

examples/react/kitchen-sink/package.json

  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "dev:emulator": "cd ../../../ && firebase emulators:exec --project test-project 'cd examples/react/useGetIdTokenQuery && vite'",
+    "dev:emulator": "cd ../../../ && firebase emulators:exec --project test-project 'cd examples/react/firebase-examples && vite'",


The script path references 'firebase-examples' but the directory is actually 'kitchen-sink'. This will cause the emulator script to fail when trying to change to the correct directory.

Suggested change

"dev:emulator": "cd ../../../ && firebase emulators:exec --project test-project 'cd examples/react/firebase-examples && vite'",

"dev:emulator": "cd ../../../ && firebase emulators:exec --project test-project 'cd examples/react/kitchen-sink && vite'",

Copilot · 2025-08-18T16:06:56Z

examples/react/kitchen-sink/src/components/CollectionQueryExample.tsx

+    console.log(`Would toggle task ${taskId} to ${!currentCompleted}`);
+  };
+
+  // Use a mutation for delete with dynamic document reference TODO: why doesn't the library support dynamic document reference?


This TODO comment should be removed or properly formatted. It appears to be a development note that shouldn't remain in the final code.

Suggested change

// Use a mutation for delete with dynamic document reference TODO: why doesn't the library support dynamic document reference?

// Using a mutation for delete with dynamic document reference, as the library currently does not support dynamic document references directly.

refactor(examples): made kitchen-sink example

5e3778c

github-project-automation bot added this to [Cloud] Open Source P0 Aug 18, 2025

gemini-code-assist bot reviewed Aug 18, 2025

View reviewed changes

cabljac added 4 commits August 18, 2025 12:47

refactor(examples): nested collection query improvements

64d2fed

chore: format

d825178

docs(examples): add withConverter example

cade209

refactor(examples): update collection query to invalidate queries

2b79f00

cabljac force-pushed the @invertase/examples-refactor branch from c84d962 to 2b79f00 Compare August 18, 2025 13:48

cabljac marked this pull request as ready for review August 18, 2025 16:06

Copilot AI review requested due to automatic review settings August 18, 2025 16:06

Copilot AI reviewed Aug 18, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(examples): add kitchen-sink example #203

refactor(examples): add kitchen-sink example #203

Uh oh!

cabljac commented Aug 18, 2025

Uh oh!

changeset-bot bot commented Aug 18, 2025 •

edited

Loading

Uh oh!

docs-page bot commented Aug 18, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 18, 2025

Uh oh!

Copilot AI Aug 18, 2025

Uh oh!

Uh oh!

	"dev:emulator": "cd ../../../ && firebase emulators:exec --project test-project 'cd examples/react/firebase-examples && vite'",
	"dev:emulator": "cd ../../../ && firebase emulators:exec --project test-project 'cd examples/react/kitchen-sink && vite'",

	// Use a mutation for delete with dynamic document reference TODO: why doesn't the library support dynamic document reference?
	// Using a mutation for delete with dynamic document reference, as the library currently does not support dynamic document references directly.

refactor(examples): add kitchen-sink example #203

Are you sure you want to change the base?

refactor(examples): add kitchen-sink example #203

Uh oh!

Conversation

cabljac commented Aug 18, 2025

Uh oh!

changeset-bot bot commented Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

docs-page bot commented Aug 18, 2025

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

changeset-bot bot commented Aug 18, 2025 •

edited

Loading