From 18f9039cbb825f6d7d33fbd95a5e9321a8f28a5a Mon Sep 17 00:00:00 2001 From: HassanBahati Date: Wed, 27 Nov 2024 14:50:02 +0300 Subject: [PATCH 01/11] chore: ignore firebase cache --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 0b50e408..2f755392 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,6 @@ dist functions/lib/**/*.js functions/lib/**/*.js.map + +# Firebase cache +.firebase/ \ No newline at end of file From 3a423d06c556e44b896a601658f9000388310c14 Mon Sep 17 00:00:00 2001 From: HassanBahati Date: Wed, 27 Nov 2024 14:50:49 +0300 Subject: [PATCH 02/11] docs: add dataconnect tab group --- docs.json | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/docs.json b/docs.json index 9b5af91e..28614d91 100644 --- a/docs.json +++ b/docs.json @@ -48,6 +48,26 @@ } ] }, + { + "tab": "react", + "group": "Data Connect", + "pages": [ + { + "href": "/react/hooks/auth/useSignInAnonymouslyMutation", + "title": "useConnectQuery" + } + ] + }, + { + "tab": "react", + "group": "Data Connect", + "pages": [ + { + "href": "/react/hooks/auth/useSignInAnonymouslyMutation", + "title": "useConnectMutation" + } + ] + }, { "tab": "react", "group": "Firestore", From 24f47310df203c4f2478ff7658753e21449c8b68 Mon Sep 17 00:00:00 2001 From: HassanBahati Date: Wed, 27 Nov 2024 14:53:49 +0300 Subject: [PATCH 03/11] fix: group dataconnect hooks in same category --- docs.json | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/docs.json b/docs.json index 28614d91..bd958f18 100644 --- a/docs.json +++ b/docs.json @@ -55,13 +55,7 @@ { "href": "/react/hooks/auth/useSignInAnonymouslyMutation", "title": "useConnectQuery" - } - ] - }, - { - "tab": "react", - "group": "Data Connect", - "pages": [ + }, { "href": "/react/hooks/auth/useSignInAnonymouslyMutation", "title": "useConnectMutation" From 3af36bad5b1d107cb6593327908e0809da99c1a1 Mon Sep 17 00:00:00 2001 From: HassanBahati Date: Wed, 27 Nov 2024 15:18:20 +0300 Subject: [PATCH 04/11] docs(useConnectQuery): add useConnectQuery docs --- docs.json | 2 +- .../hooks/data-connect/useConnectQuery.mdx | 42 +++++++++++++++++++ 2 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 docs/react/hooks/data-connect/useConnectQuery.mdx diff --git a/docs.json b/docs.json index bd958f18..7f675adb 100644 --- a/docs.json +++ b/docs.json @@ -53,7 +53,7 @@ "group": "Data Connect", "pages": [ { - "href": "/react/hooks/auth/useSignInAnonymouslyMutation", + "href": "/react/hooks/data-connect/useConnectQuery", "title": "useConnectQuery" }, { diff --git a/docs/react/hooks/data-connect/useConnectQuery.mdx b/docs/react/hooks/data-connect/useConnectQuery.mdx new file mode 100644 index 00000000..a2438779 --- /dev/null +++ b/docs/react/hooks/data-connect/useConnectQuery.mdx @@ -0,0 +1,42 @@ +--- +title: useConnectQuery +--- + +`useConnectQuery` is a custom hook designed to simplify data fetching and state management with Firebase Data Connect. +This hook integrates with[Firebase Data Connect](https://firebase.google.com/docs/data-connect), which leverages GraphQL to interact with a PostgreSQL database (via Cloud SQL) for secure, scalable data operations. +The hook simplifies the process of querying data from Firebase Data Connect and provides an easy-to-use interface to manage loading, success, and error states in your React application. + +## Features + +- Provides type-safe handling of queries based on the Firebase Data Connect schema. +- Simplifies data fetching using Firebase Data Connect. +- Automatically manages loading, success, and error states. +- Supports refetching data with integrated caching. + +## Usage + +```jsx +import { useConnectQuery } from "./useConnectQuery"; +import { listMoviesQuery } from "@/your-package-name/your-connector"; + +function Component() { + const { data, isPending, isSuccess, isError, error } = useConnectQuery( + listMoviesQuery() + ); + + if (isPending) return
Loading...
; + if (isError) return
Error: {error.message}
; + + return ( +
+ {isSuccess && ( +
    + {data.movies.map((movie) => ( +
  • {movie.title}
    • + ))} +
+ )} +
+ ); +} +``` From 34305025b6155952e978c0d490efc9a52981f004 Mon Sep 17 00:00:00 2001 From: HassanBahati Date: Wed, 27 Nov 2024 15:20:57 +0300 Subject: [PATCH 05/11] docs: fix route path --- docs.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs.json b/docs.json index 7f675adb..955232b9 100644 --- a/docs.json +++ b/docs.json @@ -57,7 +57,7 @@ "title": "useConnectQuery" }, { - "href": "/react/hooks/auth/useSignInAnonymouslyMutation", + "href": "/react/hooks/data-connect/useConnectQuery", "title": "useConnectMutation" } ] From 4fbfe14431d45a9e1bdddfbe89e8d32e53601d3e Mon Sep 17 00:00:00 2001 From: HassanBahati Date: Wed, 27 Nov 2024 15:22:38 +0300 Subject: [PATCH 06/11] docs: fix typo --- docs/react/hooks/data-connect/useConnectQuery.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/hooks/data-connect/useConnectQuery.mdx b/docs/react/hooks/data-connect/useConnectQuery.mdx index a2438779..9ad35567 100644 --- a/docs/react/hooks/data-connect/useConnectQuery.mdx +++ b/docs/react/hooks/data-connect/useConnectQuery.mdx @@ -2,8 +2,8 @@ title: useConnectQuery --- -`useConnectQuery` is a custom hook designed to simplify data fetching and state management with Firebase Data Connect. -This hook integrates with[Firebase Data Connect](https://firebase.google.com/docs/data-connect), which leverages GraphQL to interact with a PostgreSQL database (via Cloud SQL) for secure, scalable data operations. +`useConnectQuery` is a hook designed to simplify data fetching and state management with Firebase Data Connect. +This hook integrates with [Firebase Data Connect](https://firebase.google.com/docs/data-connect), which leverages GraphQL to interact with a PostgreSQL database (via Cloud SQL) for secure, scalable data operations. The hook simplifies the process of querying data from Firebase Data Connect and provides an easy-to-use interface to manage loading, success, and error states in your React application. ## Features From b6c00e83ceae1a7f112425d920d759abe3603c89 Mon Sep 17 00:00:00 2001 From: HassanBahati Date: Wed, 27 Nov 2024 15:29:52 +0300 Subject: [PATCH 07/11] docs(useConnectMutation): add useConnectMutation docs --- docs.json | 2 +- .../hooks/data-connect/useConnectMutation.mdx | 49 +++++++++++++++++++ 2 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 docs/react/hooks/data-connect/useConnectMutation.mdx diff --git a/docs.json b/docs.json index 955232b9..b2d092f7 100644 --- a/docs.json +++ b/docs.json @@ -57,7 +57,7 @@ "title": "useConnectQuery" }, { - "href": "/react/hooks/data-connect/useConnectQuery", + "href": "/react/hooks/data-connect/useConnectMutation", "title": "useConnectMutation" } ] diff --git a/docs/react/hooks/data-connect/useConnectMutation.mdx b/docs/react/hooks/data-connect/useConnectMutation.mdx new file mode 100644 index 00000000..969ca656 --- /dev/null +++ b/docs/react/hooks/data-connect/useConnectMutation.mdx @@ -0,0 +1,49 @@ +--- +title: useConnectMutation +--- + +`useConnectMutation` is a hook designed to simplify handling mutations (creating, updating, deleting) with Firebase Data Connect. +This hook integrates with [Firebase Data Connect](https://firebase.google.com/docs/data-connect), which uses GraphQL to interact with a PostgreSQL database (via Cloud SQL) for secure, scalable data operations. +The hook manages the mutation process and provides an easy-to-use interface to manage loading, success, and error states in your React application. + +## Features + +- Simplifies mutation handling for creatt, update, and delete operations using Firebase Data Connect. +- Provides type-safe handling of mutations based on your Firebase Data Connect schema. +- Automatically manages loading, success, and error states for mutations. +- Supports optimistic updates and caching to improve user experience and performance. + +## Usage + +```jsx +import { useConnectQuery } from "./useConnectQuery"; +import { listMoviesQuery } from "@/your-package-name/your-connector"; + +function Component() { + const { mutate, isPending, isSuccess, isError, error } = + useConnectMutation(createMovieMutation); + + const handleSubmit = async (movieData) => { + try { + await mutate(movieData); + } catch (err) { + console.error("Failed to add movie:", err); + } + }; + + if (isPending) return
Adding movie...
; + if (isError) return
Error: {error.message}
; + + return ( +
+ {isSuccess &&
Movie added successfully!
} +
handleSubmit(e.target)}> + {/* Form fields for movie data */} + +
+
+ ); +} +``` From 800322e9692f1d8b403fb50023d2af4206649b88 Mon Sep 17 00:00:00 2001 From: HassanBahati Date: Mon, 2 Dec 2024 15:45:49 +0300 Subject: [PATCH 08/11] docs(dataconnect): import hooks from @tanstack-query-firebase/react --- docs/react/hooks/data-connect/useConnectMutation.mdx | 2 +- docs/react/hooks/data-connect/useConnectQuery.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/hooks/data-connect/useConnectMutation.mdx b/docs/react/hooks/data-connect/useConnectMutation.mdx index 969ca656..0435ba4c 100644 --- a/docs/react/hooks/data-connect/useConnectMutation.mdx +++ b/docs/react/hooks/data-connect/useConnectMutation.mdx @@ -16,7 +16,7 @@ The hook manages the mutation process and provides an easy-to-use interface to m ## Usage ```jsx -import { useConnectQuery } from "./useConnectQuery"; +import { useConnectQuery } from "@tanstack-query-firebase/react"; import { listMoviesQuery } from "@/your-package-name/your-connector"; function Component() { diff --git a/docs/react/hooks/data-connect/useConnectQuery.mdx b/docs/react/hooks/data-connect/useConnectQuery.mdx index 9ad35567..784ee61a 100644 --- a/docs/react/hooks/data-connect/useConnectQuery.mdx +++ b/docs/react/hooks/data-connect/useConnectQuery.mdx @@ -16,7 +16,7 @@ The hook simplifies the process of querying data from Firebase Data Connect and ## Usage ```jsx -import { useConnectQuery } from "./useConnectQuery"; +import { useConnectQuery } from "@tanstack-query-firebase/react"; import { listMoviesQuery } from "@/your-package-name/your-connector"; function Component() { From f280b1002b6cc04d912992b43eccc98d19f6399d Mon Sep 17 00:00:00 2001 From: HassanBahati Date: Mon, 2 Dec 2024 15:50:23 +0300 Subject: [PATCH 09/11] docs(useConnectMutation): add example hook usage --- docs/react/hooks/data-connect/useConnectMutation.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/hooks/data-connect/useConnectMutation.mdx b/docs/react/hooks/data-connect/useConnectMutation.mdx index 0435ba4c..48cc585e 100644 --- a/docs/react/hooks/data-connect/useConnectMutation.mdx +++ b/docs/react/hooks/data-connect/useConnectMutation.mdx @@ -17,11 +17,11 @@ The hook manages the mutation process and provides an easy-to-use interface to m ```jsx import { useConnectQuery } from "@tanstack-query-firebase/react"; -import { listMoviesQuery } from "@/your-package-name/your-connector"; +import { createMovieRef } from "@/your-package-name/your-connector"; function Component() { const { mutate, isPending, isSuccess, isError, error } = - useConnectMutation(createMovieMutation); + useConnectMutation(createMovieRef); const handleSubmit = async (movieData) => { try { From 436006deb066c59d00867e5d5cda031374074042 Mon Sep 17 00:00:00 2001 From: HassanBahati Date: Mon, 2 Dec 2024 15:52:57 +0300 Subject: [PATCH 10/11] docs(dataconnect): remove leading slash when importing from scoped package in example --- docs/react/hooks/data-connect/useConnectMutation.mdx | 2 +- docs/react/hooks/data-connect/useConnectQuery.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/hooks/data-connect/useConnectMutation.mdx b/docs/react/hooks/data-connect/useConnectMutation.mdx index 48cc585e..94016680 100644 --- a/docs/react/hooks/data-connect/useConnectMutation.mdx +++ b/docs/react/hooks/data-connect/useConnectMutation.mdx @@ -17,7 +17,7 @@ The hook manages the mutation process and provides an easy-to-use interface to m ```jsx import { useConnectQuery } from "@tanstack-query-firebase/react"; -import { createMovieRef } from "@/your-package-name/your-connector"; +import { createMovieRef } from "@your-package-name/your-connector"; function Component() { const { mutate, isPending, isSuccess, isError, error } = diff --git a/docs/react/hooks/data-connect/useConnectQuery.mdx b/docs/react/hooks/data-connect/useConnectQuery.mdx index 784ee61a..dbe485ff 100644 --- a/docs/react/hooks/data-connect/useConnectQuery.mdx +++ b/docs/react/hooks/data-connect/useConnectQuery.mdx @@ -17,7 +17,7 @@ The hook simplifies the process of querying data from Firebase Data Connect and ```jsx import { useConnectQuery } from "@tanstack-query-firebase/react"; -import { listMoviesQuery } from "@/your-package-name/your-connector"; +import { listMoviesQuery } from "@your-package-name/your-connector"; function Component() { const { data, isPending, isSuccess, isError, error } = useConnectQuery( From 2f4e6ed315d2c2f994c3aa0a6fe54d548e0a227e Mon Sep 17 00:00:00 2001 From: HassanBahati Date: Mon, 2 Dec 2024 15:56:23 +0300 Subject: [PATCH 11/11] docs(dataconnect): fix typos --- docs/react/hooks/data-connect/useConnectMutation.mdx | 2 +- docs/react/hooks/data-connect/useConnectQuery.mdx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/react/hooks/data-connect/useConnectMutation.mdx b/docs/react/hooks/data-connect/useConnectMutation.mdx index 94016680..bcda15de 100644 --- a/docs/react/hooks/data-connect/useConnectMutation.mdx +++ b/docs/react/hooks/data-connect/useConnectMutation.mdx @@ -8,7 +8,7 @@ The hook manages the mutation process and provides an easy-to-use interface to m ## Features -- Simplifies mutation handling for creatt, update, and delete operations using Firebase Data Connect. +- Simplifies mutation handling for create, update, and delete operations using Firebase Data Connect. - Provides type-safe handling of mutations based on your Firebase Data Connect schema. - Automatically manages loading, success, and error states for mutations. - Supports optimistic updates and caching to improve user experience and performance. diff --git a/docs/react/hooks/data-connect/useConnectQuery.mdx b/docs/react/hooks/data-connect/useConnectQuery.mdx index dbe485ff..05536469 100644 --- a/docs/react/hooks/data-connect/useConnectQuery.mdx +++ b/docs/react/hooks/data-connect/useConnectQuery.mdx @@ -8,10 +8,10 @@ The hook simplifies the process of querying data from Firebase Data Connect and ## Features -- Provides type-safe handling of queries based on the Firebase Data Connect schema. +- Provides type-safe handling of queries based on the Firebase Data Connect schema. - Simplifies data fetching using Firebase Data Connect. -- Automatically manages loading, success, and error states. -- Supports refetching data with integrated caching. +- Automatically manages loading, success, and error states. +- Supports refetching data with integrated caching. ## Usage