-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
383 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| --- | ||
| title: Firebase Data Connect | ||
| --- | ||
|
|
||
| Firebase Data Connect is a relational database service for mobile and web apps that lets you build and scale using a fully-managed PostgreSQL database powered by Cloud SQL. It provides secure schema, query and mutation management using GraphQL technology that integrates well with Firebase Authentication. | ||
|
|
||
| To get started, ensure you have setup your Firebase project and have the Data Connect setup in your project. To learn more, | ||
| follow the [Firebase Data Connect documentation](https://firebase.google.com/docs/data-connect/quickstart). | ||
|
|
||
| ## Setup | ||
|
|
||
| Before using the Tanstack Query Firebase hooks for Data Connect, ensure you have configured your application using your chosen connector: | ||
|
|
||
| ```ts | ||
| import { connectorConfig } from "../../dataconnect/default-connector"; | ||
| import { initializeApp } from "firebase/app"; | ||
| import { getDataConnect } from "firebase/data-connect"; | ||
|
|
||
| // Initialize your Firebase app | ||
| initializeApp({ ... }); | ||
|
|
||
| // Get the Data Connect instance | ||
| const dataConnect = getDataConnect(connectorConfig); | ||
|
|
||
| // Optionally, connect to the Data Connect Emulator | ||
| connectDataConnectEmulator(dataConnect, "localhost", 9399); | ||
| ``` | ||
|
|
||
| ## Importing | ||
|
|
||
| The package exports are available via the `@tanstack-query-firebase/react` package under the `data-connect` namespace: | ||
|
|
||
| ```ts | ||
| import { useConnectQuery } from "@tanstack-query-firebase/react/data-connect"; | ||
| ``` | ||
|
|
||
| ## Basic Usage | ||
|
|
||
| To use the Tanstack Query Firebase hooks for Data Connect, you can use the `useConnectQuery` hook to fetch data from the database: | ||
|
|
||
| ```tsx | ||
| import { useConnectQuery } from "@tanstack-query-firebase/react"; | ||
| import { listMoviesRef } from "../../dataconnect/default-connector"; | ||
|
|
||
| function Component() { | ||
| const { data, isPending, isSuccess, isError, error } = useConnectQuery( | ||
| listMoviesRef() | ||
| ); | ||
|
|
||
| if (isPending) return <div>Loading...</div>; | ||
|
|
||
| if (isError) return <div>Error: {error.message}</div>; | ||
|
|
||
| return <div>{isSuccess && <ul>{data.movies.map((movie) => <li key={movie.id}>{movie.title}</li>)}</ul>}</div>; | ||
| } | ||
| ``` | ||
|
|
||
| The hooks will automatically infer the data type from the connector and the query and automtically create a [query key](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for the query. | ||
|
|
||
| ## Learning more | ||
|
|
||
| To learn more about the Data Connect hooks, check out the following pages: | ||
|
|
||
| - [Querying](/react/data-connect/querying) | ||
| - [Mutations](/react/data-connect/mutations) | ||
| - [Server Side Rendering](/react/data-connect/server-side-rendering) | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| --- | ||
| title: Mutations | ||
| description: Learn how to mutate data in Firebase Data Connect using the Tanstack Query Firebase hooks. | ||
| --- | ||
|
|
||
| ## Mutating Data | ||
|
|
||
| To mutate data in Firebase Data Connect, you can use the `useConnectMutation` hook. | ||
|
|
||
| ```tsx | ||
| import { useConnectMutation } from "@tanstack-query-firebase/react"; | ||
| import { createMovieRef } from "@dataconnect/default-connector"; | ||
|
|
||
| function Component() { | ||
| const createMovie = useConnectMutation( | ||
| createMovieRef | ||
| ); | ||
|
|
||
| return ( | ||
| <button | ||
| disabled={createMovie.isPending} | ||
| onClick={() => { | ||
| createMovie.mutate({ | ||
| title: 'John Wick', | ||
| genre: "Action", | ||
| imageUrl: "https://example.com/image.jpg", | ||
| }); | ||
| }} | ||
| > | ||
| {createMovie.isPending ? "Creating..." : "Create Movie"} | ||
| </button> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ## Invalidating Queries | ||
|
|
||
| The hook provides an additional [mutation option](https://tanstack.com/query/latest/docs/framework/react/reference/useMutation) called `invalidate`. This option accepts a list of query references which will be automatically invalidated when the mutation is successful. | ||
|
|
||
| ```tsx | ||
| const createMovie = useConnectMutation(createMovieRef, { | ||
| invalidate: [getMovieRef], | ||
| }); | ||
| ``` | ||
|
|
||
| ### Implicit references | ||
|
|
||
| The above example provides a `getMovieRef` instance to the invalidate array. By default this will invalidate all queries that cached via the `getMovieRef` reference, for example the following query references will be invalidated: | ||
|
|
||
| ```tsx | ||
| getMovieRef({ id: "1"}); | ||
| getMovieRef({ id: "2"}); | ||
| ``` | ||
|
|
||
| ### Explicit references | ||
|
|
||
| You can also provide explicit references to the invalidate array, for example: | ||
|
|
||
| ```tsx | ||
| const createMovie = useConnectMutation(createMovieRef, { | ||
| invalidate: [getMovieRef({ id: "1" })], | ||
| }); | ||
| ``` | ||
|
|
||
| In this case only the query reference `getMovieRef({ id: "1" })` will be invalidated. | ||
|
|
||
| ## Overriding the mutation key | ||
|
|
||
| ### Metadata | ||
|
|
||
| Along with the data, the hook will also return the `ref`, `source`, and `fetchTime` metadata from the mutation. | ||
|
|
||
| ```tsx | ||
| const createMovie = useConnectMutation(createMovieRef); | ||
|
|
||
| const data = await createMovie.mutateAsync({ | ||
| title: 'John Wick', | ||
| genre: "Action", | ||
| imageUrl: "https://example.com/image.jpg", | ||
| }); | ||
|
|
||
| console.log(data.ref); | ||
| console.log(data.source); | ||
| console.log(data.fetchTime); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| --- | ||
| title: Querying | ||
| description: Learn how to query data from Firebase Data Connect using the Tanstack Query Firebase hooks. | ||
| --- | ||
|
|
||
| ## Querying Data | ||
|
|
||
| To query data from Firebase Data Connect, you can use the `useConnectQuery` hook. This hook will automatically infer the data type from the connector and the query and automtically create a [query key](https://tanstack.com/query/latest/docs/framework/react/guides/query-keys) for the query. | ||
|
|
||
| ```tsx | ||
| import { useConnectQuery } from "@tanstack-query-firebase/react"; | ||
| import { listMoviesRef } from "@dataconnect/default-connector"; | ||
|
|
||
| function Component() { | ||
| const { data, isPending, isSuccess, isError, error } = useConnectQuery( | ||
| listMoviesRef() | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ### Query options | ||
|
|
||
| To leverage the full power of Tanstack Query, you can pass in query options to the `useConnectQuery` hook, for example to refetch the query on a interval: | ||
|
|
||
| ```tsx | ||
| const { data, isPending, isSuccess, isError, error } = useConnectQuery( | ||
| listMoviesRef(), | ||
| { | ||
| refetchInterval: 1000, | ||
| } | ||
| ); | ||
| ``` | ||
|
|
||
| The hook extends the [`useQuery`](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery) hook, so you can learn more about the available options by reading the [Tanstack Query documentation](https://tanstack.com/query/latest/docs/framework/react/reference/useQuery). | ||
|
|
||
| ### Overriding the query key | ||
|
|
||
| To override the query key, you can pass in a custom query key to the `useConnectQuery` hook: | ||
|
|
||
| ```tsx | ||
| const { data, isPending, isSuccess, isError, error } = useConnectQuery( | ||
| getMovieRef({ id: "1" }), | ||
| { | ||
| queryKey: ["movies", "1"], | ||
| } | ||
| ); | ||
| ``` | ||
|
|
||
| Note that overriding the query key could mean your query is no longer synchronized with mutation invalidations or server side rendering pre-fetching. | ||
|
|
||
| ### Initial data | ||
|
|
||
| If your application has already fetched a data from Data Connect, you can instead pass the `QueryResult` instance to the hook. This will instead set the `initialData` option on the hook: | ||
|
|
||
| ```tsx | ||
| // Elsewhere in your application | ||
| const movies = await executeQuery(listMoviesRef()); | ||
|
|
||
| // ... | ||
|
|
||
| function Component(props: { movies: QueryResult<ListMoviesData, unknown> }) { | ||
| const { data, isPending, isSuccess, isError, error } = useConnectQuery( | ||
| props.movies | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| The hook will immediately have data available, and immediately refetch the data when the component is mounted. This behavior can be contolled by providing a `staleTime` value to the hook or Query Client. | ||
|
|
||
| ### Metadata | ||
|
|
||
| Along with the data, the hook will also return the `ref`, `source`, and `fetchTime` metadata from the query. | ||
|
|
||
| ```tsx | ||
| const { data } = useConnectQuery(listMoviesRef()); | ||
|
|
||
| console.log(data?.ref); | ||
| console.log(data?.source); | ||
| console.log(data?.fetchTime); | ||
| ``` |
Oops, something went wrong.