From 4ab1db0c0e98611883af992788ef5e02df833be5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Salazar?= <73718835+joshrs23@users.noreply.github.com> Date: Tue, 18 Nov 2025 13:20:10 -0500 Subject: [PATCH 1/7] sdk from back and first configuration for firebase --- .../dataconnect-generated/.guides/usage.md | 51 +- .../src/dataconnect-generated/README.md | 996 +++--------------- .../dataconnect-generated/esm/index.esm.js | 117 +- .../src/dataconnect-generated/index.cjs.js | 130 +-- .../src/dataconnect-generated/index.d.ts | 272 +---- .../src/dataconnect-generated/package.json | 2 +- .../src/dataconnect-generated/react/README.md | 780 ++------------ .../react/esm/index.esm.js | 58 +- .../dataconnect-generated/react/index.cjs.js | 58 +- .../dataconnect-generated/react/index.d.ts | 31 +- .../dataconnect-generated/react/package.json | 2 +- frontend-web/src/lib/firebaseConfig.js | 22 + 12 files changed, 363 insertions(+), 2156 deletions(-) create mode 100644 frontend-web/src/lib/firebaseConfig.js diff --git a/frontend-web/src/dataconnect-generated/.guides/usage.md b/frontend-web/src/dataconnect-generated/.guides/usage.md index c9fc0fe0..ded8abc8 100644 --- a/frontend-web/src/dataconnect-generated/.guides/usage.md +++ b/frontend-web/src/dataconnect-generated/.guides/usage.md @@ -12,26 +12,12 @@ For each operation, there is a wrapper hook that can be used to call the operati Here are all of the hooks that get generated: ```ts -import { useCreateMovie, useUpsertUser, useAddReview, useDeleteReview, useListMovies, useListUsers, useListUserReviews, useGetMovieById, useSearchMovie } from '@dataconnect/generated/react'; +import { useCreateEvent, useListEvents } from '@dataconnect/generated/react'; // The types of these hooks are available in react/index.d.ts -const { data, isPending, isSuccess, isError, error } = useCreateMovie(createMovieVars); +const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars); -const { data, isPending, isSuccess, isError, error } = useUpsertUser(upsertUserVars); - -const { data, isPending, isSuccess, isError, error } = useAddReview(addReviewVars); - -const { data, isPending, isSuccess, isError, error } = useDeleteReview(deleteReviewVars); - -const { data, isPending, isSuccess, isError, error } = useListMovies(); - -const { data, isPending, isSuccess, isError, error } = useListUsers(); - -const { data, isPending, isSuccess, isError, error } = useListUserReviews(); - -const { data, isPending, isSuccess, isError, error } = useGetMovieById(getMovieByIdVars); - -const { data, isPending, isSuccess, isError, error } = useSearchMovie(searchMovieVars); +const { data, isPending, isSuccess, isError, error } = useListEvents(); ``` @@ -70,35 +56,14 @@ If a user is not using a supported framework, they can use the generated SDK dir Here's an example of how to use it with the first 5 operations: ```js -import { createMovie, upsertUser, addReview, deleteReview, listMovies, listUsers, listUserReviews, getMovieById, searchMovie } from '@dataconnect/generated'; +import { createEvent, listEvents } from '@dataconnect/generated'; -// Operation CreateMovie: For variables, look at type CreateMovieVars in ../index.d.ts -const { data } = await CreateMovie(dataConnect, createMovieVars); +// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts +const { data } = await CreateEvent(dataConnect, createEventVars); -// Operation UpsertUser: For variables, look at type UpsertUserVars in ../index.d.ts -const { data } = await UpsertUser(dataConnect, upsertUserVars); - -// Operation AddReview: For variables, look at type AddReviewVars in ../index.d.ts -const { data } = await AddReview(dataConnect, addReviewVars); - -// Operation DeleteReview: For variables, look at type DeleteReviewVars in ../index.d.ts -const { data } = await DeleteReview(dataConnect, deleteReviewVars); - -// Operation ListMovies: -const { data } = await ListMovies(dataConnect); - -// Operation ListUsers: -const { data } = await ListUsers(dataConnect); - -// Operation ListUserReviews: -const { data } = await ListUserReviews(dataConnect); - -// Operation GetMovieById: For variables, look at type GetMovieByIdVars in ../index.d.ts -const { data } = await GetMovieById(dataConnect, getMovieByIdVars); - -// Operation SearchMovie: For variables, look at type SearchMovieVars in ../index.d.ts -const { data } = await SearchMovie(dataConnect, searchMovieVars); +// Operation listEvents: +const { data } = await ListEvents(dataConnect); ``` \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/README.md b/frontend-web/src/dataconnect-generated/README.md index 5f28bb82..a201a0f7 100644 --- a/frontend-web/src/dataconnect-generated/README.md +++ b/frontend-web/src/dataconnect-generated/README.md @@ -1,5 +1,5 @@ # Generated TypeScript README -This README will guide you through the process of using the generated JavaScript SDK package for the connector `example`. It will also provide examples on how to use your generated SDK to call your Data Connect queries and mutations. +This README will guide you through the process of using the generated JavaScript SDK package for the connector `krow-connector`. It will also provide examples on how to use your generated SDK to call your Data Connect queries and mutations. **If you're looking for the `React README`, you can find it at [`dataconnect-generated/react/README.md`](./react/README.md)** @@ -10,19 +10,12 @@ This README will guide you through the process of using the generated JavaScript - [**Accessing the connector**](#accessing-the-connector) - [*Connecting to the local Emulator*](#connecting-to-the-local-emulator) - [**Queries**](#queries) - - [*ListMovies*](#listmovies) - - [*ListUsers*](#listusers) - - [*ListUserReviews*](#listuserreviews) - - [*GetMovieById*](#getmoviebyid) - - [*SearchMovie*](#searchmovie) + - [*listEvents*](#listevents) - [**Mutations**](#mutations) - - [*CreateMovie*](#createmovie) - - [*UpsertUser*](#upsertuser) - - [*AddReview*](#addreview) - - [*DeleteReview*](#deletereview) + - [*CreateEvent*](#createevent) # Accessing the connector -A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector `example`. You can find more information about connectors in the [Data Connect documentation](https://firebase.google.com/docs/data-connect#how-does). +A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector `krow-connector`. You can find more information about connectors in the [Data Connect documentation](https://firebase.google.com/docs/data-connect#how-does). You can use this generated SDK by importing from the package `@dataconnect/generated` as shown below. Both CommonJS and ESM imports are supported. @@ -64,547 +57,107 @@ The following is true for both the action shortcut function and the `QueryRef` f - If the Query accepts arguments, both the action shortcut function and the `QueryRef` function accept a single argument: an object that contains all the required variables (and the optional variables) for the Query - Both functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. -Below are examples of how to use the `example` connector's generated functions to execute each query. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#using-queries). +Below are examples of how to use the `krow-connector` connector's generated functions to execute each query. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#using-queries). -## ListMovies -You can execute the `ListMovies` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): +## listEvents +You can execute the `listEvents` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): ```typescript -listMovies(): QueryPromise; +listEvents(): QueryPromise; -interface ListMoviesRef { +interface ListEventsRef { ... /* Allow users to create refs without passing in DataConnect */ - (): QueryRef; + (): QueryRef; } -export const listMoviesRef: ListMoviesRef; +export const listEventsRef: ListEventsRef; ``` You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function. ```typescript -listMovies(dc: DataConnect): QueryPromise; +listEvents(dc: DataConnect): QueryPromise; -interface ListMoviesRef { +interface ListEventsRef { ... - (dc: DataConnect): QueryRef; + (dc: DataConnect): QueryRef; } -export const listMoviesRef: ListMoviesRef; +export const listEventsRef: ListEventsRef; ``` -If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the listMoviesRef: +If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the listEventsRef: ```typescript -const name = listMoviesRef.operationName; +const name = listEventsRef.operationName; console.log(name); ``` ### Variables -The `ListMovies` query has no variables. +The `listEvents` query has no variables. ### Return Type -Recall that executing the `ListMovies` query returns a `QueryPromise` that resolves to an object with a `data` property. +Recall that executing the `listEvents` query returns a `QueryPromise` that resolves to an object with a `data` property. -The `data` property is an object of type `ListMoviesData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: +The `data` property is an object of type `ListEventsData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: ```typescript -export interface ListMoviesData { - movies: ({ +export interface ListEventsData { + events: ({ id: UUIDString; - title: string; - imageUrl: string; - genre?: string | null; - } & Movie_Key)[]; + eventName: string; + status: EventStatus; + date: TimestampString; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + total?: number | null; + requested?: number | null; + } & Event_Key)[]; } ``` -### Using `ListMovies`'s action shortcut function +### Using `listEvents`'s action shortcut function ```typescript import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, listMovies } from '@dataconnect/generated'; +import { connectorConfig, listEvents } from '@dataconnect/generated'; -// Call the `listMovies()` function to execute the query. +// Call the `listEvents()` function to execute the query. // You can use the `await` keyword to wait for the promise to resolve. -const { data } = await listMovies(); +const { data } = await listEvents(); // You can also pass in a `DataConnect` instance to the action shortcut function. const dataConnect = getDataConnect(connectorConfig); -const { data } = await listMovies(dataConnect); +const { data } = await listEvents(dataConnect); -console.log(data.movies); +console.log(data.events); // Or, you can use the `Promise` API. -listMovies().then((response) => { +listEvents().then((response) => { const data = response.data; - console.log(data.movies); + console.log(data.events); }); ``` -### Using `ListMovies`'s `QueryRef` function +### Using `listEvents`'s `QueryRef` function ```typescript import { getDataConnect, executeQuery } from 'firebase/data-connect'; -import { connectorConfig, listMoviesRef } from '@dataconnect/generated'; +import { connectorConfig, listEventsRef } from '@dataconnect/generated'; -// Call the `listMoviesRef()` function to get a reference to the query. -const ref = listMoviesRef(); +// Call the `listEventsRef()` function to get a reference to the query. +const ref = listEventsRef(); // You can also pass in a `DataConnect` instance to the `QueryRef` function. const dataConnect = getDataConnect(connectorConfig); -const ref = listMoviesRef(dataConnect); +const ref = listEventsRef(dataConnect); // Call `executeQuery()` on the reference to execute the query. // You can use the `await` keyword to wait for the promise to resolve. const { data } = await executeQuery(ref); -console.log(data.movies); +console.log(data.events); // Or, you can use the `Promise` API. executeQuery(ref).then((response) => { const data = response.data; - console.log(data.movies); -}); -``` - -## ListUsers -You can execute the `ListUsers` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): -```typescript -listUsers(): QueryPromise; - -interface ListUsersRef { - ... - /* Allow users to create refs without passing in DataConnect */ - (): QueryRef; -} -export const listUsersRef: ListUsersRef; -``` -You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function. -```typescript -listUsers(dc: DataConnect): QueryPromise; - -interface ListUsersRef { - ... - (dc: DataConnect): QueryRef; -} -export const listUsersRef: ListUsersRef; -``` - -If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the listUsersRef: -```typescript -const name = listUsersRef.operationName; -console.log(name); -``` - -### Variables -The `ListUsers` query has no variables. -### Return Type -Recall that executing the `ListUsers` query returns a `QueryPromise` that resolves to an object with a `data` property. - -The `data` property is an object of type `ListUsersData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: -```typescript -export interface ListUsersData { - users: ({ - id: string; - username: string; - } & User_Key)[]; -} -``` -### Using `ListUsers`'s action shortcut function - -```typescript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, listUsers } from '@dataconnect/generated'; - - -// Call the `listUsers()` function to execute the query. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await listUsers(); - -// You can also pass in a `DataConnect` instance to the action shortcut function. -const dataConnect = getDataConnect(connectorConfig); -const { data } = await listUsers(dataConnect); - -console.log(data.users); - -// Or, you can use the `Promise` API. -listUsers().then((response) => { - const data = response.data; - console.log(data.users); -}); -``` - -### Using `ListUsers`'s `QueryRef` function - -```typescript -import { getDataConnect, executeQuery } from 'firebase/data-connect'; -import { connectorConfig, listUsersRef } from '@dataconnect/generated'; - - -// Call the `listUsersRef()` function to get a reference to the query. -const ref = listUsersRef(); - -// You can also pass in a `DataConnect` instance to the `QueryRef` function. -const dataConnect = getDataConnect(connectorConfig); -const ref = listUsersRef(dataConnect); - -// Call `executeQuery()` on the reference to execute the query. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await executeQuery(ref); - -console.log(data.users); - -// Or, you can use the `Promise` API. -executeQuery(ref).then((response) => { - const data = response.data; - console.log(data.users); -}); -``` - -## ListUserReviews -You can execute the `ListUserReviews` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): -```typescript -listUserReviews(): QueryPromise; - -interface ListUserReviewsRef { - ... - /* Allow users to create refs without passing in DataConnect */ - (): QueryRef; -} -export const listUserReviewsRef: ListUserReviewsRef; -``` -You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function. -```typescript -listUserReviews(dc: DataConnect): QueryPromise; - -interface ListUserReviewsRef { - ... - (dc: DataConnect): QueryRef; -} -export const listUserReviewsRef: ListUserReviewsRef; -``` - -If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the listUserReviewsRef: -```typescript -const name = listUserReviewsRef.operationName; -console.log(name); -``` - -### Variables -The `ListUserReviews` query has no variables. -### Return Type -Recall that executing the `ListUserReviews` query returns a `QueryPromise` that resolves to an object with a `data` property. - -The `data` property is an object of type `ListUserReviewsData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: -```typescript -export interface ListUserReviewsData { - user?: { - id: string; - username: string; - reviews: ({ - rating?: number | null; - reviewDate: DateString; - reviewText?: string | null; - movie: { - id: UUIDString; - title: string; - } & Movie_Key; - })[]; - } & User_Key; -} -``` -### Using `ListUserReviews`'s action shortcut function - -```typescript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, listUserReviews } from '@dataconnect/generated'; - - -// Call the `listUserReviews()` function to execute the query. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await listUserReviews(); - -// You can also pass in a `DataConnect` instance to the action shortcut function. -const dataConnect = getDataConnect(connectorConfig); -const { data } = await listUserReviews(dataConnect); - -console.log(data.user); - -// Or, you can use the `Promise` API. -listUserReviews().then((response) => { - const data = response.data; - console.log(data.user); -}); -``` - -### Using `ListUserReviews`'s `QueryRef` function - -```typescript -import { getDataConnect, executeQuery } from 'firebase/data-connect'; -import { connectorConfig, listUserReviewsRef } from '@dataconnect/generated'; - - -// Call the `listUserReviewsRef()` function to get a reference to the query. -const ref = listUserReviewsRef(); - -// You can also pass in a `DataConnect` instance to the `QueryRef` function. -const dataConnect = getDataConnect(connectorConfig); -const ref = listUserReviewsRef(dataConnect); - -// Call `executeQuery()` on the reference to execute the query. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await executeQuery(ref); - -console.log(data.user); - -// Or, you can use the `Promise` API. -executeQuery(ref).then((response) => { - const data = response.data; - console.log(data.user); -}); -``` - -## GetMovieById -You can execute the `GetMovieById` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): -```typescript -getMovieById(vars: GetMovieByIdVariables): QueryPromise; - -interface GetMovieByIdRef { - ... - /* Allow users to create refs without passing in DataConnect */ - (vars: GetMovieByIdVariables): QueryRef; -} -export const getMovieByIdRef: GetMovieByIdRef; -``` -You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function. -```typescript -getMovieById(dc: DataConnect, vars: GetMovieByIdVariables): QueryPromise; - -interface GetMovieByIdRef { - ... - (dc: DataConnect, vars: GetMovieByIdVariables): QueryRef; -} -export const getMovieByIdRef: GetMovieByIdRef; -``` - -If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the getMovieByIdRef: -```typescript -const name = getMovieByIdRef.operationName; -console.log(name); -``` - -### Variables -The `GetMovieById` query requires an argument of type `GetMovieByIdVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: - -```typescript -export interface GetMovieByIdVariables { - id: UUIDString; -} -``` -### Return Type -Recall that executing the `GetMovieById` query returns a `QueryPromise` that resolves to an object with a `data` property. - -The `data` property is an object of type `GetMovieByIdData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: -```typescript -export interface GetMovieByIdData { - movie?: { - id: UUIDString; - title: string; - imageUrl: string; - genre?: string | null; - metadata?: { - rating?: number | null; - releaseYear?: number | null; - description?: string | null; - }; - reviews: ({ - reviewText?: string | null; - reviewDate: DateString; - rating?: number | null; - user: { - id: string; - username: string; - } & User_Key; - })[]; - } & Movie_Key; -} -``` -### Using `GetMovieById`'s action shortcut function - -```typescript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, getMovieById, GetMovieByIdVariables } from '@dataconnect/generated'; - -// The `GetMovieById` query requires an argument of type `GetMovieByIdVariables`: -const getMovieByIdVars: GetMovieByIdVariables = { - id: ..., -}; - -// Call the `getMovieById()` function to execute the query. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await getMovieById(getMovieByIdVars); -// Variables can be defined inline as well. -const { data } = await getMovieById({ id: ..., }); - -// You can also pass in a `DataConnect` instance to the action shortcut function. -const dataConnect = getDataConnect(connectorConfig); -const { data } = await getMovieById(dataConnect, getMovieByIdVars); - -console.log(data.movie); - -// Or, you can use the `Promise` API. -getMovieById(getMovieByIdVars).then((response) => { - const data = response.data; - console.log(data.movie); -}); -``` - -### Using `GetMovieById`'s `QueryRef` function - -```typescript -import { getDataConnect, executeQuery } from 'firebase/data-connect'; -import { connectorConfig, getMovieByIdRef, GetMovieByIdVariables } from '@dataconnect/generated'; - -// The `GetMovieById` query requires an argument of type `GetMovieByIdVariables`: -const getMovieByIdVars: GetMovieByIdVariables = { - id: ..., -}; - -// Call the `getMovieByIdRef()` function to get a reference to the query. -const ref = getMovieByIdRef(getMovieByIdVars); -// Variables can be defined inline as well. -const ref = getMovieByIdRef({ id: ..., }); - -// You can also pass in a `DataConnect` instance to the `QueryRef` function. -const dataConnect = getDataConnect(connectorConfig); -const ref = getMovieByIdRef(dataConnect, getMovieByIdVars); - -// Call `executeQuery()` on the reference to execute the query. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await executeQuery(ref); - -console.log(data.movie); - -// Or, you can use the `Promise` API. -executeQuery(ref).then((response) => { - const data = response.data; - console.log(data.movie); -}); -``` - -## SearchMovie -You can execute the `SearchMovie` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): -```typescript -searchMovie(vars?: SearchMovieVariables): QueryPromise; - -interface SearchMovieRef { - ... - /* Allow users to create refs without passing in DataConnect */ - (vars?: SearchMovieVariables): QueryRef; -} -export const searchMovieRef: SearchMovieRef; -``` -You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function. -```typescript -searchMovie(dc: DataConnect, vars?: SearchMovieVariables): QueryPromise; - -interface SearchMovieRef { - ... - (dc: DataConnect, vars?: SearchMovieVariables): QueryRef; -} -export const searchMovieRef: SearchMovieRef; -``` - -If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the searchMovieRef: -```typescript -const name = searchMovieRef.operationName; -console.log(name); -``` - -### Variables -The `SearchMovie` query has an optional argument of type `SearchMovieVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: - -```typescript -export interface SearchMovieVariables { - titleInput?: string | null; - genre?: string | null; -} -``` -### Return Type -Recall that executing the `SearchMovie` query returns a `QueryPromise` that resolves to an object with a `data` property. - -The `data` property is an object of type `SearchMovieData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: -```typescript -export interface SearchMovieData { - movies: ({ - id: UUIDString; - title: string; - genre?: string | null; - imageUrl: string; - } & Movie_Key)[]; -} -``` -### Using `SearchMovie`'s action shortcut function - -```typescript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, searchMovie, SearchMovieVariables } from '@dataconnect/generated'; - -// The `SearchMovie` query has an optional argument of type `SearchMovieVariables`: -const searchMovieVars: SearchMovieVariables = { - titleInput: ..., // optional - genre: ..., // optional -}; - -// Call the `searchMovie()` function to execute the query. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await searchMovie(searchMovieVars); -// Variables can be defined inline as well. -const { data } = await searchMovie({ titleInput: ..., genre: ..., }); -// Since all variables are optional for this query, you can omit the `SearchMovieVariables` argument. -const { data } = await searchMovie(); - -// You can also pass in a `DataConnect` instance to the action shortcut function. -const dataConnect = getDataConnect(connectorConfig); -const { data } = await searchMovie(dataConnect, searchMovieVars); - -console.log(data.movies); - -// Or, you can use the `Promise` API. -searchMovie(searchMovieVars).then((response) => { - const data = response.data; - console.log(data.movies); -}); -``` - -### Using `SearchMovie`'s `QueryRef` function - -```typescript -import { getDataConnect, executeQuery } from 'firebase/data-connect'; -import { connectorConfig, searchMovieRef, SearchMovieVariables } from '@dataconnect/generated'; - -// The `SearchMovie` query has an optional argument of type `SearchMovieVariables`: -const searchMovieVars: SearchMovieVariables = { - titleInput: ..., // optional - genre: ..., // optional -}; - -// Call the `searchMovieRef()` function to get a reference to the query. -const ref = searchMovieRef(searchMovieVars); -// Variables can be defined inline as well. -const ref = searchMovieRef({ titleInput: ..., genre: ..., }); -// Since all variables are optional for this query, you can omit the `SearchMovieVariables` argument. -const ref = searchMovieRef(); - -// You can also pass in a `DataConnect` instance to the `QueryRef` function. -const dataConnect = getDataConnect(connectorConfig); -const ref = searchMovieRef(dataConnect, searchMovieVars); - -// Call `executeQuery()` on the reference to execute the query. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await executeQuery(ref); - -console.log(data.movies); - -// Or, you can use the `Promise` API. -executeQuery(ref).then((response) => { - const data = response.data; - console.log(data.movies); + console.log(data.events); }); ``` @@ -621,453 +174,144 @@ The following is true for both the action shortcut function and the `MutationRef - If the Mutation accepts arguments, both the action shortcut function and the `MutationRef` function accept a single argument: an object that contains all the required variables (and the optional variables) for the Mutation - Both functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. -Below are examples of how to use the `example` connector's generated functions to execute each mutation. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#using-mutations). +Below are examples of how to use the `krow-connector` connector's generated functions to execute each mutation. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#using-mutations). -## CreateMovie -You can execute the `CreateMovie` mutation using the following action shortcut function, or by calling `executeMutation()` after calling the following `MutationRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): +## CreateEvent +You can execute the `CreateEvent` mutation using the following action shortcut function, or by calling `executeMutation()` after calling the following `MutationRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): ```typescript -createMovie(vars: CreateMovieVariables): MutationPromise; +createEvent(vars: CreateEventVariables): MutationPromise; -interface CreateMovieRef { +interface CreateEventRef { ... /* Allow users to create refs without passing in DataConnect */ - (vars: CreateMovieVariables): MutationRef; + (vars: CreateEventVariables): MutationRef; } -export const createMovieRef: CreateMovieRef; +export const createEventRef: CreateEventRef; ``` You can also pass in a `DataConnect` instance to the action shortcut function or `MutationRef` function. ```typescript -createMovie(dc: DataConnect, vars: CreateMovieVariables): MutationPromise; +createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; -interface CreateMovieRef { +interface CreateEventRef { ... - (dc: DataConnect, vars: CreateMovieVariables): MutationRef; + (dc: DataConnect, vars: CreateEventVariables): MutationRef; } -export const createMovieRef: CreateMovieRef; +export const createEventRef: CreateEventRef; ``` -If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the createMovieRef: +If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the createEventRef: ```typescript -const name = createMovieRef.operationName; +const name = createEventRef.operationName; console.log(name); ``` ### Variables -The `CreateMovie` mutation requires an argument of type `CreateMovieVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: +The `CreateEvent` mutation requires an argument of type `CreateEventVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: ```typescript -export interface CreateMovieVariables { - title: string; - genre: string; - imageUrl: string; +export interface CreateEventVariables { + eventName: string; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + status: EventStatus; + date: TimestampString; + shifts?: string | null; + total?: number | null; + requested?: number | null; + assignedStaff?: string | null; } ``` ### Return Type -Recall that executing the `CreateMovie` mutation returns a `MutationPromise` that resolves to an object with a `data` property. +Recall that executing the `CreateEvent` mutation returns a `MutationPromise` that resolves to an object with a `data` property. -The `data` property is an object of type `CreateMovieData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: +The `data` property is an object of type `CreateEventData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: ```typescript -export interface CreateMovieData { - movie_insert: Movie_Key; +export interface CreateEventData { + event_insert: Event_Key; } ``` -### Using `CreateMovie`'s action shortcut function +### Using `CreateEvent`'s action shortcut function ```typescript import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, createMovie, CreateMovieVariables } from '@dataconnect/generated'; +import { connectorConfig, createEvent, CreateEventVariables } from '@dataconnect/generated'; -// The `CreateMovie` mutation requires an argument of type `CreateMovieVariables`: -const createMovieVars: CreateMovieVariables = { - title: ..., - genre: ..., - imageUrl: ..., +// The `CreateEvent` mutation requires an argument of type `CreateEventVariables`: +const createEventVars: CreateEventVariables = { + eventName: ..., + isRecurring: ..., + recurrenceType: ..., // optional + businessId: ..., + vendorId: ..., // optional + status: ..., + date: ..., + shifts: ..., // optional + total: ..., // optional + requested: ..., // optional + assignedStaff: ..., // optional }; -// Call the `createMovie()` function to execute the mutation. +// Call the `createEvent()` function to execute the mutation. // You can use the `await` keyword to wait for the promise to resolve. -const { data } = await createMovie(createMovieVars); +const { data } = await createEvent(createEventVars); // Variables can be defined inline as well. -const { data } = await createMovie({ title: ..., genre: ..., imageUrl: ..., }); +const { data } = await createEvent({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); // You can also pass in a `DataConnect` instance to the action shortcut function. const dataConnect = getDataConnect(connectorConfig); -const { data } = await createMovie(dataConnect, createMovieVars); +const { data } = await createEvent(dataConnect, createEventVars); -console.log(data.movie_insert); +console.log(data.event_insert); // Or, you can use the `Promise` API. -createMovie(createMovieVars).then((response) => { +createEvent(createEventVars).then((response) => { const data = response.data; - console.log(data.movie_insert); + console.log(data.event_insert); }); ``` -### Using `CreateMovie`'s `MutationRef` function +### Using `CreateEvent`'s `MutationRef` function ```typescript import { getDataConnect, executeMutation } from 'firebase/data-connect'; -import { connectorConfig, createMovieRef, CreateMovieVariables } from '@dataconnect/generated'; +import { connectorConfig, createEventRef, CreateEventVariables } from '@dataconnect/generated'; -// The `CreateMovie` mutation requires an argument of type `CreateMovieVariables`: -const createMovieVars: CreateMovieVariables = { - title: ..., - genre: ..., - imageUrl: ..., +// The `CreateEvent` mutation requires an argument of type `CreateEventVariables`: +const createEventVars: CreateEventVariables = { + eventName: ..., + isRecurring: ..., + recurrenceType: ..., // optional + businessId: ..., + vendorId: ..., // optional + status: ..., + date: ..., + shifts: ..., // optional + total: ..., // optional + requested: ..., // optional + assignedStaff: ..., // optional }; -// Call the `createMovieRef()` function to get a reference to the mutation. -const ref = createMovieRef(createMovieVars); +// Call the `createEventRef()` function to get a reference to the mutation. +const ref = createEventRef(createEventVars); // Variables can be defined inline as well. -const ref = createMovieRef({ title: ..., genre: ..., imageUrl: ..., }); +const ref = createEventRef({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); // You can also pass in a `DataConnect` instance to the `MutationRef` function. const dataConnect = getDataConnect(connectorConfig); -const ref = createMovieRef(dataConnect, createMovieVars); +const ref = createEventRef(dataConnect, createEventVars); // Call `executeMutation()` on the reference to execute the mutation. // You can use the `await` keyword to wait for the promise to resolve. const { data } = await executeMutation(ref); -console.log(data.movie_insert); +console.log(data.event_insert); // Or, you can use the `Promise` API. executeMutation(ref).then((response) => { const data = response.data; - console.log(data.movie_insert); -}); -``` - -## UpsertUser -You can execute the `UpsertUser` mutation using the following action shortcut function, or by calling `executeMutation()` after calling the following `MutationRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): -```typescript -upsertUser(vars: UpsertUserVariables): MutationPromise; - -interface UpsertUserRef { - ... - /* Allow users to create refs without passing in DataConnect */ - (vars: UpsertUserVariables): MutationRef; -} -export const upsertUserRef: UpsertUserRef; -``` -You can also pass in a `DataConnect` instance to the action shortcut function or `MutationRef` function. -```typescript -upsertUser(dc: DataConnect, vars: UpsertUserVariables): MutationPromise; - -interface UpsertUserRef { - ... - (dc: DataConnect, vars: UpsertUserVariables): MutationRef; -} -export const upsertUserRef: UpsertUserRef; -``` - -If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the upsertUserRef: -```typescript -const name = upsertUserRef.operationName; -console.log(name); -``` - -### Variables -The `UpsertUser` mutation requires an argument of type `UpsertUserVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: - -```typescript -export interface UpsertUserVariables { - username: string; -} -``` -### Return Type -Recall that executing the `UpsertUser` mutation returns a `MutationPromise` that resolves to an object with a `data` property. - -The `data` property is an object of type `UpsertUserData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: -```typescript -export interface UpsertUserData { - user_upsert: User_Key; -} -``` -### Using `UpsertUser`'s action shortcut function - -```typescript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, upsertUser, UpsertUserVariables } from '@dataconnect/generated'; - -// The `UpsertUser` mutation requires an argument of type `UpsertUserVariables`: -const upsertUserVars: UpsertUserVariables = { - username: ..., -}; - -// Call the `upsertUser()` function to execute the mutation. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await upsertUser(upsertUserVars); -// Variables can be defined inline as well. -const { data } = await upsertUser({ username: ..., }); - -// You can also pass in a `DataConnect` instance to the action shortcut function. -const dataConnect = getDataConnect(connectorConfig); -const { data } = await upsertUser(dataConnect, upsertUserVars); - -console.log(data.user_upsert); - -// Or, you can use the `Promise` API. -upsertUser(upsertUserVars).then((response) => { - const data = response.data; - console.log(data.user_upsert); -}); -``` - -### Using `UpsertUser`'s `MutationRef` function - -```typescript -import { getDataConnect, executeMutation } from 'firebase/data-connect'; -import { connectorConfig, upsertUserRef, UpsertUserVariables } from '@dataconnect/generated'; - -// The `UpsertUser` mutation requires an argument of type `UpsertUserVariables`: -const upsertUserVars: UpsertUserVariables = { - username: ..., -}; - -// Call the `upsertUserRef()` function to get a reference to the mutation. -const ref = upsertUserRef(upsertUserVars); -// Variables can be defined inline as well. -const ref = upsertUserRef({ username: ..., }); - -// You can also pass in a `DataConnect` instance to the `MutationRef` function. -const dataConnect = getDataConnect(connectorConfig); -const ref = upsertUserRef(dataConnect, upsertUserVars); - -// Call `executeMutation()` on the reference to execute the mutation. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await executeMutation(ref); - -console.log(data.user_upsert); - -// Or, you can use the `Promise` API. -executeMutation(ref).then((response) => { - const data = response.data; - console.log(data.user_upsert); -}); -``` - -## AddReview -You can execute the `AddReview` mutation using the following action shortcut function, or by calling `executeMutation()` after calling the following `MutationRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): -```typescript -addReview(vars: AddReviewVariables): MutationPromise; - -interface AddReviewRef { - ... - /* Allow users to create refs without passing in DataConnect */ - (vars: AddReviewVariables): MutationRef; -} -export const addReviewRef: AddReviewRef; -``` -You can also pass in a `DataConnect` instance to the action shortcut function or `MutationRef` function. -```typescript -addReview(dc: DataConnect, vars: AddReviewVariables): MutationPromise; - -interface AddReviewRef { - ... - (dc: DataConnect, vars: AddReviewVariables): MutationRef; -} -export const addReviewRef: AddReviewRef; -``` - -If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the addReviewRef: -```typescript -const name = addReviewRef.operationName; -console.log(name); -``` - -### Variables -The `AddReview` mutation requires an argument of type `AddReviewVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: - -```typescript -export interface AddReviewVariables { - movieId: UUIDString; - rating: number; - reviewText: string; -} -``` -### Return Type -Recall that executing the `AddReview` mutation returns a `MutationPromise` that resolves to an object with a `data` property. - -The `data` property is an object of type `AddReviewData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: -```typescript -export interface AddReviewData { - review_upsert: Review_Key; -} -``` -### Using `AddReview`'s action shortcut function - -```typescript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, addReview, AddReviewVariables } from '@dataconnect/generated'; - -// The `AddReview` mutation requires an argument of type `AddReviewVariables`: -const addReviewVars: AddReviewVariables = { - movieId: ..., - rating: ..., - reviewText: ..., -}; - -// Call the `addReview()` function to execute the mutation. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await addReview(addReviewVars); -// Variables can be defined inline as well. -const { data } = await addReview({ movieId: ..., rating: ..., reviewText: ..., }); - -// You can also pass in a `DataConnect` instance to the action shortcut function. -const dataConnect = getDataConnect(connectorConfig); -const { data } = await addReview(dataConnect, addReviewVars); - -console.log(data.review_upsert); - -// Or, you can use the `Promise` API. -addReview(addReviewVars).then((response) => { - const data = response.data; - console.log(data.review_upsert); -}); -``` - -### Using `AddReview`'s `MutationRef` function - -```typescript -import { getDataConnect, executeMutation } from 'firebase/data-connect'; -import { connectorConfig, addReviewRef, AddReviewVariables } from '@dataconnect/generated'; - -// The `AddReview` mutation requires an argument of type `AddReviewVariables`: -const addReviewVars: AddReviewVariables = { - movieId: ..., - rating: ..., - reviewText: ..., -}; - -// Call the `addReviewRef()` function to get a reference to the mutation. -const ref = addReviewRef(addReviewVars); -// Variables can be defined inline as well. -const ref = addReviewRef({ movieId: ..., rating: ..., reviewText: ..., }); - -// You can also pass in a `DataConnect` instance to the `MutationRef` function. -const dataConnect = getDataConnect(connectorConfig); -const ref = addReviewRef(dataConnect, addReviewVars); - -// Call `executeMutation()` on the reference to execute the mutation. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await executeMutation(ref); - -console.log(data.review_upsert); - -// Or, you can use the `Promise` API. -executeMutation(ref).then((response) => { - const data = response.data; - console.log(data.review_upsert); -}); -``` - -## DeleteReview -You can execute the `DeleteReview` mutation using the following action shortcut function, or by calling `executeMutation()` after calling the following `MutationRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): -```typescript -deleteReview(vars: DeleteReviewVariables): MutationPromise; - -interface DeleteReviewRef { - ... - /* Allow users to create refs without passing in DataConnect */ - (vars: DeleteReviewVariables): MutationRef; -} -export const deleteReviewRef: DeleteReviewRef; -``` -You can also pass in a `DataConnect` instance to the action shortcut function or `MutationRef` function. -```typescript -deleteReview(dc: DataConnect, vars: DeleteReviewVariables): MutationPromise; - -interface DeleteReviewRef { - ... - (dc: DataConnect, vars: DeleteReviewVariables): MutationRef; -} -export const deleteReviewRef: DeleteReviewRef; -``` - -If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the deleteReviewRef: -```typescript -const name = deleteReviewRef.operationName; -console.log(name); -``` - -### Variables -The `DeleteReview` mutation requires an argument of type `DeleteReviewVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: - -```typescript -export interface DeleteReviewVariables { - movieId: UUIDString; -} -``` -### Return Type -Recall that executing the `DeleteReview` mutation returns a `MutationPromise` that resolves to an object with a `data` property. - -The `data` property is an object of type `DeleteReviewData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: -```typescript -export interface DeleteReviewData { - review_delete?: Review_Key | null; -} -``` -### Using `DeleteReview`'s action shortcut function - -```typescript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, deleteReview, DeleteReviewVariables } from '@dataconnect/generated'; - -// The `DeleteReview` mutation requires an argument of type `DeleteReviewVariables`: -const deleteReviewVars: DeleteReviewVariables = { - movieId: ..., -}; - -// Call the `deleteReview()` function to execute the mutation. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await deleteReview(deleteReviewVars); -// Variables can be defined inline as well. -const { data } = await deleteReview({ movieId: ..., }); - -// You can also pass in a `DataConnect` instance to the action shortcut function. -const dataConnect = getDataConnect(connectorConfig); -const { data } = await deleteReview(dataConnect, deleteReviewVars); - -console.log(data.review_delete); - -// Or, you can use the `Promise` API. -deleteReview(deleteReviewVars).then((response) => { - const data = response.data; - console.log(data.review_delete); -}); -``` - -### Using `DeleteReview`'s `MutationRef` function - -```typescript -import { getDataConnect, executeMutation } from 'firebase/data-connect'; -import { connectorConfig, deleteReviewRef, DeleteReviewVariables } from '@dataconnect/generated'; - -// The `DeleteReview` mutation requires an argument of type `DeleteReviewVariables`: -const deleteReviewVars: DeleteReviewVariables = { - movieId: ..., -}; - -// Call the `deleteReviewRef()` function to get a reference to the mutation. -const ref = deleteReviewRef(deleteReviewVars); -// Variables can be defined inline as well. -const ref = deleteReviewRef({ movieId: ..., }); - -// You can also pass in a `DataConnect` instance to the `MutationRef` function. -const dataConnect = getDataConnect(connectorConfig); -const ref = deleteReviewRef(dataConnect, deleteReviewVars); - -// Call `executeMutation()` on the reference to execute the mutation. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await executeMutation(ref); - -console.log(data.review_delete); - -// Or, you can use the `Promise` API. -executeMutation(ref).then((response) => { - const data = response.data; - console.log(data.review_delete); + console.log(data.event_insert); }); ``` diff --git a/frontend-web/src/dataconnect-generated/esm/index.esm.js b/frontend-web/src/dataconnect-generated/esm/index.esm.js index d4ff36cc..232d764e 100644 --- a/frontend-web/src/dataconnect-generated/esm/index.esm.js +++ b/frontend-web/src/dataconnect-generated/esm/index.esm.js @@ -1,107 +1,46 @@ import { queryRef, executeQuery, mutationRef, executeMutation, validateArgs } from 'firebase/data-connect'; +export const EventStatus = { + DRAFT: "DRAFT", + ACTIVE: "ACTIVE", + PENDING: "PENDING", + ASSIGNED: "ASSIGNED", + CONFIRMED: "CONFIRMED", + COMPLETED: "COMPLETED", + CANCELED: "CANCELED", +} + +export const RecurrenceType = { + SINGLE: "SINGLE", + DATE_RANGE: "DATE_RANGE", + SCATTER: "SCATTER", +} + export const connectorConfig = { - connector: 'example', - service: 'krow-workforce', + connector: 'krow-connector', + service: 'krow-workforce-db', location: 'us-central1' }; -export const createMovieRef = (dcOrVars, vars) => { +export const createEventRef = (dcOrVars, vars) => { const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'CreateMovie', inputVars); + return mutationRef(dcInstance, 'CreateEvent', inputVars); } -createMovieRef.operationName = 'CreateMovie'; +createEventRef.operationName = 'CreateEvent'; -export function createMovie(dcOrVars, vars) { - return executeMutation(createMovieRef(dcOrVars, vars)); +export function createEvent(dcOrVars, vars) { + return executeMutation(createEventRef(dcOrVars, vars)); } -export const upsertUserRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'UpsertUser', inputVars); -} -upsertUserRef.operationName = 'UpsertUser'; - -export function upsertUser(dcOrVars, vars) { - return executeMutation(upsertUserRef(dcOrVars, vars)); -} - -export const addReviewRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'AddReview', inputVars); -} -addReviewRef.operationName = 'AddReview'; - -export function addReview(dcOrVars, vars) { - return executeMutation(addReviewRef(dcOrVars, vars)); -} - -export const deleteReviewRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'DeleteReview', inputVars); -} -deleteReviewRef.operationName = 'DeleteReview'; - -export function deleteReview(dcOrVars, vars) { - return executeMutation(deleteReviewRef(dcOrVars, vars)); -} - -export const listMoviesRef = (dc) => { +export const listEventsRef = (dc) => { const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'ListMovies'); + return queryRef(dcInstance, 'listEvents'); } -listMoviesRef.operationName = 'ListMovies'; +listEventsRef.operationName = 'listEvents'; -export function listMovies(dc) { - return executeQuery(listMoviesRef(dc)); -} - -export const listUsersRef = (dc) => { - const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); - dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'ListUsers'); -} -listUsersRef.operationName = 'ListUsers'; - -export function listUsers(dc) { - return executeQuery(listUsersRef(dc)); -} - -export const listUserReviewsRef = (dc) => { - const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); - dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'ListUserReviews'); -} -listUserReviewsRef.operationName = 'ListUserReviews'; - -export function listUserReviews(dc) { - return executeQuery(listUserReviewsRef(dc)); -} - -export const getMovieByIdRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'GetMovieById', inputVars); -} -getMovieByIdRef.operationName = 'GetMovieById'; - -export function getMovieById(dcOrVars, vars) { - return executeQuery(getMovieByIdRef(dcOrVars, vars)); -} - -export const searchMovieRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars); - dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'SearchMovie', inputVars); -} -searchMovieRef.operationName = 'SearchMovie'; - -export function searchMovie(dcOrVars, vars) { - return executeQuery(searchMovieRef(dcOrVars, vars)); +export function listEvents(dc) { + return executeQuery(listEventsRef(dc)); } diff --git a/frontend-web/src/dataconnect-generated/index.cjs.js b/frontend-web/src/dataconnect-generated/index.cjs.js index 54373654..4ee6e173 100644 --- a/frontend-web/src/dataconnect-generated/index.cjs.js +++ b/frontend-web/src/dataconnect-generated/index.cjs.js @@ -1,116 +1,50 @@ const { queryRef, executeQuery, mutationRef, executeMutation, validateArgs } = require('firebase/data-connect'); +const EventStatus = { + DRAFT: "DRAFT", + ACTIVE: "ACTIVE", + PENDING: "PENDING", + ASSIGNED: "ASSIGNED", + CONFIRMED: "CONFIRMED", + COMPLETED: "COMPLETED", + CANCELED: "CANCELED", +} +exports.EventStatus = EventStatus; + +const RecurrenceType = { + SINGLE: "SINGLE", + DATE_RANGE: "DATE_RANGE", + SCATTER: "SCATTER", +} +exports.RecurrenceType = RecurrenceType; + const connectorConfig = { - connector: 'example', - service: 'krow-workforce', + connector: 'krow-connector', + service: 'krow-workforce-db', location: 'us-central1' }; exports.connectorConfig = connectorConfig; -const createMovieRef = (dcOrVars, vars) => { +const createEventRef = (dcOrVars, vars) => { const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'CreateMovie', inputVars); + return mutationRef(dcInstance, 'CreateEvent', inputVars); } -createMovieRef.operationName = 'CreateMovie'; -exports.createMovieRef = createMovieRef; +createEventRef.operationName = 'CreateEvent'; +exports.createEventRef = createEventRef; -exports.createMovie = function createMovie(dcOrVars, vars) { - return executeMutation(createMovieRef(dcOrVars, vars)); +exports.createEvent = function createEvent(dcOrVars, vars) { + return executeMutation(createEventRef(dcOrVars, vars)); }; -const upsertUserRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'UpsertUser', inputVars); -} -upsertUserRef.operationName = 'UpsertUser'; -exports.upsertUserRef = upsertUserRef; - -exports.upsertUser = function upsertUser(dcOrVars, vars) { - return executeMutation(upsertUserRef(dcOrVars, vars)); -}; - -const addReviewRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'AddReview', inputVars); -} -addReviewRef.operationName = 'AddReview'; -exports.addReviewRef = addReviewRef; - -exports.addReview = function addReview(dcOrVars, vars) { - return executeMutation(addReviewRef(dcOrVars, vars)); -}; - -const deleteReviewRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'DeleteReview', inputVars); -} -deleteReviewRef.operationName = 'DeleteReview'; -exports.deleteReviewRef = deleteReviewRef; - -exports.deleteReview = function deleteReview(dcOrVars, vars) { - return executeMutation(deleteReviewRef(dcOrVars, vars)); -}; - -const listMoviesRef = (dc) => { +const listEventsRef = (dc) => { const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'ListMovies'); + return queryRef(dcInstance, 'listEvents'); } -listMoviesRef.operationName = 'ListMovies'; -exports.listMoviesRef = listMoviesRef; +listEventsRef.operationName = 'listEvents'; +exports.listEventsRef = listEventsRef; -exports.listMovies = function listMovies(dc) { - return executeQuery(listMoviesRef(dc)); -}; - -const listUsersRef = (dc) => { - const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); - dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'ListUsers'); -} -listUsersRef.operationName = 'ListUsers'; -exports.listUsersRef = listUsersRef; - -exports.listUsers = function listUsers(dc) { - return executeQuery(listUsersRef(dc)); -}; - -const listUserReviewsRef = (dc) => { - const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); - dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'ListUserReviews'); -} -listUserReviewsRef.operationName = 'ListUserReviews'; -exports.listUserReviewsRef = listUserReviewsRef; - -exports.listUserReviews = function listUserReviews(dc) { - return executeQuery(listUserReviewsRef(dc)); -}; - -const getMovieByIdRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'GetMovieById', inputVars); -} -getMovieByIdRef.operationName = 'GetMovieById'; -exports.getMovieByIdRef = getMovieByIdRef; - -exports.getMovieById = function getMovieById(dcOrVars, vars) { - return executeQuery(getMovieByIdRef(dcOrVars, vars)); -}; - -const searchMovieRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars); - dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'SearchMovie', inputVars); -} -searchMovieRef.operationName = 'SearchMovie'; -exports.searchMovieRef = searchMovieRef; - -exports.searchMovie = function searchMovie(dcOrVars, vars) { - return executeQuery(searchMovieRef(dcOrVars, vars)); +exports.listEvents = function listEvents(dc) { + return executeQuery(listEventsRef(dc)); }; diff --git a/frontend-web/src/dataconnect-generated/index.d.ts b/frontend-web/src/dataconnect-generated/index.d.ts index 4a2f9d35..856ff493 100644 --- a/frontend-web/src/dataconnect-generated/index.d.ts +++ b/frontend-web/src/dataconnect-generated/index.d.ts @@ -8,243 +8,83 @@ export type Int64String = string; export type DateString = string; +export enum EventStatus { + DRAFT = "DRAFT", + ACTIVE = "ACTIVE", + PENDING = "PENDING", + ASSIGNED = "ASSIGNED", + CONFIRMED = "CONFIRMED", + COMPLETED = "COMPLETED", + CANCELED = "CANCELED", +}; + +export enum RecurrenceType { + SINGLE = "SINGLE", + DATE_RANGE = "DATE_RANGE", + SCATTER = "SCATTER", +}; -export interface AddReviewData { - review_upsert: Review_Key; + +export interface CreateEventData { + event_insert: Event_Key; } -export interface AddReviewVariables { - movieId: UUIDString; - rating: number; - reviewText: string; +export interface CreateEventVariables { + eventName: string; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + status: EventStatus; + date: TimestampString; + shifts?: string | null; + total?: number | null; + requested?: number | null; + assignedStaff?: string | null; } -export interface CreateMovieData { - movie_insert: Movie_Key; -} - -export interface CreateMovieVariables { - title: string; - genre: string; - imageUrl: string; -} - -export interface DeleteReviewData { - review_delete?: Review_Key | null; -} - -export interface DeleteReviewVariables { - movieId: UUIDString; -} - -export interface GetMovieByIdData { - movie?: { - id: UUIDString; - title: string; - imageUrl: string; - genre?: string | null; - metadata?: { - rating?: number | null; - releaseYear?: number | null; - description?: string | null; - }; - reviews: ({ - reviewText?: string | null; - reviewDate: DateString; - rating?: number | null; - user: { - id: string; - username: string; - } & User_Key; - })[]; - } & Movie_Key; -} - -export interface GetMovieByIdVariables { +export interface Event_Key { id: UUIDString; + __typename?: 'Event_Key'; } -export interface ListMoviesData { - movies: ({ +export interface ListEventsData { + events: ({ id: UUIDString; - title: string; - imageUrl: string; - genre?: string | null; - } & Movie_Key)[]; + eventName: string; + status: EventStatus; + date: TimestampString; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + total?: number | null; + requested?: number | null; + } & Event_Key)[]; } -export interface ListUserReviewsData { - user?: { - id: string; - username: string; - reviews: ({ - rating?: number | null; - reviewDate: DateString; - reviewText?: string | null; - movie: { - id: UUIDString; - title: string; - } & Movie_Key; - })[]; - } & User_Key; -} - -export interface ListUsersData { - users: ({ - id: string; - username: string; - } & User_Key)[]; -} - -export interface MovieMetadata_Key { - id: UUIDString; - __typename?: 'MovieMetadata_Key'; -} - -export interface Movie_Key { - id: UUIDString; - __typename?: 'Movie_Key'; -} - -export interface Review_Key { - userId: string; - movieId: UUIDString; - __typename?: 'Review_Key'; -} - -export interface SearchMovieData { - movies: ({ - id: UUIDString; - title: string; - genre?: string | null; - imageUrl: string; - } & Movie_Key)[]; -} - -export interface SearchMovieVariables { - titleInput?: string | null; - genre?: string | null; -} - -export interface UpsertUserData { - user_upsert: User_Key; -} - -export interface UpsertUserVariables { - username: string; -} - -export interface User_Key { - id: string; - __typename?: 'User_Key'; -} - -interface CreateMovieRef { +interface CreateEventRef { /* Allow users to create refs without passing in DataConnect */ - (vars: CreateMovieVariables): MutationRef; + (vars: CreateEventVariables): MutationRef; /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect, vars: CreateMovieVariables): MutationRef; + (dc: DataConnect, vars: CreateEventVariables): MutationRef; operationName: string; } -export const createMovieRef: CreateMovieRef; +export const createEventRef: CreateEventRef; -export function createMovie(vars: CreateMovieVariables): MutationPromise; -export function createMovie(dc: DataConnect, vars: CreateMovieVariables): MutationPromise; +export function createEvent(vars: CreateEventVariables): MutationPromise; +export function createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; -interface UpsertUserRef { +interface ListEventsRef { /* Allow users to create refs without passing in DataConnect */ - (vars: UpsertUserVariables): MutationRef; + (): QueryRef; /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect, vars: UpsertUserVariables): MutationRef; + (dc: DataConnect): QueryRef; operationName: string; } -export const upsertUserRef: UpsertUserRef; +export const listEventsRef: ListEventsRef; -export function upsertUser(vars: UpsertUserVariables): MutationPromise; -export function upsertUser(dc: DataConnect, vars: UpsertUserVariables): MutationPromise; - -interface AddReviewRef { - /* Allow users to create refs without passing in DataConnect */ - (vars: AddReviewVariables): MutationRef; - /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect, vars: AddReviewVariables): MutationRef; - operationName: string; -} -export const addReviewRef: AddReviewRef; - -export function addReview(vars: AddReviewVariables): MutationPromise; -export function addReview(dc: DataConnect, vars: AddReviewVariables): MutationPromise; - -interface DeleteReviewRef { - /* Allow users to create refs without passing in DataConnect */ - (vars: DeleteReviewVariables): MutationRef; - /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect, vars: DeleteReviewVariables): MutationRef; - operationName: string; -} -export const deleteReviewRef: DeleteReviewRef; - -export function deleteReview(vars: DeleteReviewVariables): MutationPromise; -export function deleteReview(dc: DataConnect, vars: DeleteReviewVariables): MutationPromise; - -interface ListMoviesRef { - /* Allow users to create refs without passing in DataConnect */ - (): QueryRef; - /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect): QueryRef; - operationName: string; -} -export const listMoviesRef: ListMoviesRef; - -export function listMovies(): QueryPromise; -export function listMovies(dc: DataConnect): QueryPromise; - -interface ListUsersRef { - /* Allow users to create refs without passing in DataConnect */ - (): QueryRef; - /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect): QueryRef; - operationName: string; -} -export const listUsersRef: ListUsersRef; - -export function listUsers(): QueryPromise; -export function listUsers(dc: DataConnect): QueryPromise; - -interface ListUserReviewsRef { - /* Allow users to create refs without passing in DataConnect */ - (): QueryRef; - /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect): QueryRef; - operationName: string; -} -export const listUserReviewsRef: ListUserReviewsRef; - -export function listUserReviews(): QueryPromise; -export function listUserReviews(dc: DataConnect): QueryPromise; - -interface GetMovieByIdRef { - /* Allow users to create refs without passing in DataConnect */ - (vars: GetMovieByIdVariables): QueryRef; - /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect, vars: GetMovieByIdVariables): QueryRef; - operationName: string; -} -export const getMovieByIdRef: GetMovieByIdRef; - -export function getMovieById(vars: GetMovieByIdVariables): QueryPromise; -export function getMovieById(dc: DataConnect, vars: GetMovieByIdVariables): QueryPromise; - -interface SearchMovieRef { - /* Allow users to create refs without passing in DataConnect */ - (vars?: SearchMovieVariables): QueryRef; - /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect, vars?: SearchMovieVariables): QueryRef; - operationName: string; -} -export const searchMovieRef: SearchMovieRef; - -export function searchMovie(vars?: SearchMovieVariables): QueryPromise; -export function searchMovie(dc: DataConnect, vars?: SearchMovieVariables): QueryPromise; +export function listEvents(): QueryPromise; +export function listEvents(dc: DataConnect): QueryPromise; diff --git a/frontend-web/src/dataconnect-generated/package.json b/frontend-web/src/dataconnect-generated/package.json index 82c276dc..b686c0a0 100644 --- a/frontend-web/src/dataconnect-generated/package.json +++ b/frontend-web/src/dataconnect-generated/package.json @@ -2,7 +2,7 @@ "name": "@dataconnect/generated", "version": "1.0.0", "author": "Firebase (https://firebase.google.com/)", - "description": "Generated SDK For example", + "description": "Generated SDK For krow-connector", "license": "Apache-2.0", "engines": { "node": " >=18.0" diff --git a/frontend-web/src/dataconnect-generated/react/README.md b/frontend-web/src/dataconnect-generated/react/README.md index f9880e6d..24b8cec3 100644 --- a/frontend-web/src/dataconnect-generated/react/README.md +++ b/frontend-web/src/dataconnect-generated/react/README.md @@ -1,5 +1,5 @@ # Generated React README -This README will guide you through the process of using the generated React SDK package for the connector `example`. It will also provide examples on how to use your generated SDK to call your Data Connect queries and mutations. +This README will guide you through the process of using the generated React SDK package for the connector `krow-connector`. It will also provide examples on how to use your generated SDK to call your Data Connect queries and mutations. **If you're looking for the `JavaScript README`, you can find it at [`dataconnect-generated/README.md`](../README.md)** @@ -17,19 +17,12 @@ You can also follow the instructions from the [Data Connect documentation](https - [**Accessing the connector**](#accessing-the-connector) - [*Connecting to the local Emulator*](#connecting-to-the-local-emulator) - [**Queries**](#queries) - - [*ListMovies*](#listmovies) - - [*ListUsers*](#listusers) - - [*ListUserReviews*](#listuserreviews) - - [*GetMovieById*](#getmoviebyid) - - [*SearchMovie*](#searchmovie) + - [*listEvents*](#listevents) - [**Mutations**](#mutations) - - [*CreateMovie*](#createmovie) - - [*UpsertUser*](#upsertuser) - - [*AddReview*](#addreview) - - [*DeleteReview*](#deletereview) + - [*CreateEvent*](#createevent) # TanStack Query Firebase & TanStack React Query -This SDK provides [React](https://react.dev/) hooks generated specific to your application, for the operations found in the connector `example`. These hooks are generated using [TanStack Query Firebase](https://react-query-firebase.invertase.dev/) by our partners at Invertase, a library built on top of [TanStack React Query v5](https://tanstack.com/query/v5/docs/framework/react/overview). +This SDK provides [React](https://react.dev/) hooks generated specific to your application, for the operations found in the connector `krow-connector`. These hooks are generated using [TanStack Query Firebase](https://react-query-firebase.invertase.dev/) by our partners at Invertase, a library built on top of [TanStack React Query v5](https://tanstack.com/query/v5/docs/framework/react/overview). ***You do not need to be familiar with Tanstack Query or Tanstack Query Firebase to use this SDK.*** However, you may find it useful to learn more about them, as they will empower you as a user of this Generated React SDK. @@ -66,7 +59,7 @@ function App() { To learn more about `QueryClientProvider`, see the [TanStack React Query documentation](https://tanstack.com/query/latest/docs/framework/react/quick-start) and the [TanStack Query Firebase documentation](https://invertase.docs.page/tanstack-query-firebase/react#usage). # Accessing the connector -A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector `example`. +A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector `krow-connector`. You can find more information about connectors in the [Data Connect documentation](https://firebase.google.com/docs/data-connect#how-does). @@ -116,64 +109,70 @@ Here's a general overview of how to use the generated Query hooks in your code: - Query hooks functions can be called with or without passing in an `options` argument of type `useDataConnectQueryOptions`. To learn more about the `options` argument, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/query-options). - ***Special case:*** If the Query has all optional variables and you would like to provide an `options` argument to the Query hook function without providing any variables, you must pass `undefined` where you would normally pass the Query's variables, and then may provide the `options` argument. -Below are examples of how to use the `example` connector's generated Query hook functions to execute each Query. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular). +Below are examples of how to use the `krow-connector` connector's generated Query hook functions to execute each Query. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular). -## ListMovies -You can execute the `ListMovies` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts): +## listEvents +You can execute the `listEvents` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts): ```javascript -useListMovies(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; +useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; ``` You can also pass in a `DataConnect` instance to the Query hook function. ```javascript -useListMovies(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; +useListEvents(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; ``` ### Variables -The `ListMovies` Query has no variables. +The `listEvents` Query has no variables. ### Return Type -Recall that calling the `ListMovies` Query hook function returns a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things. +Recall that calling the `listEvents` Query hook function returns a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things. To check the status of a Query, use the `UseQueryResult.status` field. You can also check for pending / success / error status using the `UseQueryResult.isPending`, `UseQueryResult.isSuccess`, and `UseQueryResult.isError` fields. -To access the data returned by a Query, use the `UseQueryResult.data` field. The data for the `ListMovies` Query is of type `ListMoviesData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: +To access the data returned by a Query, use the `UseQueryResult.data` field. The data for the `listEvents` Query is of type `ListEventsData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: ```javascript -export interface ListMoviesData { - movies: ({ +export interface ListEventsData { + events: ({ id: UUIDString; - title: string; - imageUrl: string; - genre?: string | null; - } & Movie_Key)[]; + eventName: string; + status: EventStatus; + date: TimestampString; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + total?: number | null; + requested?: number | null; + } & Event_Key)[]; } ``` To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery). -### Using `ListMovies`'s Query hook function +### Using `listEvents`'s Query hook function ```javascript import { getDataConnect } from 'firebase/data-connect'; import { connectorConfig } from '@dataconnect/generated'; -import { useListMovies } from '@dataconnect/generated/react' +import { useListEvents } from '@dataconnect/generated/react' -export default function ListMoviesComponent() { +export default function ListEventsComponent() { // You don't have to do anything to "execute" the Query. // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query. - const query = useListMovies(); + const query = useListEvents(); // You can also pass in a `DataConnect` instance to the Query hook function. const dataConnect = getDataConnect(connectorConfig); - const query = useListMovies(dataConnect); + const query = useListEvents(dataConnect); // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function. const options = { staleTime: 5 * 1000 }; - const query = useListMovies(options); + const query = useListEvents(options); // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object. const dataConnect = getDataConnect(connectorConfig); const options = { staleTime: 5 * 1000 }; - const query = useListMovies(dataConnect, options); + const query = useListEvents(dataConnect, options); // Then, you can render your component dynamically based on the status of the Query. if (query.isPending) { @@ -186,356 +185,7 @@ export default function ListMoviesComponent() { // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field. if (query.isSuccess) { - console.log(query.data.movies); - } - return
Query execution {query.isSuccess ? 'successful' : 'failed'}!
; -} -``` - -## ListUsers -You can execute the `ListUsers` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts): - -```javascript -useListUsers(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -``` -You can also pass in a `DataConnect` instance to the Query hook function. -```javascript -useListUsers(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -``` - -### Variables -The `ListUsers` Query has no variables. -### Return Type -Recall that calling the `ListUsers` Query hook function returns a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things. - -To check the status of a Query, use the `UseQueryResult.status` field. You can also check for pending / success / error status using the `UseQueryResult.isPending`, `UseQueryResult.isSuccess`, and `UseQueryResult.isError` fields. - -To access the data returned by a Query, use the `UseQueryResult.data` field. The data for the `ListUsers` Query is of type `ListUsersData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: -```javascript -export interface ListUsersData { - users: ({ - id: string; - username: string; - } & User_Key)[]; -} -``` - -To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery). - -### Using `ListUsers`'s Query hook function - -```javascript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig } from '@dataconnect/generated'; -import { useListUsers } from '@dataconnect/generated/react' - -export default function ListUsersComponent() { - // You don't have to do anything to "execute" the Query. - // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query. - const query = useListUsers(); - - // You can also pass in a `DataConnect` instance to the Query hook function. - const dataConnect = getDataConnect(connectorConfig); - const query = useListUsers(dataConnect); - - // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function. - const options = { staleTime: 5 * 1000 }; - const query = useListUsers(options); - - // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object. - const dataConnect = getDataConnect(connectorConfig); - const options = { staleTime: 5 * 1000 }; - const query = useListUsers(dataConnect, options); - - // Then, you can render your component dynamically based on the status of the Query. - if (query.isPending) { - return
Loading...
; - } - - if (query.isError) { - return
Error: {query.error.message}
; - } - - // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field. - if (query.isSuccess) { - console.log(query.data.users); - } - return
Query execution {query.isSuccess ? 'successful' : 'failed'}!
; -} -``` - -## ListUserReviews -You can execute the `ListUserReviews` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts): - -```javascript -useListUserReviews(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -``` -You can also pass in a `DataConnect` instance to the Query hook function. -```javascript -useListUserReviews(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -``` - -### Variables -The `ListUserReviews` Query has no variables. -### Return Type -Recall that calling the `ListUserReviews` Query hook function returns a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things. - -To check the status of a Query, use the `UseQueryResult.status` field. You can also check for pending / success / error status using the `UseQueryResult.isPending`, `UseQueryResult.isSuccess`, and `UseQueryResult.isError` fields. - -To access the data returned by a Query, use the `UseQueryResult.data` field. The data for the `ListUserReviews` Query is of type `ListUserReviewsData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: -```javascript -export interface ListUserReviewsData { - user?: { - id: string; - username: string; - reviews: ({ - rating?: number | null; - reviewDate: DateString; - reviewText?: string | null; - movie: { - id: UUIDString; - title: string; - } & Movie_Key; - })[]; - } & User_Key; -} -``` - -To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery). - -### Using `ListUserReviews`'s Query hook function - -```javascript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig } from '@dataconnect/generated'; -import { useListUserReviews } from '@dataconnect/generated/react' - -export default function ListUserReviewsComponent() { - // You don't have to do anything to "execute" the Query. - // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query. - const query = useListUserReviews(); - - // You can also pass in a `DataConnect` instance to the Query hook function. - const dataConnect = getDataConnect(connectorConfig); - const query = useListUserReviews(dataConnect); - - // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function. - const options = { staleTime: 5 * 1000 }; - const query = useListUserReviews(options); - - // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object. - const dataConnect = getDataConnect(connectorConfig); - const options = { staleTime: 5 * 1000 }; - const query = useListUserReviews(dataConnect, options); - - // Then, you can render your component dynamically based on the status of the Query. - if (query.isPending) { - return
Loading...
; - } - - if (query.isError) { - return
Error: {query.error.message}
; - } - - // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field. - if (query.isSuccess) { - console.log(query.data.user); - } - return
Query execution {query.isSuccess ? 'successful' : 'failed'}!
; -} -``` - -## GetMovieById -You can execute the `GetMovieById` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts): - -```javascript -useGetMovieById(dc: DataConnect, vars: GetMovieByIdVariables, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -``` -You can also pass in a `DataConnect` instance to the Query hook function. -```javascript -useGetMovieById(vars: GetMovieByIdVariables, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -``` - -### Variables -The `GetMovieById` Query requires an argument of type `GetMovieByIdVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: - -```javascript -export interface GetMovieByIdVariables { - id: UUIDString; -} -``` -### Return Type -Recall that calling the `GetMovieById` Query hook function returns a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things. - -To check the status of a Query, use the `UseQueryResult.status` field. You can also check for pending / success / error status using the `UseQueryResult.isPending`, `UseQueryResult.isSuccess`, and `UseQueryResult.isError` fields. - -To access the data returned by a Query, use the `UseQueryResult.data` field. The data for the `GetMovieById` Query is of type `GetMovieByIdData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: -```javascript -export interface GetMovieByIdData { - movie?: { - id: UUIDString; - title: string; - imageUrl: string; - genre?: string | null; - metadata?: { - rating?: number | null; - releaseYear?: number | null; - description?: string | null; - }; - reviews: ({ - reviewText?: string | null; - reviewDate: DateString; - rating?: number | null; - user: { - id: string; - username: string; - } & User_Key; - })[]; - } & Movie_Key; -} -``` - -To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery). - -### Using `GetMovieById`'s Query hook function - -```javascript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, GetMovieByIdVariables } from '@dataconnect/generated'; -import { useGetMovieById } from '@dataconnect/generated/react' - -export default function GetMovieByIdComponent() { - // The `useGetMovieById` Query hook requires an argument of type `GetMovieByIdVariables`: - const getMovieByIdVars: GetMovieByIdVariables = { - id: ..., - }; - - // You don't have to do anything to "execute" the Query. - // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query. - const query = useGetMovieById(getMovieByIdVars); - // Variables can be defined inline as well. - const query = useGetMovieById({ id: ..., }); - - // You can also pass in a `DataConnect` instance to the Query hook function. - const dataConnect = getDataConnect(connectorConfig); - const query = useGetMovieById(dataConnect, getMovieByIdVars); - - // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function. - const options = { staleTime: 5 * 1000 }; - const query = useGetMovieById(getMovieByIdVars, options); - - // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object. - const dataConnect = getDataConnect(connectorConfig); - const options = { staleTime: 5 * 1000 }; - const query = useGetMovieById(dataConnect, getMovieByIdVars, options); - - // Then, you can render your component dynamically based on the status of the Query. - if (query.isPending) { - return
Loading...
; - } - - if (query.isError) { - return
Error: {query.error.message}
; - } - - // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field. - if (query.isSuccess) { - console.log(query.data.movie); - } - return
Query execution {query.isSuccess ? 'successful' : 'failed'}!
; -} -``` - -## SearchMovie -You can execute the `SearchMovie` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts): - -```javascript -useSearchMovie(dc: DataConnect, vars?: SearchMovieVariables, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -``` -You can also pass in a `DataConnect` instance to the Query hook function. -```javascript -useSearchMovie(vars?: SearchMovieVariables, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -``` - -### Variables -The `SearchMovie` Query has an optional argument of type `SearchMovieVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: - -```javascript -export interface SearchMovieVariables { - titleInput?: string | null; - genre?: string | null; -} -``` -### Return Type -Recall that calling the `SearchMovie` Query hook function returns a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things. - -To check the status of a Query, use the `UseQueryResult.status` field. You can also check for pending / success / error status using the `UseQueryResult.isPending`, `UseQueryResult.isSuccess`, and `UseQueryResult.isError` fields. - -To access the data returned by a Query, use the `UseQueryResult.data` field. The data for the `SearchMovie` Query is of type `SearchMovieData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: -```javascript -export interface SearchMovieData { - movies: ({ - id: UUIDString; - title: string; - genre?: string | null; - imageUrl: string; - } & Movie_Key)[]; -} -``` - -To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery). - -### Using `SearchMovie`'s Query hook function - -```javascript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, SearchMovieVariables } from '@dataconnect/generated'; -import { useSearchMovie } from '@dataconnect/generated/react' - -export default function SearchMovieComponent() { - // The `useSearchMovie` Query hook has an optional argument of type `SearchMovieVariables`: - const searchMovieVars: SearchMovieVariables = { - titleInput: ..., // optional - genre: ..., // optional - }; - - // You don't have to do anything to "execute" the Query. - // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query. - const query = useSearchMovie(searchMovieVars); - // Variables can be defined inline as well. - const query = useSearchMovie({ titleInput: ..., genre: ..., }); - // Since all variables are optional for this Query, you can omit the `SearchMovieVariables` argument. - // (as long as you don't want to provide any `options`!) - const query = useSearchMovie(); - - // You can also pass in a `DataConnect` instance to the Query hook function. - const dataConnect = getDataConnect(connectorConfig); - const query = useSearchMovie(dataConnect, searchMovieVars); - - // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function. - const options = { staleTime: 5 * 1000 }; - const query = useSearchMovie(searchMovieVars, options); - // If you'd like to provide options without providing any variables, you must - // pass `undefined` where you would normally pass the variables. - const query = useSearchMovie(undefined, options); - - // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object. - const dataConnect = getDataConnect(connectorConfig); - const options = { staleTime: 5 * 1000 }; - const query = useSearchMovie(dataConnect, searchMovieVars /** or undefined */, options); - - // Then, you can render your component dynamically based on the status of the Query. - if (query.isPending) { - return
Loading...
; - } - - if (query.isError) { - return
Error: {query.error.message}
; - } - - // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field. - if (query.isSuccess) { - console.log(query.data.movies); + console.log(query.data.events); } return
Query execution {query.isSuccess ? 'successful' : 'failed'}!
; } @@ -564,88 +214,104 @@ Here's a general overview of how to use the generated Mutation hooks in your cod - `UseMutationResult.mutate()` also accepts an `options` argument of type `useDataConnectMutationOptions`. - ***Special case:*** If the Mutation has no arguments (or all optional arguments and you wish to provide none), and you want to pass `options` to `UseMutationResult.mutate()`, you must pass `undefined` where you would normally pass the Mutation's arguments, and then may provide the options argument. -Below are examples of how to use the `example` connector's generated Mutation hook functions to execute each Mutation. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular). +Below are examples of how to use the `krow-connector` connector's generated Mutation hook functions to execute each Mutation. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular). -## CreateMovie -You can execute the `CreateMovie` Mutation using the `UseMutationResult` object returned by the following Mutation hook function (which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts)): +## CreateEvent +You can execute the `CreateEvent` Mutation using the `UseMutationResult` object returned by the following Mutation hook function (which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts)): ```javascript -useCreateMovie(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; ``` You can also pass in a `DataConnect` instance to the Mutation hook function. ```javascript -useCreateMovie(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; ``` ### Variables -The `CreateMovie` Mutation requires an argument of type `CreateMovieVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: +The `CreateEvent` Mutation requires an argument of type `CreateEventVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: ```javascript -export interface CreateMovieVariables { - title: string; - genre: string; - imageUrl: string; +export interface CreateEventVariables { + eventName: string; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + status: EventStatus; + date: TimestampString; + shifts?: string | null; + total?: number | null; + requested?: number | null; + assignedStaff?: string | null; } ``` ### Return Type -Recall that calling the `CreateMovie` Mutation hook function returns a `UseMutationResult` object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things. +Recall that calling the `CreateEvent` Mutation hook function returns a `UseMutationResult` object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things. To check the status of a Mutation, use the `UseMutationResult.status` field. You can also check for pending / success / error status using the `UseMutationResult.isPending`, `UseMutationResult.isSuccess`, and `UseMutationResult.isError` fields. To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation. -To access the data returned by a Mutation, use the `UseMutationResult.data` field. The data for the `CreateMovie` Mutation is of type `CreateMovieData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: +To access the data returned by a Mutation, use the `UseMutationResult.data` field. The data for the `CreateEvent` Mutation is of type `CreateEventData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: ```javascript -export interface CreateMovieData { - movie_insert: Movie_Key; +export interface CreateEventData { + event_insert: Event_Key; } ``` To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation). -### Using `CreateMovie`'s Mutation hook function +### Using `CreateEvent`'s Mutation hook function ```javascript import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, CreateMovieVariables } from '@dataconnect/generated'; -import { useCreateMovie } from '@dataconnect/generated/react' +import { connectorConfig, CreateEventVariables } from '@dataconnect/generated'; +import { useCreateEvent } from '@dataconnect/generated/react' -export default function CreateMovieComponent() { +export default function CreateEventComponent() { // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation. - const mutation = useCreateMovie(); + const mutation = useCreateEvent(); // You can also pass in a `DataConnect` instance to the Mutation hook function. const dataConnect = getDataConnect(connectorConfig); - const mutation = useCreateMovie(dataConnect); + const mutation = useCreateEvent(dataConnect); // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function. const options = { onSuccess: () => { console.log('Mutation succeeded!'); } }; - const mutation = useCreateMovie(options); + const mutation = useCreateEvent(options); // You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object. const dataConnect = getDataConnect(connectorConfig); const options = { onSuccess: () => { console.log('Mutation succeeded!'); } }; - const mutation = useCreateMovie(dataConnect, options); + const mutation = useCreateEvent(dataConnect, options); // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation. - // The `useCreateMovie` Mutation requires an argument of type `CreateMovieVariables`: - const createMovieVars: CreateMovieVariables = { - title: ..., - genre: ..., - imageUrl: ..., + // The `useCreateEvent` Mutation requires an argument of type `CreateEventVariables`: + const createEventVars: CreateEventVariables = { + eventName: ..., + isRecurring: ..., + recurrenceType: ..., // optional + businessId: ..., + vendorId: ..., // optional + status: ..., + date: ..., + shifts: ..., // optional + total: ..., // optional + requested: ..., // optional + assignedStaff: ..., // optional }; - mutation.mutate(createMovieVars); + mutation.mutate(createEventVars); // Variables can be defined inline as well. - mutation.mutate({ title: ..., genre: ..., imageUrl: ..., }); + mutation.mutate({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`. const options = { onSuccess: () => { console.log('Mutation succeeded!'); } }; - mutation.mutate(createMovieVars, options); + mutation.mutate(createEventVars, options); // Then, you can render your component dynamically based on the status of the Mutation. if (mutation.isPending) { @@ -658,293 +324,7 @@ export default function CreateMovieComponent() { // If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field. if (mutation.isSuccess) { - console.log(mutation.data.movie_insert); - } - return
Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!
; -} -``` - -## UpsertUser -You can execute the `UpsertUser` Mutation using the `UseMutationResult` object returned by the following Mutation hook function (which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts)): -```javascript -useUpsertUser(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -``` -You can also pass in a `DataConnect` instance to the Mutation hook function. -```javascript -useUpsertUser(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -``` - -### Variables -The `UpsertUser` Mutation requires an argument of type `UpsertUserVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: - -```javascript -export interface UpsertUserVariables { - username: string; -} -``` -### Return Type -Recall that calling the `UpsertUser` Mutation hook function returns a `UseMutationResult` object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things. - -To check the status of a Mutation, use the `UseMutationResult.status` field. You can also check for pending / success / error status using the `UseMutationResult.isPending`, `UseMutationResult.isSuccess`, and `UseMutationResult.isError` fields. - -To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation. - -To access the data returned by a Mutation, use the `UseMutationResult.data` field. The data for the `UpsertUser` Mutation is of type `UpsertUserData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: -```javascript -export interface UpsertUserData { - user_upsert: User_Key; -} -``` - -To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation). - -### Using `UpsertUser`'s Mutation hook function - -```javascript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, UpsertUserVariables } from '@dataconnect/generated'; -import { useUpsertUser } from '@dataconnect/generated/react' - -export default function UpsertUserComponent() { - // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation. - const mutation = useUpsertUser(); - - // You can also pass in a `DataConnect` instance to the Mutation hook function. - const dataConnect = getDataConnect(connectorConfig); - const mutation = useUpsertUser(dataConnect); - - // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function. - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - const mutation = useUpsertUser(options); - - // You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object. - const dataConnect = getDataConnect(connectorConfig); - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - const mutation = useUpsertUser(dataConnect, options); - - // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation. - // The `useUpsertUser` Mutation requires an argument of type `UpsertUserVariables`: - const upsertUserVars: UpsertUserVariables = { - username: ..., - }; - mutation.mutate(upsertUserVars); - // Variables can be defined inline as well. - mutation.mutate({ username: ..., }); - - // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`. - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - mutation.mutate(upsertUserVars, options); - - // Then, you can render your component dynamically based on the status of the Mutation. - if (mutation.isPending) { - return
Loading...
; - } - - if (mutation.isError) { - return
Error: {mutation.error.message}
; - } - - // If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field. - if (mutation.isSuccess) { - console.log(mutation.data.user_upsert); - } - return
Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!
; -} -``` - -## AddReview -You can execute the `AddReview` Mutation using the `UseMutationResult` object returned by the following Mutation hook function (which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts)): -```javascript -useAddReview(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -``` -You can also pass in a `DataConnect` instance to the Mutation hook function. -```javascript -useAddReview(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -``` - -### Variables -The `AddReview` Mutation requires an argument of type `AddReviewVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: - -```javascript -export interface AddReviewVariables { - movieId: UUIDString; - rating: number; - reviewText: string; -} -``` -### Return Type -Recall that calling the `AddReview` Mutation hook function returns a `UseMutationResult` object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things. - -To check the status of a Mutation, use the `UseMutationResult.status` field. You can also check for pending / success / error status using the `UseMutationResult.isPending`, `UseMutationResult.isSuccess`, and `UseMutationResult.isError` fields. - -To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation. - -To access the data returned by a Mutation, use the `UseMutationResult.data` field. The data for the `AddReview` Mutation is of type `AddReviewData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: -```javascript -export interface AddReviewData { - review_upsert: Review_Key; -} -``` - -To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation). - -### Using `AddReview`'s Mutation hook function - -```javascript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, AddReviewVariables } from '@dataconnect/generated'; -import { useAddReview } from '@dataconnect/generated/react' - -export default function AddReviewComponent() { - // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation. - const mutation = useAddReview(); - - // You can also pass in a `DataConnect` instance to the Mutation hook function. - const dataConnect = getDataConnect(connectorConfig); - const mutation = useAddReview(dataConnect); - - // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function. - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - const mutation = useAddReview(options); - - // You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object. - const dataConnect = getDataConnect(connectorConfig); - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - const mutation = useAddReview(dataConnect, options); - - // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation. - // The `useAddReview` Mutation requires an argument of type `AddReviewVariables`: - const addReviewVars: AddReviewVariables = { - movieId: ..., - rating: ..., - reviewText: ..., - }; - mutation.mutate(addReviewVars); - // Variables can be defined inline as well. - mutation.mutate({ movieId: ..., rating: ..., reviewText: ..., }); - - // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`. - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - mutation.mutate(addReviewVars, options); - - // Then, you can render your component dynamically based on the status of the Mutation. - if (mutation.isPending) { - return
Loading...
; - } - - if (mutation.isError) { - return
Error: {mutation.error.message}
; - } - - // If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field. - if (mutation.isSuccess) { - console.log(mutation.data.review_upsert); - } - return
Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!
; -} -``` - -## DeleteReview -You can execute the `DeleteReview` Mutation using the `UseMutationResult` object returned by the following Mutation hook function (which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts)): -```javascript -useDeleteReview(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -``` -You can also pass in a `DataConnect` instance to the Mutation hook function. -```javascript -useDeleteReview(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -``` - -### Variables -The `DeleteReview` Mutation requires an argument of type `DeleteReviewVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: - -```javascript -export interface DeleteReviewVariables { - movieId: UUIDString; -} -``` -### Return Type -Recall that calling the `DeleteReview` Mutation hook function returns a `UseMutationResult` object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things. - -To check the status of a Mutation, use the `UseMutationResult.status` field. You can also check for pending / success / error status using the `UseMutationResult.isPending`, `UseMutationResult.isSuccess`, and `UseMutationResult.isError` fields. - -To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation. - -To access the data returned by a Mutation, use the `UseMutationResult.data` field. The data for the `DeleteReview` Mutation is of type `DeleteReviewData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: -```javascript -export interface DeleteReviewData { - review_delete?: Review_Key | null; -} -``` - -To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation). - -### Using `DeleteReview`'s Mutation hook function - -```javascript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, DeleteReviewVariables } from '@dataconnect/generated'; -import { useDeleteReview } from '@dataconnect/generated/react' - -export default function DeleteReviewComponent() { - // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation. - const mutation = useDeleteReview(); - - // You can also pass in a `DataConnect` instance to the Mutation hook function. - const dataConnect = getDataConnect(connectorConfig); - const mutation = useDeleteReview(dataConnect); - - // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function. - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - const mutation = useDeleteReview(options); - - // You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object. - const dataConnect = getDataConnect(connectorConfig); - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - const mutation = useDeleteReview(dataConnect, options); - - // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation. - // The `useDeleteReview` Mutation requires an argument of type `DeleteReviewVariables`: - const deleteReviewVars: DeleteReviewVariables = { - movieId: ..., - }; - mutation.mutate(deleteReviewVars); - // Variables can be defined inline as well. - mutation.mutate({ movieId: ..., }); - - // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`. - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - mutation.mutate(deleteReviewVars, options); - - // Then, you can render your component dynamically based on the status of the Mutation. - if (mutation.isPending) { - return
Loading...
; - } - - if (mutation.isError) { - return
Error: {mutation.error.message}
; - } - - // If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field. - if (mutation.isSuccess) { - console.log(mutation.data.review_delete); + console.log(mutation.data.event_insert); } return
Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!
; } diff --git a/frontend-web/src/dataconnect-generated/react/esm/index.esm.js b/frontend-web/src/dataconnect-generated/react/esm/index.esm.js index 5f74e444..3463a0fa 100644 --- a/frontend-web/src/dataconnect-generated/react/esm/index.esm.js +++ b/frontend-web/src/dataconnect-generated/react/esm/index.esm.js @@ -1,66 +1,18 @@ -import { createMovieRef, upsertUserRef, addReviewRef, deleteReviewRef, listMoviesRef, listUsersRef, listUserReviewsRef, getMovieByIdRef, searchMovieRef, connectorConfig } from '../../esm/index.esm.js'; +import { createEventRef, listEventsRef, connectorConfig } from '../../esm/index.esm.js'; import { validateArgs, CallerSdkTypeEnum } from 'firebase/data-connect'; import { useDataConnectQuery, useDataConnectMutation, validateReactArgs } from '@tanstack-query-firebase/react/data-connect'; -export function useCreateMovie(dcOrOptions, options) { +export function useCreateEvent(dcOrOptions, options) { const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); function refFactory(vars) { - return createMovieRef(dcInstance, vars); - } - return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -export function useUpsertUser(dcOrOptions, options) { - const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); - function refFactory(vars) { - return upsertUserRef(dcInstance, vars); - } - return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -export function useAddReview(dcOrOptions, options) { - const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); - function refFactory(vars) { - return addReviewRef(dcInstance, vars); - } - return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -export function useDeleteReview(dcOrOptions, options) { - const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); - function refFactory(vars) { - return deleteReviewRef(dcInstance, vars); + return createEventRef(dcInstance, vars); } return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); } -export function useListMovies(dcOrOptions, options) { +export function useListEvents(dcOrOptions, options) { const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listMoviesRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -export function useListUsers(dcOrOptions, options) { - const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listUsersRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -export function useListUserReviews(dcOrOptions, options) { - const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listUserReviewsRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -export function useGetMovieById(dcOrVars, varsOrOptions, options) { - const { dc: dcInstance, vars: inputVars, options: inputOpts } = validateReactArgs(connectorConfig, dcOrVars, varsOrOptions, options, true, true); - const ref = getMovieByIdRef(dcInstance, inputVars); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -export function useSearchMovie(dcOrVars, varsOrOptions, options) { - const { dc: dcInstance, vars: inputVars, options: inputOpts } = validateReactArgs(connectorConfig, dcOrVars, varsOrOptions, options, true, false); - const ref = searchMovieRef(dcInstance, inputVars); + const ref = listEventsRef(dcInstance); return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); } \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/index.cjs.js b/frontend-web/src/dataconnect-generated/react/index.cjs.js index 26187b19..52b5314b 100644 --- a/frontend-web/src/dataconnect-generated/react/index.cjs.js +++ b/frontend-web/src/dataconnect-generated/react/index.cjs.js @@ -1,66 +1,18 @@ -const { createMovieRef, upsertUserRef, addReviewRef, deleteReviewRef, listMoviesRef, listUsersRef, listUserReviewsRef, getMovieByIdRef, searchMovieRef, connectorConfig } = require('../index.cjs.js'); +const { createEventRef, listEventsRef, connectorConfig } = require('../index.cjs.js'); const { validateArgs, CallerSdkTypeEnum } = require('firebase/data-connect'); const { useDataConnectQuery, useDataConnectMutation, validateReactArgs } = require('@tanstack-query-firebase/react/data-connect'); -exports.useCreateMovie = function useCreateMovie(dcOrOptions, options) { +exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) { const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); function refFactory(vars) { - return createMovieRef(dcInstance, vars); - } - return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -exports.useUpsertUser = function useUpsertUser(dcOrOptions, options) { - const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); - function refFactory(vars) { - return upsertUserRef(dcInstance, vars); - } - return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -exports.useAddReview = function useAddReview(dcOrOptions, options) { - const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); - function refFactory(vars) { - return addReviewRef(dcInstance, vars); - } - return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -exports.useDeleteReview = function useDeleteReview(dcOrOptions, options) { - const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); - function refFactory(vars) { - return deleteReviewRef(dcInstance, vars); + return createEventRef(dcInstance, vars); } return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); } -exports.useListMovies = function useListMovies(dcOrOptions, options) { +exports.useListEvents = function useListEvents(dcOrOptions, options) { const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listMoviesRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -exports.useListUsers = function useListUsers(dcOrOptions, options) { - const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listUsersRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -exports.useListUserReviews = function useListUserReviews(dcOrOptions, options) { - const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listUserReviewsRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -exports.useGetMovieById = function useGetMovieById(dcOrVars, varsOrOptions, options) { - const { dc: dcInstance, vars: inputVars, options: inputOpts } = validateReactArgs(connectorConfig, dcOrVars, varsOrOptions, options, true, true); - const ref = getMovieByIdRef(dcInstance, inputVars); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - -exports.useSearchMovie = function useSearchMovie(dcOrVars, varsOrOptions, options) { - const { dc: dcInstance, vars: inputVars, options: inputOpts } = validateReactArgs(connectorConfig, dcOrVars, varsOrOptions, options, true, false); - const ref = searchMovieRef(dcInstance, inputVars); + const ref = listEventsRef(dcInstance); return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); } \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/index.d.ts b/frontend-web/src/dataconnect-generated/react/index.d.ts index b868c4dd..cab1da38 100644 --- a/frontend-web/src/dataconnect-generated/react/index.d.ts +++ b/frontend-web/src/dataconnect-generated/react/index.d.ts @@ -1,33 +1,12 @@ -import { CreateMovieData, CreateMovieVariables, UpsertUserData, UpsertUserVariables, AddReviewData, AddReviewVariables, DeleteReviewData, DeleteReviewVariables, ListMoviesData, ListUsersData, ListUserReviewsData, GetMovieByIdData, GetMovieByIdVariables, SearchMovieData, SearchMovieVariables } from '../'; +import { CreateEventData, CreateEventVariables, ListEventsData } from '../'; import { UseDataConnectQueryResult, useDataConnectQueryOptions, UseDataConnectMutationResult, useDataConnectMutationOptions} from '@tanstack-query-firebase/react/data-connect'; import { UseQueryResult, UseMutationResult} from '@tanstack/react-query'; import { DataConnect } from 'firebase/data-connect'; import { FirebaseError } from 'firebase/app'; -export function useCreateMovie(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -export function useCreateMovie(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +export function useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +export function useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -export function useUpsertUser(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -export function useUpsertUser(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; - -export function useAddReview(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -export function useAddReview(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; - -export function useDeleteReview(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -export function useDeleteReview(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; - -export function useListMovies(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -export function useListMovies(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; - -export function useListUsers(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -export function useListUsers(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; - -export function useListUserReviews(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -export function useListUserReviews(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; - -export function useGetMovieById(vars: GetMovieByIdVariables, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -export function useGetMovieById(dc: DataConnect, vars: GetMovieByIdVariables, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; - -export function useSearchMovie(vars?: SearchMovieVariables, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -export function useSearchMovie(dc: DataConnect, vars?: SearchMovieVariables, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; +export function useListEvents(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; +export function useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; diff --git a/frontend-web/src/dataconnect-generated/react/package.json b/frontend-web/src/dataconnect-generated/react/package.json index 33f923ed..512c7ec3 100644 --- a/frontend-web/src/dataconnect-generated/react/package.json +++ b/frontend-web/src/dataconnect-generated/react/package.json @@ -2,7 +2,7 @@ "name": "@dataconnect/generated-react", "version": "1.0.0", "author": "Firebase (https://firebase.google.com/)", - "description": "Generated SDK For example", + "description": "Generated SDK For krow-connector", "license": "Apache-2.0", "engines": { "node": " >=18.0" diff --git a/frontend-web/src/lib/firebaseConfig.js b/frontend-web/src/lib/firebaseConfig.js new file mode 100644 index 00000000..b73269da --- /dev/null +++ b/frontend-web/src/lib/firebaseConfig.js @@ -0,0 +1,22 @@ +import { getApps, initializeApp, getApp } from 'firebase/app'; +import { getDataConnect } from 'firebase/data-connect'; +import { getAuth } from 'firebase/auth'; +import { connectorConfig } from '@dataconnect/generated'; + +const firebaseConfig = { + apiKey: import.meta.env.VITE_FIREBASE_API_KEY, + authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN, + projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID, + appId: import.meta.env.VITE_FIREBASE_APP_ID, +}; + +export function getFirebaseApp() { + if (getApps().length === 0) { + return initializeApp(firebaseConfig); + } + return getApp(); +} + +export const app = getFirebaseApp(); +export const dataConnect = getDataConnect(app, connectorConfig); +export const auth = getAuth(app); \ No newline at end of file From d5e3396471dc0a7677c9bb5f1c5f832b46a00b18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Salazar?= <73718835+joshrs23@users.noreply.github.com> Date: Wed, 19 Nov 2025 11:34:58 -0500 Subject: [PATCH 2/7] deleting dataconect from front for the merge --- .../dataconnect-generated/.guides/config.json | 9 - .../dataconnect-generated/.guides/setup.md | 62 ---- .../dataconnect-generated/.guides/usage.md | 69 ---- .../src/dataconnect-generated/README.md | 317 ----------------- .../dataconnect-generated/esm/index.esm.js | 46 --- .../dataconnect-generated/esm/package.json | 1 - .../src/dataconnect-generated/index.cjs.js | 50 --- .../src/dataconnect-generated/index.d.ts | 90 ----- .../src/dataconnect-generated/package.json | 32 -- .../src/dataconnect-generated/react/README.md | 332 ------------------ .../react/esm/index.esm.js | 18 - .../react/esm/package.json | 1 - .../dataconnect-generated/react/index.cjs.js | 18 - .../dataconnect-generated/react/index.d.ts | 12 - .../dataconnect-generated/react/package.json | 17 - 15 files changed, 1074 deletions(-) delete mode 100644 frontend-web/src/dataconnect-generated/.guides/config.json delete mode 100644 frontend-web/src/dataconnect-generated/.guides/setup.md delete mode 100644 frontend-web/src/dataconnect-generated/.guides/usage.md delete mode 100644 frontend-web/src/dataconnect-generated/README.md delete mode 100644 frontend-web/src/dataconnect-generated/esm/index.esm.js delete mode 100644 frontend-web/src/dataconnect-generated/esm/package.json delete mode 100644 frontend-web/src/dataconnect-generated/index.cjs.js delete mode 100644 frontend-web/src/dataconnect-generated/index.d.ts delete mode 100644 frontend-web/src/dataconnect-generated/package.json delete mode 100644 frontend-web/src/dataconnect-generated/react/README.md delete mode 100644 frontend-web/src/dataconnect-generated/react/esm/index.esm.js delete mode 100644 frontend-web/src/dataconnect-generated/react/esm/package.json delete mode 100644 frontend-web/src/dataconnect-generated/react/index.cjs.js delete mode 100644 frontend-web/src/dataconnect-generated/react/index.d.ts delete mode 100644 frontend-web/src/dataconnect-generated/react/package.json diff --git a/frontend-web/src/dataconnect-generated/.guides/config.json b/frontend-web/src/dataconnect-generated/.guides/config.json deleted file mode 100644 index e37ed06f..00000000 --- a/frontend-web/src/dataconnect-generated/.guides/config.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "description": "A set of guides for interacting with the generated firebase dataconnect sdk", - "mcpServers": { - "firebase": { - "command": "npx", - "args": ["-y", "firebase-tools@latest", "experimental:mcp"] - } - } -} diff --git a/frontend-web/src/dataconnect-generated/.guides/setup.md b/frontend-web/src/dataconnect-generated/.guides/setup.md deleted file mode 100644 index 64a49286..00000000 --- a/frontend-web/src/dataconnect-generated/.guides/setup.md +++ /dev/null @@ -1,62 +0,0 @@ -# Setup - -If the user hasn't already installed the SDK, always run the user's node package manager of choice, and install the package in the directory ../package.json. -For more information on where the library is located, look at the connector.yaml file. - -```ts -import { initializeApp } from 'firebase/app'; - -initializeApp({ - // fill in your project config here using the values from your Firebase project or from the `firebase_get_sdk_config` tool from the Firebase MCP server. -}); -``` - -Then, you can run the SDK as needed. -```ts -import { ... } from '@dataconnect/generated'; -``` - - - - -## React -### Setup - -The user should make sure to install the `@tanstack/react-query` package, along with `@tanstack-query-firebase/react` and `firebase`. - -Then, they should initialize Firebase: -```ts -import { initializeApp } from 'firebase/app'; -initializeApp(firebaseConfig); /* your config here. To generate this, you can use the `firebase_sdk_config` MCP tool */ -``` - -Then, they should add a `QueryClientProvider` to their root of their application. - -Here's an example: - -```ts -import { initializeApp } from 'firebase/app'; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; - -const firebaseConfig = { - /* your config here. To generate this, you can use the `firebase_sdk_config` MCP tool */ -}; - -// Initialize Firebase -const app = initializeApp(firebaseConfig); - -// Create a TanStack Query client instance -const queryClient = new QueryClient(); - -function App() { - return ( - // Provide the client to your App - - - - ) -} - -render(, document.getElementById('root')); -``` - diff --git a/frontend-web/src/dataconnect-generated/.guides/usage.md b/frontend-web/src/dataconnect-generated/.guides/usage.md deleted file mode 100644 index ded8abc8..00000000 --- a/frontend-web/src/dataconnect-generated/.guides/usage.md +++ /dev/null @@ -1,69 +0,0 @@ -# Basic Usage - -Always prioritize using a supported framework over using the generated SDK -directly. Supported frameworks simplify the developer experience and help ensure -best practices are followed. - - - - -### React -For each operation, there is a wrapper hook that can be used to call the operation. - -Here are all of the hooks that get generated: -```ts -import { useCreateEvent, useListEvents } from '@dataconnect/generated/react'; -// The types of these hooks are available in react/index.d.ts - -const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars); - -const { data, isPending, isSuccess, isError, error } = useListEvents(); - -``` - -Here's an example from a different generated SDK: - -```ts -import { useListAllMovies } from '@dataconnect/generated/react'; - -function MyComponent() { - const { isLoading, data, error } = useListAllMovies(); - if(isLoading) { - return
Loading...
- } - if(error) { - return
An Error Occurred: {error}
- } -} - -// App.tsx -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import MyComponent from './my-component'; - -function App() { - const queryClient = new QueryClient(); - return - - -} -``` - - - -## Advanced Usage -If a user is not using a supported framework, they can use the generated SDK directly. - -Here's an example of how to use it with the first 5 operations: - -```js -import { createEvent, listEvents } from '@dataconnect/generated'; - - -// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts -const { data } = await CreateEvent(dataConnect, createEventVars); - -// Operation listEvents: -const { data } = await ListEvents(dataConnect); - - -``` \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/README.md b/frontend-web/src/dataconnect-generated/README.md deleted file mode 100644 index a201a0f7..00000000 --- a/frontend-web/src/dataconnect-generated/README.md +++ /dev/null @@ -1,317 +0,0 @@ -# Generated TypeScript README -This README will guide you through the process of using the generated JavaScript SDK package for the connector `krow-connector`. It will also provide examples on how to use your generated SDK to call your Data Connect queries and mutations. - -**If you're looking for the `React README`, you can find it at [`dataconnect-generated/react/README.md`](./react/README.md)** - -***NOTE:** This README is generated alongside the generated SDK. If you make changes to this file, they will be overwritten when the SDK is regenerated.* - -# Table of Contents -- [**Overview**](#generated-javascript-readme) -- [**Accessing the connector**](#accessing-the-connector) - - [*Connecting to the local Emulator*](#connecting-to-the-local-emulator) -- [**Queries**](#queries) - - [*listEvents*](#listevents) -- [**Mutations**](#mutations) - - [*CreateEvent*](#createevent) - -# Accessing the connector -A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector `krow-connector`. You can find more information about connectors in the [Data Connect documentation](https://firebase.google.com/docs/data-connect#how-does). - -You can use this generated SDK by importing from the package `@dataconnect/generated` as shown below. Both CommonJS and ESM imports are supported. - -You can also follow the instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#set-client). - -```typescript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig } from '@dataconnect/generated'; - -const dataConnect = getDataConnect(connectorConfig); -``` - -## Connecting to the local Emulator -By default, the connector will connect to the production service. - -To connect to the emulator, you can use the following code. -You can also follow the emulator instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#instrument-clients). - -```typescript -import { connectDataConnectEmulator, getDataConnect } from 'firebase/data-connect'; -import { connectorConfig } from '@dataconnect/generated'; - -const dataConnect = getDataConnect(connectorConfig); -connectDataConnectEmulator(dataConnect, 'localhost', 9399); -``` - -After it's initialized, you can call your Data Connect [queries](#queries) and [mutations](#mutations) from your generated SDK. - -# Queries - -There are two ways to execute a Data Connect Query using the generated Web SDK: -- Using a Query Reference function, which returns a `QueryRef` - - The `QueryRef` can be used as an argument to `executeQuery()`, which will execute the Query and return a `QueryPromise` -- Using an action shortcut function, which returns a `QueryPromise` - - Calling the action shortcut function will execute the Query and return a `QueryPromise` - -The following is true for both the action shortcut function and the `QueryRef` function: -- The `QueryPromise` returned will resolve to the result of the Query once it has finished executing -- If the Query accepts arguments, both the action shortcut function and the `QueryRef` function accept a single argument: an object that contains all the required variables (and the optional variables) for the Query -- Both functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. - -Below are examples of how to use the `krow-connector` connector's generated functions to execute each query. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#using-queries). - -## listEvents -You can execute the `listEvents` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): -```typescript -listEvents(): QueryPromise; - -interface ListEventsRef { - ... - /* Allow users to create refs without passing in DataConnect */ - (): QueryRef; -} -export const listEventsRef: ListEventsRef; -``` -You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function. -```typescript -listEvents(dc: DataConnect): QueryPromise; - -interface ListEventsRef { - ... - (dc: DataConnect): QueryRef; -} -export const listEventsRef: ListEventsRef; -``` - -If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the listEventsRef: -```typescript -const name = listEventsRef.operationName; -console.log(name); -``` - -### Variables -The `listEvents` query has no variables. -### Return Type -Recall that executing the `listEvents` query returns a `QueryPromise` that resolves to an object with a `data` property. - -The `data` property is an object of type `ListEventsData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: -```typescript -export interface ListEventsData { - events: ({ - id: UUIDString; - eventName: string; - status: EventStatus; - date: TimestampString; - isRecurring: boolean; - recurrenceType?: RecurrenceType | null; - businessId: UUIDString; - vendorId?: UUIDString | null; - total?: number | null; - requested?: number | null; - } & Event_Key)[]; -} -``` -### Using `listEvents`'s action shortcut function - -```typescript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, listEvents } from '@dataconnect/generated'; - - -// Call the `listEvents()` function to execute the query. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await listEvents(); - -// You can also pass in a `DataConnect` instance to the action shortcut function. -const dataConnect = getDataConnect(connectorConfig); -const { data } = await listEvents(dataConnect); - -console.log(data.events); - -// Or, you can use the `Promise` API. -listEvents().then((response) => { - const data = response.data; - console.log(data.events); -}); -``` - -### Using `listEvents`'s `QueryRef` function - -```typescript -import { getDataConnect, executeQuery } from 'firebase/data-connect'; -import { connectorConfig, listEventsRef } from '@dataconnect/generated'; - - -// Call the `listEventsRef()` function to get a reference to the query. -const ref = listEventsRef(); - -// You can also pass in a `DataConnect` instance to the `QueryRef` function. -const dataConnect = getDataConnect(connectorConfig); -const ref = listEventsRef(dataConnect); - -// Call `executeQuery()` on the reference to execute the query. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await executeQuery(ref); - -console.log(data.events); - -// Or, you can use the `Promise` API. -executeQuery(ref).then((response) => { - const data = response.data; - console.log(data.events); -}); -``` - -# Mutations - -There are two ways to execute a Data Connect Mutation using the generated Web SDK: -- Using a Mutation Reference function, which returns a `MutationRef` - - The `MutationRef` can be used as an argument to `executeMutation()`, which will execute the Mutation and return a `MutationPromise` -- Using an action shortcut function, which returns a `MutationPromise` - - Calling the action shortcut function will execute the Mutation and return a `MutationPromise` - -The following is true for both the action shortcut function and the `MutationRef` function: -- The `MutationPromise` returned will resolve to the result of the Mutation once it has finished executing -- If the Mutation accepts arguments, both the action shortcut function and the `MutationRef` function accept a single argument: an object that contains all the required variables (and the optional variables) for the Mutation -- Both functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. - -Below are examples of how to use the `krow-connector` connector's generated functions to execute each mutation. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#using-mutations). - -## CreateEvent -You can execute the `CreateEvent` mutation using the following action shortcut function, or by calling `executeMutation()` after calling the following `MutationRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): -```typescript -createEvent(vars: CreateEventVariables): MutationPromise; - -interface CreateEventRef { - ... - /* Allow users to create refs without passing in DataConnect */ - (vars: CreateEventVariables): MutationRef; -} -export const createEventRef: CreateEventRef; -``` -You can also pass in a `DataConnect` instance to the action shortcut function or `MutationRef` function. -```typescript -createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; - -interface CreateEventRef { - ... - (dc: DataConnect, vars: CreateEventVariables): MutationRef; -} -export const createEventRef: CreateEventRef; -``` - -If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the createEventRef: -```typescript -const name = createEventRef.operationName; -console.log(name); -``` - -### Variables -The `CreateEvent` mutation requires an argument of type `CreateEventVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: - -```typescript -export interface CreateEventVariables { - eventName: string; - isRecurring: boolean; - recurrenceType?: RecurrenceType | null; - businessId: UUIDString; - vendorId?: UUIDString | null; - status: EventStatus; - date: TimestampString; - shifts?: string | null; - total?: number | null; - requested?: number | null; - assignedStaff?: string | null; -} -``` -### Return Type -Recall that executing the `CreateEvent` mutation returns a `MutationPromise` that resolves to an object with a `data` property. - -The `data` property is an object of type `CreateEventData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: -```typescript -export interface CreateEventData { - event_insert: Event_Key; -} -``` -### Using `CreateEvent`'s action shortcut function - -```typescript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, createEvent, CreateEventVariables } from '@dataconnect/generated'; - -// The `CreateEvent` mutation requires an argument of type `CreateEventVariables`: -const createEventVars: CreateEventVariables = { - eventName: ..., - isRecurring: ..., - recurrenceType: ..., // optional - businessId: ..., - vendorId: ..., // optional - status: ..., - date: ..., - shifts: ..., // optional - total: ..., // optional - requested: ..., // optional - assignedStaff: ..., // optional -}; - -// Call the `createEvent()` function to execute the mutation. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await createEvent(createEventVars); -// Variables can be defined inline as well. -const { data } = await createEvent({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); - -// You can also pass in a `DataConnect` instance to the action shortcut function. -const dataConnect = getDataConnect(connectorConfig); -const { data } = await createEvent(dataConnect, createEventVars); - -console.log(data.event_insert); - -// Or, you can use the `Promise` API. -createEvent(createEventVars).then((response) => { - const data = response.data; - console.log(data.event_insert); -}); -``` - -### Using `CreateEvent`'s `MutationRef` function - -```typescript -import { getDataConnect, executeMutation } from 'firebase/data-connect'; -import { connectorConfig, createEventRef, CreateEventVariables } from '@dataconnect/generated'; - -// The `CreateEvent` mutation requires an argument of type `CreateEventVariables`: -const createEventVars: CreateEventVariables = { - eventName: ..., - isRecurring: ..., - recurrenceType: ..., // optional - businessId: ..., - vendorId: ..., // optional - status: ..., - date: ..., - shifts: ..., // optional - total: ..., // optional - requested: ..., // optional - assignedStaff: ..., // optional -}; - -// Call the `createEventRef()` function to get a reference to the mutation. -const ref = createEventRef(createEventVars); -// Variables can be defined inline as well. -const ref = createEventRef({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); - -// You can also pass in a `DataConnect` instance to the `MutationRef` function. -const dataConnect = getDataConnect(connectorConfig); -const ref = createEventRef(dataConnect, createEventVars); - -// Call `executeMutation()` on the reference to execute the mutation. -// You can use the `await` keyword to wait for the promise to resolve. -const { data } = await executeMutation(ref); - -console.log(data.event_insert); - -// Or, you can use the `Promise` API. -executeMutation(ref).then((response) => { - const data = response.data; - console.log(data.event_insert); -}); -``` - diff --git a/frontend-web/src/dataconnect-generated/esm/index.esm.js b/frontend-web/src/dataconnect-generated/esm/index.esm.js deleted file mode 100644 index 232d764e..00000000 --- a/frontend-web/src/dataconnect-generated/esm/index.esm.js +++ /dev/null @@ -1,46 +0,0 @@ -import { queryRef, executeQuery, mutationRef, executeMutation, validateArgs } from 'firebase/data-connect'; - -export const EventStatus = { - DRAFT: "DRAFT", - ACTIVE: "ACTIVE", - PENDING: "PENDING", - ASSIGNED: "ASSIGNED", - CONFIRMED: "CONFIRMED", - COMPLETED: "COMPLETED", - CANCELED: "CANCELED", -} - -export const RecurrenceType = { - SINGLE: "SINGLE", - DATE_RANGE: "DATE_RANGE", - SCATTER: "SCATTER", -} - -export const connectorConfig = { - connector: 'krow-connector', - service: 'krow-workforce-db', - location: 'us-central1' -}; - -export const createEventRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'CreateEvent', inputVars); -} -createEventRef.operationName = 'CreateEvent'; - -export function createEvent(dcOrVars, vars) { - return executeMutation(createEventRef(dcOrVars, vars)); -} - -export const listEventsRef = (dc) => { - const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); - dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'listEvents'); -} -listEventsRef.operationName = 'listEvents'; - -export function listEvents(dc) { - return executeQuery(listEventsRef(dc)); -} - diff --git a/frontend-web/src/dataconnect-generated/esm/package.json b/frontend-web/src/dataconnect-generated/esm/package.json deleted file mode 100644 index 7c34deb5..00000000 --- a/frontend-web/src/dataconnect-generated/esm/package.json +++ /dev/null @@ -1 +0,0 @@ -{"type":"module"} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/index.cjs.js b/frontend-web/src/dataconnect-generated/index.cjs.js deleted file mode 100644 index 4ee6e173..00000000 --- a/frontend-web/src/dataconnect-generated/index.cjs.js +++ /dev/null @@ -1,50 +0,0 @@ -const { queryRef, executeQuery, mutationRef, executeMutation, validateArgs } = require('firebase/data-connect'); - -const EventStatus = { - DRAFT: "DRAFT", - ACTIVE: "ACTIVE", - PENDING: "PENDING", - ASSIGNED: "ASSIGNED", - CONFIRMED: "CONFIRMED", - COMPLETED: "COMPLETED", - CANCELED: "CANCELED", -} -exports.EventStatus = EventStatus; - -const RecurrenceType = { - SINGLE: "SINGLE", - DATE_RANGE: "DATE_RANGE", - SCATTER: "SCATTER", -} -exports.RecurrenceType = RecurrenceType; - -const connectorConfig = { - connector: 'krow-connector', - service: 'krow-workforce-db', - location: 'us-central1' -}; -exports.connectorConfig = connectorConfig; - -const createEventRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'CreateEvent', inputVars); -} -createEventRef.operationName = 'CreateEvent'; -exports.createEventRef = createEventRef; - -exports.createEvent = function createEvent(dcOrVars, vars) { - return executeMutation(createEventRef(dcOrVars, vars)); -}; - -const listEventsRef = (dc) => { - const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); - dcInstance._useGeneratedSdk(); - return queryRef(dcInstance, 'listEvents'); -} -listEventsRef.operationName = 'listEvents'; -exports.listEventsRef = listEventsRef; - -exports.listEvents = function listEvents(dc) { - return executeQuery(listEventsRef(dc)); -}; diff --git a/frontend-web/src/dataconnect-generated/index.d.ts b/frontend-web/src/dataconnect-generated/index.d.ts deleted file mode 100644 index 856ff493..00000000 --- a/frontend-web/src/dataconnect-generated/index.d.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { ConnectorConfig, DataConnect, QueryRef, QueryPromise, MutationRef, MutationPromise } from 'firebase/data-connect'; - -export const connectorConfig: ConnectorConfig; - -export type TimestampString = string; -export type UUIDString = string; -export type Int64String = string; -export type DateString = string; - - -export enum EventStatus { - DRAFT = "DRAFT", - ACTIVE = "ACTIVE", - PENDING = "PENDING", - ASSIGNED = "ASSIGNED", - CONFIRMED = "CONFIRMED", - COMPLETED = "COMPLETED", - CANCELED = "CANCELED", -}; - -export enum RecurrenceType { - SINGLE = "SINGLE", - DATE_RANGE = "DATE_RANGE", - SCATTER = "SCATTER", -}; - - - -export interface CreateEventData { - event_insert: Event_Key; -} - -export interface CreateEventVariables { - eventName: string; - isRecurring: boolean; - recurrenceType?: RecurrenceType | null; - businessId: UUIDString; - vendorId?: UUIDString | null; - status: EventStatus; - date: TimestampString; - shifts?: string | null; - total?: number | null; - requested?: number | null; - assignedStaff?: string | null; -} - -export interface Event_Key { - id: UUIDString; - __typename?: 'Event_Key'; -} - -export interface ListEventsData { - events: ({ - id: UUIDString; - eventName: string; - status: EventStatus; - date: TimestampString; - isRecurring: boolean; - recurrenceType?: RecurrenceType | null; - businessId: UUIDString; - vendorId?: UUIDString | null; - total?: number | null; - requested?: number | null; - } & Event_Key)[]; -} - -interface CreateEventRef { - /* Allow users to create refs without passing in DataConnect */ - (vars: CreateEventVariables): MutationRef; - /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect, vars: CreateEventVariables): MutationRef; - operationName: string; -} -export const createEventRef: CreateEventRef; - -export function createEvent(vars: CreateEventVariables): MutationPromise; -export function createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; - -interface ListEventsRef { - /* Allow users to create refs without passing in DataConnect */ - (): QueryRef; - /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect): QueryRef; - operationName: string; -} -export const listEventsRef: ListEventsRef; - -export function listEvents(): QueryPromise; -export function listEvents(dc: DataConnect): QueryPromise; - diff --git a/frontend-web/src/dataconnect-generated/package.json b/frontend-web/src/dataconnect-generated/package.json deleted file mode 100644 index b686c0a0..00000000 --- a/frontend-web/src/dataconnect-generated/package.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "name": "@dataconnect/generated", - "version": "1.0.0", - "author": "Firebase (https://firebase.google.com/)", - "description": "Generated SDK For krow-connector", - "license": "Apache-2.0", - "engines": { - "node": " >=18.0" - }, - "typings": "index.d.ts", - "module": "esm/index.esm.js", - "main": "index.cjs.js", - "browser": "esm/index.esm.js", - "exports": { - ".": { - "types": "./index.d.ts", - "require": "./index.cjs.js", - "default": "./esm/index.esm.js" - }, - "./react": { - "types": "./react/index.d.ts", - "require": "./react/index.cjs.js", - "import": "./react/esm/index.esm.js", - "default": "./react/esm/index.esm.js" - }, - "./package.json": "./package.json" - }, - "peerDependencies": { - "firebase": "^11.3.0 || ^12.0.0", - "@tanstack-query-firebase/react": "^2.0.0" - } -} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/README.md b/frontend-web/src/dataconnect-generated/react/README.md deleted file mode 100644 index 24b8cec3..00000000 --- a/frontend-web/src/dataconnect-generated/react/README.md +++ /dev/null @@ -1,332 +0,0 @@ -# Generated React README -This README will guide you through the process of using the generated React SDK package for the connector `krow-connector`. It will also provide examples on how to use your generated SDK to call your Data Connect queries and mutations. - -**If you're looking for the `JavaScript README`, you can find it at [`dataconnect-generated/README.md`](../README.md)** - -***NOTE:** This README is generated alongside the generated SDK. If you make changes to this file, they will be overwritten when the SDK is regenerated.* - -You can use this generated SDK by importing from the package `@dataconnect/generated/react` as shown below. Both CommonJS and ESM imports are supported. - -You can also follow the instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#react). - -# Table of Contents -- [**Overview**](#generated-react-readme) -- [**TanStack Query Firebase & TanStack React Query**](#tanstack-query-firebase-tanstack-react-query) - - [*Package Installation*](#installing-tanstack-query-firebase-and-tanstack-react-query-packages) - - [*Configuring TanStack Query*](#configuring-tanstack-query) -- [**Accessing the connector**](#accessing-the-connector) - - [*Connecting to the local Emulator*](#connecting-to-the-local-emulator) -- [**Queries**](#queries) - - [*listEvents*](#listevents) -- [**Mutations**](#mutations) - - [*CreateEvent*](#createevent) - -# TanStack Query Firebase & TanStack React Query -This SDK provides [React](https://react.dev/) hooks generated specific to your application, for the operations found in the connector `krow-connector`. These hooks are generated using [TanStack Query Firebase](https://react-query-firebase.invertase.dev/) by our partners at Invertase, a library built on top of [TanStack React Query v5](https://tanstack.com/query/v5/docs/framework/react/overview). - -***You do not need to be familiar with Tanstack Query or Tanstack Query Firebase to use this SDK.*** However, you may find it useful to learn more about them, as they will empower you as a user of this Generated React SDK. - -## Installing TanStack Query Firebase and TanStack React Query Packages -In order to use the React generated SDK, you must install the `TanStack React Query` and `TanStack Query Firebase` packages. -```bash -npm i --save @tanstack/react-query @tanstack-query-firebase/react -``` -```bash -npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0 -``` - -You can also follow the installation instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#tanstack-install), or the [TanStack Query Firebase documentation](https://react-query-firebase.invertase.dev/react) and [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/installation). - -## Configuring TanStack Query -In order to use the React generated SDK in your application, you must wrap your application's component tree in a `QueryClientProvider` component from TanStack React Query. None of your generated React SDK hooks will work without this provider. - -```javascript -import { QueryClientProvider } from '@tanstack/react-query'; - -// Create a TanStack Query client instance -const queryClient = new QueryClient() - -function App() { - return ( - // Provide the client to your App - - - - ) -} -``` - -To learn more about `QueryClientProvider`, see the [TanStack React Query documentation](https://tanstack.com/query/latest/docs/framework/react/quick-start) and the [TanStack Query Firebase documentation](https://invertase.docs.page/tanstack-query-firebase/react#usage). - -# Accessing the connector -A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector `krow-connector`. - -You can find more information about connectors in the [Data Connect documentation](https://firebase.google.com/docs/data-connect#how-does). - -```javascript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig } from '@dataconnect/generated'; - -const dataConnect = getDataConnect(connectorConfig); -``` - -## Connecting to the local Emulator -By default, the connector will connect to the production service. - -To connect to the emulator, you can use the following code. -You can also follow the emulator instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#emulator-react-angular). - -```javascript -import { connectDataConnectEmulator, getDataConnect } from 'firebase/data-connect'; -import { connectorConfig } from '@dataconnect/generated'; - -const dataConnect = getDataConnect(connectorConfig); -connectDataConnectEmulator(dataConnect, 'localhost', 9399); -``` - -After it's initialized, you can call your Data Connect [queries](#queries) and [mutations](#mutations) using the hooks provided from your generated React SDK. - -# Queries - -The React generated SDK provides Query hook functions that call and return [`useDataConnectQuery`](https://react-query-firebase.invertase.dev/react/data-connect/querying) hooks from TanStack Query Firebase. - -Calling these hook functions will return a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and the most recent data returned by the Query, among other things. To learn more about these hooks and how to use them, see the [TanStack Query Firebase documentation](https://react-query-firebase.invertase.dev/react/data-connect/querying). - -TanStack React Query caches the results of your Queries, so using the same Query hook function in multiple places in your application allows the entire application to automatically see updates to that Query's data. - -Query hooks execute their Queries automatically when called, and periodically refresh, unless you change the `queryOptions` for the Query. To learn how to stop a Query from automatically executing, including how to make a query "lazy", see the [TanStack React Query documentation](https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries). - -To learn more about TanStack React Query's Queries, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/queries). - -## Using Query Hooks -Here's a general overview of how to use the generated Query hooks in your code: - -- If the Query has no variables, the Query hook function does not require arguments. -- If the Query has any required variables, the Query hook function will require at least one argument: an object that contains all the required variables for the Query. -- If the Query has some required and some optional variables, only required variables are necessary in the variables argument object, and optional variables may be provided as well. -- If all of the Query's variables are optional, the Query hook function does not require any arguments. -- Query hook functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. -- Query hooks functions can be called with or without passing in an `options` argument of type `useDataConnectQueryOptions`. To learn more about the `options` argument, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/query-options). - - ***Special case:*** If the Query has all optional variables and you would like to provide an `options` argument to the Query hook function without providing any variables, you must pass `undefined` where you would normally pass the Query's variables, and then may provide the `options` argument. - -Below are examples of how to use the `krow-connector` connector's generated Query hook functions to execute each Query. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular). - -## listEvents -You can execute the `listEvents` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts): - -```javascript -useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -``` -You can also pass in a `DataConnect` instance to the Query hook function. -```javascript -useListEvents(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -``` - -### Variables -The `listEvents` Query has no variables. -### Return Type -Recall that calling the `listEvents` Query hook function returns a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things. - -To check the status of a Query, use the `UseQueryResult.status` field. You can also check for pending / success / error status using the `UseQueryResult.isPending`, `UseQueryResult.isSuccess`, and `UseQueryResult.isError` fields. - -To access the data returned by a Query, use the `UseQueryResult.data` field. The data for the `listEvents` Query is of type `ListEventsData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: -```javascript -export interface ListEventsData { - events: ({ - id: UUIDString; - eventName: string; - status: EventStatus; - date: TimestampString; - isRecurring: boolean; - recurrenceType?: RecurrenceType | null; - businessId: UUIDString; - vendorId?: UUIDString | null; - total?: number | null; - requested?: number | null; - } & Event_Key)[]; -} -``` - -To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery). - -### Using `listEvents`'s Query hook function - -```javascript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig } from '@dataconnect/generated'; -import { useListEvents } from '@dataconnect/generated/react' - -export default function ListEventsComponent() { - // You don't have to do anything to "execute" the Query. - // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query. - const query = useListEvents(); - - // You can also pass in a `DataConnect` instance to the Query hook function. - const dataConnect = getDataConnect(connectorConfig); - const query = useListEvents(dataConnect); - - // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function. - const options = { staleTime: 5 * 1000 }; - const query = useListEvents(options); - - // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object. - const dataConnect = getDataConnect(connectorConfig); - const options = { staleTime: 5 * 1000 }; - const query = useListEvents(dataConnect, options); - - // Then, you can render your component dynamically based on the status of the Query. - if (query.isPending) { - return
Loading...
; - } - - if (query.isError) { - return
Error: {query.error.message}
; - } - - // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field. - if (query.isSuccess) { - console.log(query.data.events); - } - return
Query execution {query.isSuccess ? 'successful' : 'failed'}!
; -} -``` - -# Mutations - -The React generated SDK provides Mutations hook functions that call and return [`useDataConnectMutation`](https://react-query-firebase.invertase.dev/react/data-connect/mutations) hooks from TanStack Query Firebase. - -Calling these hook functions will return a `UseMutationResult` object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, and the most recent data returned by the Mutation, among other things. To learn more about these hooks and how to use them, see the [TanStack Query Firebase documentation](https://react-query-firebase.invertase.dev/react/data-connect/mutations). - -Mutation hooks do not execute their Mutations automatically when called. Rather, after calling the Mutation hook function and getting a `UseMutationResult` object, you must call the `UseMutationResult.mutate()` function to execute the Mutation. - -To learn more about TanStack React Query's Mutations, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/mutations). - -## Using Mutation Hooks -Here's a general overview of how to use the generated Mutation hooks in your code: - -- Mutation hook functions are not called with the arguments to the Mutation. Instead, arguments are passed to `UseMutationResult.mutate()`. -- If the Mutation has no variables, the `mutate()` function does not require arguments. -- If the Mutation has any required variables, the `mutate()` function will require at least one argument: an object that contains all the required variables for the Mutation. -- If the Mutation has some required and some optional variables, only required variables are necessary in the variables argument object, and optional variables may be provided as well. -- If all of the Mutation's variables are optional, the Mutation hook function does not require any arguments. -- Mutation hook functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. -- Mutation hooks also accept an `options` argument of type `useDataConnectMutationOptions`. To learn more about the `options` argument, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/mutations#mutation-side-effects). - - `UseMutationResult.mutate()` also accepts an `options` argument of type `useDataConnectMutationOptions`. - - ***Special case:*** If the Mutation has no arguments (or all optional arguments and you wish to provide none), and you want to pass `options` to `UseMutationResult.mutate()`, you must pass `undefined` where you would normally pass the Mutation's arguments, and then may provide the options argument. - -Below are examples of how to use the `krow-connector` connector's generated Mutation hook functions to execute each Mutation. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular). - -## CreateEvent -You can execute the `CreateEvent` Mutation using the `UseMutationResult` object returned by the following Mutation hook function (which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts)): -```javascript -useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -``` -You can also pass in a `DataConnect` instance to the Mutation hook function. -```javascript -useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -``` - -### Variables -The `CreateEvent` Mutation requires an argument of type `CreateEventVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: - -```javascript -export interface CreateEventVariables { - eventName: string; - isRecurring: boolean; - recurrenceType?: RecurrenceType | null; - businessId: UUIDString; - vendorId?: UUIDString | null; - status: EventStatus; - date: TimestampString; - shifts?: string | null; - total?: number | null; - requested?: number | null; - assignedStaff?: string | null; -} -``` -### Return Type -Recall that calling the `CreateEvent` Mutation hook function returns a `UseMutationResult` object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things. - -To check the status of a Mutation, use the `UseMutationResult.status` field. You can also check for pending / success / error status using the `UseMutationResult.isPending`, `UseMutationResult.isSuccess`, and `UseMutationResult.isError` fields. - -To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation. - -To access the data returned by a Mutation, use the `UseMutationResult.data` field. The data for the `CreateEvent` Mutation is of type `CreateEventData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: -```javascript -export interface CreateEventData { - event_insert: Event_Key; -} -``` - -To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation). - -### Using `CreateEvent`'s Mutation hook function - -```javascript -import { getDataConnect } from 'firebase/data-connect'; -import { connectorConfig, CreateEventVariables } from '@dataconnect/generated'; -import { useCreateEvent } from '@dataconnect/generated/react' - -export default function CreateEventComponent() { - // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation. - const mutation = useCreateEvent(); - - // You can also pass in a `DataConnect` instance to the Mutation hook function. - const dataConnect = getDataConnect(connectorConfig); - const mutation = useCreateEvent(dataConnect); - - // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function. - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - const mutation = useCreateEvent(options); - - // You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object. - const dataConnect = getDataConnect(connectorConfig); - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - const mutation = useCreateEvent(dataConnect, options); - - // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation. - // The `useCreateEvent` Mutation requires an argument of type `CreateEventVariables`: - const createEventVars: CreateEventVariables = { - eventName: ..., - isRecurring: ..., - recurrenceType: ..., // optional - businessId: ..., - vendorId: ..., // optional - status: ..., - date: ..., - shifts: ..., // optional - total: ..., // optional - requested: ..., // optional - assignedStaff: ..., // optional - }; - mutation.mutate(createEventVars); - // Variables can be defined inline as well. - mutation.mutate({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); - - // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`. - const options = { - onSuccess: () => { console.log('Mutation succeeded!'); } - }; - mutation.mutate(createEventVars, options); - - // Then, you can render your component dynamically based on the status of the Mutation. - if (mutation.isPending) { - return
Loading...
; - } - - if (mutation.isError) { - return
Error: {mutation.error.message}
; - } - - // If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field. - if (mutation.isSuccess) { - console.log(mutation.data.event_insert); - } - return
Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!
; -} -``` - diff --git a/frontend-web/src/dataconnect-generated/react/esm/index.esm.js b/frontend-web/src/dataconnect-generated/react/esm/index.esm.js deleted file mode 100644 index 3463a0fa..00000000 --- a/frontend-web/src/dataconnect-generated/react/esm/index.esm.js +++ /dev/null @@ -1,18 +0,0 @@ -import { createEventRef, listEventsRef, connectorConfig } from '../../esm/index.esm.js'; -import { validateArgs, CallerSdkTypeEnum } from 'firebase/data-connect'; -import { useDataConnectQuery, useDataConnectMutation, validateReactArgs } from '@tanstack-query-firebase/react/data-connect'; - -export function useCreateEvent(dcOrOptions, options) { - const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); - function refFactory(vars) { - return createEventRef(dcInstance, vars); - } - return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - - -export function useListEvents(dcOrOptions, options) { - const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listEventsRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/esm/package.json b/frontend-web/src/dataconnect-generated/react/esm/package.json deleted file mode 100644 index 7c34deb5..00000000 --- a/frontend-web/src/dataconnect-generated/react/esm/package.json +++ /dev/null @@ -1 +0,0 @@ -{"type":"module"} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/index.cjs.js b/frontend-web/src/dataconnect-generated/react/index.cjs.js deleted file mode 100644 index 52b5314b..00000000 --- a/frontend-web/src/dataconnect-generated/react/index.cjs.js +++ /dev/null @@ -1,18 +0,0 @@ -const { createEventRef, listEventsRef, connectorConfig } = require('../index.cjs.js'); -const { validateArgs, CallerSdkTypeEnum } = require('firebase/data-connect'); -const { useDataConnectQuery, useDataConnectMutation, validateReactArgs } = require('@tanstack-query-firebase/react/data-connect'); - -exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) { - const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); - function refFactory(vars) { - return createEventRef(dcInstance, vars); - } - return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} - - -exports.useListEvents = function useListEvents(dcOrOptions, options) { - const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listEventsRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/index.d.ts b/frontend-web/src/dataconnect-generated/react/index.d.ts deleted file mode 100644 index cab1da38..00000000 --- a/frontend-web/src/dataconnect-generated/react/index.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { CreateEventData, CreateEventVariables, ListEventsData } from '../'; -import { UseDataConnectQueryResult, useDataConnectQueryOptions, UseDataConnectMutationResult, useDataConnectMutationOptions} from '@tanstack-query-firebase/react/data-connect'; -import { UseQueryResult, UseMutationResult} from '@tanstack/react-query'; -import { DataConnect } from 'firebase/data-connect'; -import { FirebaseError } from 'firebase/app'; - - -export function useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -export function useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; - -export function useListEvents(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; -export function useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; diff --git a/frontend-web/src/dataconnect-generated/react/package.json b/frontend-web/src/dataconnect-generated/react/package.json deleted file mode 100644 index 512c7ec3..00000000 --- a/frontend-web/src/dataconnect-generated/react/package.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "name": "@dataconnect/generated-react", - "version": "1.0.0", - "author": "Firebase (https://firebase.google.com/)", - "description": "Generated SDK For krow-connector", - "license": "Apache-2.0", - "engines": { - "node": " >=18.0" - }, - "typings": "index.d.ts", - "main": "index.cjs.js", - "module": "esm/index.esm.js", - "browser": "esm/index.esm.js", - "peerDependencies": { - "@tanstack-query-firebase/react": "^2.0.0" - } -} \ No newline at end of file From e8ffa4c5ef2459bfbfcfd2f2768d2667c61f37c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Salazar?= <73718835+joshrs23@users.noreply.github.com> Date: Wed, 19 Nov 2025 12:00:02 -0500 Subject: [PATCH 3/7] sdk creation in front-web and internal-api-harness --- dataconnect/connector/connector.yaml | 5 + .../dataconnect-generated/.guides/config.json | 9 + .../dataconnect-generated/.guides/setup.md | 62 ++++ .../dataconnect-generated/.guides/usage.md | 69 ++++ .../src/dataconnect-generated/README.md | 317 +++++++++++++++++ .../dataconnect-generated/esm/index.esm.js | 46 +++ .../dataconnect-generated/esm/package.json | 1 + .../src/dataconnect-generated/index.cjs.js | 50 +++ .../src/dataconnect-generated/index.d.ts | 90 +++++ .../src/dataconnect-generated/package.json | 32 ++ .../src/dataconnect-generated/react/README.md | 332 ++++++++++++++++++ .../react/esm/index.esm.js | 18 + .../react/esm/package.json | 1 + .../dataconnect-generated/react/index.cjs.js | 18 + .../dataconnect-generated/react/index.d.ts | 12 + .../dataconnect-generated/react/package.json | 17 + internal-api-harness/package-lock.json | 56 +++ internal-api-harness/package.json | 1 + .../dataconnect-generated/.guides/config.json | 9 + .../dataconnect-generated/.guides/setup.md | 62 ++++ .../dataconnect-generated/.guides/usage.md | 69 ++++ .../src/dataconnect-generated/README.md | 317 +++++++++++++++++ .../dataconnect-generated/esm/index.esm.js | 46 +++ .../dataconnect-generated/esm/package.json | 1 + .../src/dataconnect-generated/index.cjs.js | 50 +++ .../src/dataconnect-generated/index.d.ts | 90 +++++ .../src/dataconnect-generated/package.json | 32 ++ .../src/dataconnect-generated/react/README.md | 332 ++++++++++++++++++ .../react/esm/index.esm.js | 18 + .../react/esm/package.json | 1 + .../dataconnect-generated/react/index.cjs.js | 18 + .../dataconnect-generated/react/index.d.ts | 12 + .../dataconnect-generated/react/package.json | 17 + 33 files changed, 2210 insertions(+) create mode 100644 frontend-web/src/dataconnect-generated/.guides/config.json create mode 100644 frontend-web/src/dataconnect-generated/.guides/setup.md create mode 100644 frontend-web/src/dataconnect-generated/.guides/usage.md create mode 100644 frontend-web/src/dataconnect-generated/README.md create mode 100644 frontend-web/src/dataconnect-generated/esm/index.esm.js create mode 100644 frontend-web/src/dataconnect-generated/esm/package.json create mode 100644 frontend-web/src/dataconnect-generated/index.cjs.js create mode 100644 frontend-web/src/dataconnect-generated/index.d.ts create mode 100644 frontend-web/src/dataconnect-generated/package.json create mode 100644 frontend-web/src/dataconnect-generated/react/README.md create mode 100644 frontend-web/src/dataconnect-generated/react/esm/index.esm.js create mode 100644 frontend-web/src/dataconnect-generated/react/esm/package.json create mode 100644 frontend-web/src/dataconnect-generated/react/index.cjs.js create mode 100644 frontend-web/src/dataconnect-generated/react/index.d.ts create mode 100644 frontend-web/src/dataconnect-generated/react/package.json create mode 100644 internal-api-harness/src/dataconnect-generated/.guides/config.json create mode 100644 internal-api-harness/src/dataconnect-generated/.guides/setup.md create mode 100644 internal-api-harness/src/dataconnect-generated/.guides/usage.md create mode 100644 internal-api-harness/src/dataconnect-generated/README.md create mode 100644 internal-api-harness/src/dataconnect-generated/esm/index.esm.js create mode 100644 internal-api-harness/src/dataconnect-generated/esm/package.json create mode 100644 internal-api-harness/src/dataconnect-generated/index.cjs.js create mode 100644 internal-api-harness/src/dataconnect-generated/index.d.ts create mode 100644 internal-api-harness/src/dataconnect-generated/package.json create mode 100644 internal-api-harness/src/dataconnect-generated/react/README.md create mode 100644 internal-api-harness/src/dataconnect-generated/react/esm/index.esm.js create mode 100644 internal-api-harness/src/dataconnect-generated/react/esm/package.json create mode 100644 internal-api-harness/src/dataconnect-generated/react/index.cjs.js create mode 100644 internal-api-harness/src/dataconnect-generated/react/index.d.ts create mode 100644 internal-api-harness/src/dataconnect-generated/react/package.json diff --git a/dataconnect/connector/connector.yaml b/dataconnect/connector/connector.yaml index a3273b3f..d32aa32a 100644 --- a/dataconnect/connector/connector.yaml +++ b/dataconnect/connector/connector.yaml @@ -6,3 +6,8 @@ generate: packageJsonDir: ../../frontend-web react: true angular: false + - outputDir: ../../internal-api-harness/src/dataconnect-generated + package: "@dataconnect/generated" + packageJsonDir: ../../internal-api-harness + react: true + angular: false diff --git a/frontend-web/src/dataconnect-generated/.guides/config.json b/frontend-web/src/dataconnect-generated/.guides/config.json new file mode 100644 index 00000000..e37ed06f --- /dev/null +++ b/frontend-web/src/dataconnect-generated/.guides/config.json @@ -0,0 +1,9 @@ +{ + "description": "A set of guides for interacting with the generated firebase dataconnect sdk", + "mcpServers": { + "firebase": { + "command": "npx", + "args": ["-y", "firebase-tools@latest", "experimental:mcp"] + } + } +} diff --git a/frontend-web/src/dataconnect-generated/.guides/setup.md b/frontend-web/src/dataconnect-generated/.guides/setup.md new file mode 100644 index 00000000..64a49286 --- /dev/null +++ b/frontend-web/src/dataconnect-generated/.guides/setup.md @@ -0,0 +1,62 @@ +# Setup + +If the user hasn't already installed the SDK, always run the user's node package manager of choice, and install the package in the directory ../package.json. +For more information on where the library is located, look at the connector.yaml file. + +```ts +import { initializeApp } from 'firebase/app'; + +initializeApp({ + // fill in your project config here using the values from your Firebase project or from the `firebase_get_sdk_config` tool from the Firebase MCP server. +}); +``` + +Then, you can run the SDK as needed. +```ts +import { ... } from '@dataconnect/generated'; +``` + + + + +## React +### Setup + +The user should make sure to install the `@tanstack/react-query` package, along with `@tanstack-query-firebase/react` and `firebase`. + +Then, they should initialize Firebase: +```ts +import { initializeApp } from 'firebase/app'; +initializeApp(firebaseConfig); /* your config here. To generate this, you can use the `firebase_sdk_config` MCP tool */ +``` + +Then, they should add a `QueryClientProvider` to their root of their application. + +Here's an example: + +```ts +import { initializeApp } from 'firebase/app'; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; + +const firebaseConfig = { + /* your config here. To generate this, you can use the `firebase_sdk_config` MCP tool */ +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); + +// Create a TanStack Query client instance +const queryClient = new QueryClient(); + +function App() { + return ( + // Provide the client to your App + + + + ) +} + +render(, document.getElementById('root')); +``` + diff --git a/frontend-web/src/dataconnect-generated/.guides/usage.md b/frontend-web/src/dataconnect-generated/.guides/usage.md new file mode 100644 index 00000000..ded8abc8 --- /dev/null +++ b/frontend-web/src/dataconnect-generated/.guides/usage.md @@ -0,0 +1,69 @@ +# Basic Usage + +Always prioritize using a supported framework over using the generated SDK +directly. Supported frameworks simplify the developer experience and help ensure +best practices are followed. + + + + +### React +For each operation, there is a wrapper hook that can be used to call the operation. + +Here are all of the hooks that get generated: +```ts +import { useCreateEvent, useListEvents } from '@dataconnect/generated/react'; +// The types of these hooks are available in react/index.d.ts + +const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars); + +const { data, isPending, isSuccess, isError, error } = useListEvents(); + +``` + +Here's an example from a different generated SDK: + +```ts +import { useListAllMovies } from '@dataconnect/generated/react'; + +function MyComponent() { + const { isLoading, data, error } = useListAllMovies(); + if(isLoading) { + return
Loading...
+ } + if(error) { + return
An Error Occurred: {error}
+ } +} + +// App.tsx +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import MyComponent from './my-component'; + +function App() { + const queryClient = new QueryClient(); + return + + +} +``` + + + +## Advanced Usage +If a user is not using a supported framework, they can use the generated SDK directly. + +Here's an example of how to use it with the first 5 operations: + +```js +import { createEvent, listEvents } from '@dataconnect/generated'; + + +// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts +const { data } = await CreateEvent(dataConnect, createEventVars); + +// Operation listEvents: +const { data } = await ListEvents(dataConnect); + + +``` \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/README.md b/frontend-web/src/dataconnect-generated/README.md new file mode 100644 index 00000000..a201a0f7 --- /dev/null +++ b/frontend-web/src/dataconnect-generated/README.md @@ -0,0 +1,317 @@ +# Generated TypeScript README +This README will guide you through the process of using the generated JavaScript SDK package for the connector `krow-connector`. It will also provide examples on how to use your generated SDK to call your Data Connect queries and mutations. + +**If you're looking for the `React README`, you can find it at [`dataconnect-generated/react/README.md`](./react/README.md)** + +***NOTE:** This README is generated alongside the generated SDK. If you make changes to this file, they will be overwritten when the SDK is regenerated.* + +# Table of Contents +- [**Overview**](#generated-javascript-readme) +- [**Accessing the connector**](#accessing-the-connector) + - [*Connecting to the local Emulator*](#connecting-to-the-local-emulator) +- [**Queries**](#queries) + - [*listEvents*](#listevents) +- [**Mutations**](#mutations) + - [*CreateEvent*](#createevent) + +# Accessing the connector +A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector `krow-connector`. You can find more information about connectors in the [Data Connect documentation](https://firebase.google.com/docs/data-connect#how-does). + +You can use this generated SDK by importing from the package `@dataconnect/generated` as shown below. Both CommonJS and ESM imports are supported. + +You can also follow the instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#set-client). + +```typescript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig } from '@dataconnect/generated'; + +const dataConnect = getDataConnect(connectorConfig); +``` + +## Connecting to the local Emulator +By default, the connector will connect to the production service. + +To connect to the emulator, you can use the following code. +You can also follow the emulator instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#instrument-clients). + +```typescript +import { connectDataConnectEmulator, getDataConnect } from 'firebase/data-connect'; +import { connectorConfig } from '@dataconnect/generated'; + +const dataConnect = getDataConnect(connectorConfig); +connectDataConnectEmulator(dataConnect, 'localhost', 9399); +``` + +After it's initialized, you can call your Data Connect [queries](#queries) and [mutations](#mutations) from your generated SDK. + +# Queries + +There are two ways to execute a Data Connect Query using the generated Web SDK: +- Using a Query Reference function, which returns a `QueryRef` + - The `QueryRef` can be used as an argument to `executeQuery()`, which will execute the Query and return a `QueryPromise` +- Using an action shortcut function, which returns a `QueryPromise` + - Calling the action shortcut function will execute the Query and return a `QueryPromise` + +The following is true for both the action shortcut function and the `QueryRef` function: +- The `QueryPromise` returned will resolve to the result of the Query once it has finished executing +- If the Query accepts arguments, both the action shortcut function and the `QueryRef` function accept a single argument: an object that contains all the required variables (and the optional variables) for the Query +- Both functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. + +Below are examples of how to use the `krow-connector` connector's generated functions to execute each query. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#using-queries). + +## listEvents +You can execute the `listEvents` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): +```typescript +listEvents(): QueryPromise; + +interface ListEventsRef { + ... + /* Allow users to create refs without passing in DataConnect */ + (): QueryRef; +} +export const listEventsRef: ListEventsRef; +``` +You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function. +```typescript +listEvents(dc: DataConnect): QueryPromise; + +interface ListEventsRef { + ... + (dc: DataConnect): QueryRef; +} +export const listEventsRef: ListEventsRef; +``` + +If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the listEventsRef: +```typescript +const name = listEventsRef.operationName; +console.log(name); +``` + +### Variables +The `listEvents` query has no variables. +### Return Type +Recall that executing the `listEvents` query returns a `QueryPromise` that resolves to an object with a `data` property. + +The `data` property is an object of type `ListEventsData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: +```typescript +export interface ListEventsData { + events: ({ + id: UUIDString; + eventName: string; + status: EventStatus; + date: TimestampString; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + total?: number | null; + requested?: number | null; + } & Event_Key)[]; +} +``` +### Using `listEvents`'s action shortcut function + +```typescript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig, listEvents } from '@dataconnect/generated'; + + +// Call the `listEvents()` function to execute the query. +// You can use the `await` keyword to wait for the promise to resolve. +const { data } = await listEvents(); + +// You can also pass in a `DataConnect` instance to the action shortcut function. +const dataConnect = getDataConnect(connectorConfig); +const { data } = await listEvents(dataConnect); + +console.log(data.events); + +// Or, you can use the `Promise` API. +listEvents().then((response) => { + const data = response.data; + console.log(data.events); +}); +``` + +### Using `listEvents`'s `QueryRef` function + +```typescript +import { getDataConnect, executeQuery } from 'firebase/data-connect'; +import { connectorConfig, listEventsRef } from '@dataconnect/generated'; + + +// Call the `listEventsRef()` function to get a reference to the query. +const ref = listEventsRef(); + +// You can also pass in a `DataConnect` instance to the `QueryRef` function. +const dataConnect = getDataConnect(connectorConfig); +const ref = listEventsRef(dataConnect); + +// Call `executeQuery()` on the reference to execute the query. +// You can use the `await` keyword to wait for the promise to resolve. +const { data } = await executeQuery(ref); + +console.log(data.events); + +// Or, you can use the `Promise` API. +executeQuery(ref).then((response) => { + const data = response.data; + console.log(data.events); +}); +``` + +# Mutations + +There are two ways to execute a Data Connect Mutation using the generated Web SDK: +- Using a Mutation Reference function, which returns a `MutationRef` + - The `MutationRef` can be used as an argument to `executeMutation()`, which will execute the Mutation and return a `MutationPromise` +- Using an action shortcut function, which returns a `MutationPromise` + - Calling the action shortcut function will execute the Mutation and return a `MutationPromise` + +The following is true for both the action shortcut function and the `MutationRef` function: +- The `MutationPromise` returned will resolve to the result of the Mutation once it has finished executing +- If the Mutation accepts arguments, both the action shortcut function and the `MutationRef` function accept a single argument: an object that contains all the required variables (and the optional variables) for the Mutation +- Both functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. + +Below are examples of how to use the `krow-connector` connector's generated functions to execute each mutation. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#using-mutations). + +## CreateEvent +You can execute the `CreateEvent` mutation using the following action shortcut function, or by calling `executeMutation()` after calling the following `MutationRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): +```typescript +createEvent(vars: CreateEventVariables): MutationPromise; + +interface CreateEventRef { + ... + /* Allow users to create refs without passing in DataConnect */ + (vars: CreateEventVariables): MutationRef; +} +export const createEventRef: CreateEventRef; +``` +You can also pass in a `DataConnect` instance to the action shortcut function or `MutationRef` function. +```typescript +createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; + +interface CreateEventRef { + ... + (dc: DataConnect, vars: CreateEventVariables): MutationRef; +} +export const createEventRef: CreateEventRef; +``` + +If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the createEventRef: +```typescript +const name = createEventRef.operationName; +console.log(name); +``` + +### Variables +The `CreateEvent` mutation requires an argument of type `CreateEventVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: + +```typescript +export interface CreateEventVariables { + eventName: string; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + status: EventStatus; + date: TimestampString; + shifts?: string | null; + total?: number | null; + requested?: number | null; + assignedStaff?: string | null; +} +``` +### Return Type +Recall that executing the `CreateEvent` mutation returns a `MutationPromise` that resolves to an object with a `data` property. + +The `data` property is an object of type `CreateEventData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: +```typescript +export interface CreateEventData { + event_insert: Event_Key; +} +``` +### Using `CreateEvent`'s action shortcut function + +```typescript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig, createEvent, CreateEventVariables } from '@dataconnect/generated'; + +// The `CreateEvent` mutation requires an argument of type `CreateEventVariables`: +const createEventVars: CreateEventVariables = { + eventName: ..., + isRecurring: ..., + recurrenceType: ..., // optional + businessId: ..., + vendorId: ..., // optional + status: ..., + date: ..., + shifts: ..., // optional + total: ..., // optional + requested: ..., // optional + assignedStaff: ..., // optional +}; + +// Call the `createEvent()` function to execute the mutation. +// You can use the `await` keyword to wait for the promise to resolve. +const { data } = await createEvent(createEventVars); +// Variables can be defined inline as well. +const { data } = await createEvent({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); + +// You can also pass in a `DataConnect` instance to the action shortcut function. +const dataConnect = getDataConnect(connectorConfig); +const { data } = await createEvent(dataConnect, createEventVars); + +console.log(data.event_insert); + +// Or, you can use the `Promise` API. +createEvent(createEventVars).then((response) => { + const data = response.data; + console.log(data.event_insert); +}); +``` + +### Using `CreateEvent`'s `MutationRef` function + +```typescript +import { getDataConnect, executeMutation } from 'firebase/data-connect'; +import { connectorConfig, createEventRef, CreateEventVariables } from '@dataconnect/generated'; + +// The `CreateEvent` mutation requires an argument of type `CreateEventVariables`: +const createEventVars: CreateEventVariables = { + eventName: ..., + isRecurring: ..., + recurrenceType: ..., // optional + businessId: ..., + vendorId: ..., // optional + status: ..., + date: ..., + shifts: ..., // optional + total: ..., // optional + requested: ..., // optional + assignedStaff: ..., // optional +}; + +// Call the `createEventRef()` function to get a reference to the mutation. +const ref = createEventRef(createEventVars); +// Variables can be defined inline as well. +const ref = createEventRef({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); + +// You can also pass in a `DataConnect` instance to the `MutationRef` function. +const dataConnect = getDataConnect(connectorConfig); +const ref = createEventRef(dataConnect, createEventVars); + +// Call `executeMutation()` on the reference to execute the mutation. +// You can use the `await` keyword to wait for the promise to resolve. +const { data } = await executeMutation(ref); + +console.log(data.event_insert); + +// Or, you can use the `Promise` API. +executeMutation(ref).then((response) => { + const data = response.data; + console.log(data.event_insert); +}); +``` + diff --git a/frontend-web/src/dataconnect-generated/esm/index.esm.js b/frontend-web/src/dataconnect-generated/esm/index.esm.js new file mode 100644 index 00000000..232d764e --- /dev/null +++ b/frontend-web/src/dataconnect-generated/esm/index.esm.js @@ -0,0 +1,46 @@ +import { queryRef, executeQuery, mutationRef, executeMutation, validateArgs } from 'firebase/data-connect'; + +export const EventStatus = { + DRAFT: "DRAFT", + ACTIVE: "ACTIVE", + PENDING: "PENDING", + ASSIGNED: "ASSIGNED", + CONFIRMED: "CONFIRMED", + COMPLETED: "COMPLETED", + CANCELED: "CANCELED", +} + +export const RecurrenceType = { + SINGLE: "SINGLE", + DATE_RANGE: "DATE_RANGE", + SCATTER: "SCATTER", +} + +export const connectorConfig = { + connector: 'krow-connector', + service: 'krow-workforce-db', + location: 'us-central1' +}; + +export const createEventRef = (dcOrVars, vars) => { + const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); + dcInstance._useGeneratedSdk(); + return mutationRef(dcInstance, 'CreateEvent', inputVars); +} +createEventRef.operationName = 'CreateEvent'; + +export function createEvent(dcOrVars, vars) { + return executeMutation(createEventRef(dcOrVars, vars)); +} + +export const listEventsRef = (dc) => { + const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); + dcInstance._useGeneratedSdk(); + return queryRef(dcInstance, 'listEvents'); +} +listEventsRef.operationName = 'listEvents'; + +export function listEvents(dc) { + return executeQuery(listEventsRef(dc)); +} + diff --git a/frontend-web/src/dataconnect-generated/esm/package.json b/frontend-web/src/dataconnect-generated/esm/package.json new file mode 100644 index 00000000..7c34deb5 --- /dev/null +++ b/frontend-web/src/dataconnect-generated/esm/package.json @@ -0,0 +1 @@ +{"type":"module"} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/index.cjs.js b/frontend-web/src/dataconnect-generated/index.cjs.js new file mode 100644 index 00000000..4ee6e173 --- /dev/null +++ b/frontend-web/src/dataconnect-generated/index.cjs.js @@ -0,0 +1,50 @@ +const { queryRef, executeQuery, mutationRef, executeMutation, validateArgs } = require('firebase/data-connect'); + +const EventStatus = { + DRAFT: "DRAFT", + ACTIVE: "ACTIVE", + PENDING: "PENDING", + ASSIGNED: "ASSIGNED", + CONFIRMED: "CONFIRMED", + COMPLETED: "COMPLETED", + CANCELED: "CANCELED", +} +exports.EventStatus = EventStatus; + +const RecurrenceType = { + SINGLE: "SINGLE", + DATE_RANGE: "DATE_RANGE", + SCATTER: "SCATTER", +} +exports.RecurrenceType = RecurrenceType; + +const connectorConfig = { + connector: 'krow-connector', + service: 'krow-workforce-db', + location: 'us-central1' +}; +exports.connectorConfig = connectorConfig; + +const createEventRef = (dcOrVars, vars) => { + const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); + dcInstance._useGeneratedSdk(); + return mutationRef(dcInstance, 'CreateEvent', inputVars); +} +createEventRef.operationName = 'CreateEvent'; +exports.createEventRef = createEventRef; + +exports.createEvent = function createEvent(dcOrVars, vars) { + return executeMutation(createEventRef(dcOrVars, vars)); +}; + +const listEventsRef = (dc) => { + const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); + dcInstance._useGeneratedSdk(); + return queryRef(dcInstance, 'listEvents'); +} +listEventsRef.operationName = 'listEvents'; +exports.listEventsRef = listEventsRef; + +exports.listEvents = function listEvents(dc) { + return executeQuery(listEventsRef(dc)); +}; diff --git a/frontend-web/src/dataconnect-generated/index.d.ts b/frontend-web/src/dataconnect-generated/index.d.ts new file mode 100644 index 00000000..856ff493 --- /dev/null +++ b/frontend-web/src/dataconnect-generated/index.d.ts @@ -0,0 +1,90 @@ +import { ConnectorConfig, DataConnect, QueryRef, QueryPromise, MutationRef, MutationPromise } from 'firebase/data-connect'; + +export const connectorConfig: ConnectorConfig; + +export type TimestampString = string; +export type UUIDString = string; +export type Int64String = string; +export type DateString = string; + + +export enum EventStatus { + DRAFT = "DRAFT", + ACTIVE = "ACTIVE", + PENDING = "PENDING", + ASSIGNED = "ASSIGNED", + CONFIRMED = "CONFIRMED", + COMPLETED = "COMPLETED", + CANCELED = "CANCELED", +}; + +export enum RecurrenceType { + SINGLE = "SINGLE", + DATE_RANGE = "DATE_RANGE", + SCATTER = "SCATTER", +}; + + + +export interface CreateEventData { + event_insert: Event_Key; +} + +export interface CreateEventVariables { + eventName: string; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + status: EventStatus; + date: TimestampString; + shifts?: string | null; + total?: number | null; + requested?: number | null; + assignedStaff?: string | null; +} + +export interface Event_Key { + id: UUIDString; + __typename?: 'Event_Key'; +} + +export interface ListEventsData { + events: ({ + id: UUIDString; + eventName: string; + status: EventStatus; + date: TimestampString; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + total?: number | null; + requested?: number | null; + } & Event_Key)[]; +} + +interface CreateEventRef { + /* Allow users to create refs without passing in DataConnect */ + (vars: CreateEventVariables): MutationRef; + /* Allow users to pass in custom DataConnect instances */ + (dc: DataConnect, vars: CreateEventVariables): MutationRef; + operationName: string; +} +export const createEventRef: CreateEventRef; + +export function createEvent(vars: CreateEventVariables): MutationPromise; +export function createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; + +interface ListEventsRef { + /* Allow users to create refs without passing in DataConnect */ + (): QueryRef; + /* Allow users to pass in custom DataConnect instances */ + (dc: DataConnect): QueryRef; + operationName: string; +} +export const listEventsRef: ListEventsRef; + +export function listEvents(): QueryPromise; +export function listEvents(dc: DataConnect): QueryPromise; + diff --git a/frontend-web/src/dataconnect-generated/package.json b/frontend-web/src/dataconnect-generated/package.json new file mode 100644 index 00000000..b686c0a0 --- /dev/null +++ b/frontend-web/src/dataconnect-generated/package.json @@ -0,0 +1,32 @@ +{ + "name": "@dataconnect/generated", + "version": "1.0.0", + "author": "Firebase (https://firebase.google.com/)", + "description": "Generated SDK For krow-connector", + "license": "Apache-2.0", + "engines": { + "node": " >=18.0" + }, + "typings": "index.d.ts", + "module": "esm/index.esm.js", + "main": "index.cjs.js", + "browser": "esm/index.esm.js", + "exports": { + ".": { + "types": "./index.d.ts", + "require": "./index.cjs.js", + "default": "./esm/index.esm.js" + }, + "./react": { + "types": "./react/index.d.ts", + "require": "./react/index.cjs.js", + "import": "./react/esm/index.esm.js", + "default": "./react/esm/index.esm.js" + }, + "./package.json": "./package.json" + }, + "peerDependencies": { + "firebase": "^11.3.0 || ^12.0.0", + "@tanstack-query-firebase/react": "^2.0.0" + } +} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/README.md b/frontend-web/src/dataconnect-generated/react/README.md new file mode 100644 index 00000000..24b8cec3 --- /dev/null +++ b/frontend-web/src/dataconnect-generated/react/README.md @@ -0,0 +1,332 @@ +# Generated React README +This README will guide you through the process of using the generated React SDK package for the connector `krow-connector`. It will also provide examples on how to use your generated SDK to call your Data Connect queries and mutations. + +**If you're looking for the `JavaScript README`, you can find it at [`dataconnect-generated/README.md`](../README.md)** + +***NOTE:** This README is generated alongside the generated SDK. If you make changes to this file, they will be overwritten when the SDK is regenerated.* + +You can use this generated SDK by importing from the package `@dataconnect/generated/react` as shown below. Both CommonJS and ESM imports are supported. + +You can also follow the instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#react). + +# Table of Contents +- [**Overview**](#generated-react-readme) +- [**TanStack Query Firebase & TanStack React Query**](#tanstack-query-firebase-tanstack-react-query) + - [*Package Installation*](#installing-tanstack-query-firebase-and-tanstack-react-query-packages) + - [*Configuring TanStack Query*](#configuring-tanstack-query) +- [**Accessing the connector**](#accessing-the-connector) + - [*Connecting to the local Emulator*](#connecting-to-the-local-emulator) +- [**Queries**](#queries) + - [*listEvents*](#listevents) +- [**Mutations**](#mutations) + - [*CreateEvent*](#createevent) + +# TanStack Query Firebase & TanStack React Query +This SDK provides [React](https://react.dev/) hooks generated specific to your application, for the operations found in the connector `krow-connector`. These hooks are generated using [TanStack Query Firebase](https://react-query-firebase.invertase.dev/) by our partners at Invertase, a library built on top of [TanStack React Query v5](https://tanstack.com/query/v5/docs/framework/react/overview). + +***You do not need to be familiar with Tanstack Query or Tanstack Query Firebase to use this SDK.*** However, you may find it useful to learn more about them, as they will empower you as a user of this Generated React SDK. + +## Installing TanStack Query Firebase and TanStack React Query Packages +In order to use the React generated SDK, you must install the `TanStack React Query` and `TanStack Query Firebase` packages. +```bash +npm i --save @tanstack/react-query @tanstack-query-firebase/react +``` +```bash +npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0 +``` + +You can also follow the installation instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#tanstack-install), or the [TanStack Query Firebase documentation](https://react-query-firebase.invertase.dev/react) and [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/installation). + +## Configuring TanStack Query +In order to use the React generated SDK in your application, you must wrap your application's component tree in a `QueryClientProvider` component from TanStack React Query. None of your generated React SDK hooks will work without this provider. + +```javascript +import { QueryClientProvider } from '@tanstack/react-query'; + +// Create a TanStack Query client instance +const queryClient = new QueryClient() + +function App() { + return ( + // Provide the client to your App + + + + ) +} +``` + +To learn more about `QueryClientProvider`, see the [TanStack React Query documentation](https://tanstack.com/query/latest/docs/framework/react/quick-start) and the [TanStack Query Firebase documentation](https://invertase.docs.page/tanstack-query-firebase/react#usage). + +# Accessing the connector +A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector `krow-connector`. + +You can find more information about connectors in the [Data Connect documentation](https://firebase.google.com/docs/data-connect#how-does). + +```javascript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig } from '@dataconnect/generated'; + +const dataConnect = getDataConnect(connectorConfig); +``` + +## Connecting to the local Emulator +By default, the connector will connect to the production service. + +To connect to the emulator, you can use the following code. +You can also follow the emulator instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#emulator-react-angular). + +```javascript +import { connectDataConnectEmulator, getDataConnect } from 'firebase/data-connect'; +import { connectorConfig } from '@dataconnect/generated'; + +const dataConnect = getDataConnect(connectorConfig); +connectDataConnectEmulator(dataConnect, 'localhost', 9399); +``` + +After it's initialized, you can call your Data Connect [queries](#queries) and [mutations](#mutations) using the hooks provided from your generated React SDK. + +# Queries + +The React generated SDK provides Query hook functions that call and return [`useDataConnectQuery`](https://react-query-firebase.invertase.dev/react/data-connect/querying) hooks from TanStack Query Firebase. + +Calling these hook functions will return a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and the most recent data returned by the Query, among other things. To learn more about these hooks and how to use them, see the [TanStack Query Firebase documentation](https://react-query-firebase.invertase.dev/react/data-connect/querying). + +TanStack React Query caches the results of your Queries, so using the same Query hook function in multiple places in your application allows the entire application to automatically see updates to that Query's data. + +Query hooks execute their Queries automatically when called, and periodically refresh, unless you change the `queryOptions` for the Query. To learn how to stop a Query from automatically executing, including how to make a query "lazy", see the [TanStack React Query documentation](https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries). + +To learn more about TanStack React Query's Queries, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/queries). + +## Using Query Hooks +Here's a general overview of how to use the generated Query hooks in your code: + +- If the Query has no variables, the Query hook function does not require arguments. +- If the Query has any required variables, the Query hook function will require at least one argument: an object that contains all the required variables for the Query. +- If the Query has some required and some optional variables, only required variables are necessary in the variables argument object, and optional variables may be provided as well. +- If all of the Query's variables are optional, the Query hook function does not require any arguments. +- Query hook functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. +- Query hooks functions can be called with or without passing in an `options` argument of type `useDataConnectQueryOptions`. To learn more about the `options` argument, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/query-options). + - ***Special case:*** If the Query has all optional variables and you would like to provide an `options` argument to the Query hook function without providing any variables, you must pass `undefined` where you would normally pass the Query's variables, and then may provide the `options` argument. + +Below are examples of how to use the `krow-connector` connector's generated Query hook functions to execute each Query. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular). + +## listEvents +You can execute the `listEvents` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts): + +```javascript +useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; +``` +You can also pass in a `DataConnect` instance to the Query hook function. +```javascript +useListEvents(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; +``` + +### Variables +The `listEvents` Query has no variables. +### Return Type +Recall that calling the `listEvents` Query hook function returns a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things. + +To check the status of a Query, use the `UseQueryResult.status` field. You can also check for pending / success / error status using the `UseQueryResult.isPending`, `UseQueryResult.isSuccess`, and `UseQueryResult.isError` fields. + +To access the data returned by a Query, use the `UseQueryResult.data` field. The data for the `listEvents` Query is of type `ListEventsData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: +```javascript +export interface ListEventsData { + events: ({ + id: UUIDString; + eventName: string; + status: EventStatus; + date: TimestampString; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + total?: number | null; + requested?: number | null; + } & Event_Key)[]; +} +``` + +To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery). + +### Using `listEvents`'s Query hook function + +```javascript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig } from '@dataconnect/generated'; +import { useListEvents } from '@dataconnect/generated/react' + +export default function ListEventsComponent() { + // You don't have to do anything to "execute" the Query. + // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query. + const query = useListEvents(); + + // You can also pass in a `DataConnect` instance to the Query hook function. + const dataConnect = getDataConnect(connectorConfig); + const query = useListEvents(dataConnect); + + // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function. + const options = { staleTime: 5 * 1000 }; + const query = useListEvents(options); + + // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object. + const dataConnect = getDataConnect(connectorConfig); + const options = { staleTime: 5 * 1000 }; + const query = useListEvents(dataConnect, options); + + // Then, you can render your component dynamically based on the status of the Query. + if (query.isPending) { + return
Loading...
; + } + + if (query.isError) { + return
Error: {query.error.message}
; + } + + // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field. + if (query.isSuccess) { + console.log(query.data.events); + } + return
Query execution {query.isSuccess ? 'successful' : 'failed'}!
; +} +``` + +# Mutations + +The React generated SDK provides Mutations hook functions that call and return [`useDataConnectMutation`](https://react-query-firebase.invertase.dev/react/data-connect/mutations) hooks from TanStack Query Firebase. + +Calling these hook functions will return a `UseMutationResult` object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, and the most recent data returned by the Mutation, among other things. To learn more about these hooks and how to use them, see the [TanStack Query Firebase documentation](https://react-query-firebase.invertase.dev/react/data-connect/mutations). + +Mutation hooks do not execute their Mutations automatically when called. Rather, after calling the Mutation hook function and getting a `UseMutationResult` object, you must call the `UseMutationResult.mutate()` function to execute the Mutation. + +To learn more about TanStack React Query's Mutations, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/mutations). + +## Using Mutation Hooks +Here's a general overview of how to use the generated Mutation hooks in your code: + +- Mutation hook functions are not called with the arguments to the Mutation. Instead, arguments are passed to `UseMutationResult.mutate()`. +- If the Mutation has no variables, the `mutate()` function does not require arguments. +- If the Mutation has any required variables, the `mutate()` function will require at least one argument: an object that contains all the required variables for the Mutation. +- If the Mutation has some required and some optional variables, only required variables are necessary in the variables argument object, and optional variables may be provided as well. +- If all of the Mutation's variables are optional, the Mutation hook function does not require any arguments. +- Mutation hook functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. +- Mutation hooks also accept an `options` argument of type `useDataConnectMutationOptions`. To learn more about the `options` argument, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/mutations#mutation-side-effects). + - `UseMutationResult.mutate()` also accepts an `options` argument of type `useDataConnectMutationOptions`. + - ***Special case:*** If the Mutation has no arguments (or all optional arguments and you wish to provide none), and you want to pass `options` to `UseMutationResult.mutate()`, you must pass `undefined` where you would normally pass the Mutation's arguments, and then may provide the options argument. + +Below are examples of how to use the `krow-connector` connector's generated Mutation hook functions to execute each Mutation. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular). + +## CreateEvent +You can execute the `CreateEvent` Mutation using the `UseMutationResult` object returned by the following Mutation hook function (which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts)): +```javascript +useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +``` +You can also pass in a `DataConnect` instance to the Mutation hook function. +```javascript +useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +``` + +### Variables +The `CreateEvent` Mutation requires an argument of type `CreateEventVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: + +```javascript +export interface CreateEventVariables { + eventName: string; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + status: EventStatus; + date: TimestampString; + shifts?: string | null; + total?: number | null; + requested?: number | null; + assignedStaff?: string | null; +} +``` +### Return Type +Recall that calling the `CreateEvent` Mutation hook function returns a `UseMutationResult` object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things. + +To check the status of a Mutation, use the `UseMutationResult.status` field. You can also check for pending / success / error status using the `UseMutationResult.isPending`, `UseMutationResult.isSuccess`, and `UseMutationResult.isError` fields. + +To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation. + +To access the data returned by a Mutation, use the `UseMutationResult.data` field. The data for the `CreateEvent` Mutation is of type `CreateEventData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: +```javascript +export interface CreateEventData { + event_insert: Event_Key; +} +``` + +To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation). + +### Using `CreateEvent`'s Mutation hook function + +```javascript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig, CreateEventVariables } from '@dataconnect/generated'; +import { useCreateEvent } from '@dataconnect/generated/react' + +export default function CreateEventComponent() { + // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation. + const mutation = useCreateEvent(); + + // You can also pass in a `DataConnect` instance to the Mutation hook function. + const dataConnect = getDataConnect(connectorConfig); + const mutation = useCreateEvent(dataConnect); + + // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function. + const options = { + onSuccess: () => { console.log('Mutation succeeded!'); } + }; + const mutation = useCreateEvent(options); + + // You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object. + const dataConnect = getDataConnect(connectorConfig); + const options = { + onSuccess: () => { console.log('Mutation succeeded!'); } + }; + const mutation = useCreateEvent(dataConnect, options); + + // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation. + // The `useCreateEvent` Mutation requires an argument of type `CreateEventVariables`: + const createEventVars: CreateEventVariables = { + eventName: ..., + isRecurring: ..., + recurrenceType: ..., // optional + businessId: ..., + vendorId: ..., // optional + status: ..., + date: ..., + shifts: ..., // optional + total: ..., // optional + requested: ..., // optional + assignedStaff: ..., // optional + }; + mutation.mutate(createEventVars); + // Variables can be defined inline as well. + mutation.mutate({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); + + // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`. + const options = { + onSuccess: () => { console.log('Mutation succeeded!'); } + }; + mutation.mutate(createEventVars, options); + + // Then, you can render your component dynamically based on the status of the Mutation. + if (mutation.isPending) { + return
Loading...
; + } + + if (mutation.isError) { + return
Error: {mutation.error.message}
; + } + + // If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field. + if (mutation.isSuccess) { + console.log(mutation.data.event_insert); + } + return
Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!
; +} +``` + diff --git a/frontend-web/src/dataconnect-generated/react/esm/index.esm.js b/frontend-web/src/dataconnect-generated/react/esm/index.esm.js new file mode 100644 index 00000000..3463a0fa --- /dev/null +++ b/frontend-web/src/dataconnect-generated/react/esm/index.esm.js @@ -0,0 +1,18 @@ +import { createEventRef, listEventsRef, connectorConfig } from '../../esm/index.esm.js'; +import { validateArgs, CallerSdkTypeEnum } from 'firebase/data-connect'; +import { useDataConnectQuery, useDataConnectMutation, validateReactArgs } from '@tanstack-query-firebase/react/data-connect'; + +export function useCreateEvent(dcOrOptions, options) { + const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); + function refFactory(vars) { + return createEventRef(dcInstance, vars); + } + return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} + + +export function useListEvents(dcOrOptions, options) { + const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); + const ref = listEventsRef(dcInstance); + return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/esm/package.json b/frontend-web/src/dataconnect-generated/react/esm/package.json new file mode 100644 index 00000000..7c34deb5 --- /dev/null +++ b/frontend-web/src/dataconnect-generated/react/esm/package.json @@ -0,0 +1 @@ +{"type":"module"} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/index.cjs.js b/frontend-web/src/dataconnect-generated/react/index.cjs.js new file mode 100644 index 00000000..52b5314b --- /dev/null +++ b/frontend-web/src/dataconnect-generated/react/index.cjs.js @@ -0,0 +1,18 @@ +const { createEventRef, listEventsRef, connectorConfig } = require('../index.cjs.js'); +const { validateArgs, CallerSdkTypeEnum } = require('firebase/data-connect'); +const { useDataConnectQuery, useDataConnectMutation, validateReactArgs } = require('@tanstack-query-firebase/react/data-connect'); + +exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) { + const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); + function refFactory(vars) { + return createEventRef(dcInstance, vars); + } + return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} + + +exports.useListEvents = function useListEvents(dcOrOptions, options) { + const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); + const ref = listEventsRef(dcInstance); + return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/index.d.ts b/frontend-web/src/dataconnect-generated/react/index.d.ts new file mode 100644 index 00000000..cab1da38 --- /dev/null +++ b/frontend-web/src/dataconnect-generated/react/index.d.ts @@ -0,0 +1,12 @@ +import { CreateEventData, CreateEventVariables, ListEventsData } from '../'; +import { UseDataConnectQueryResult, useDataConnectQueryOptions, UseDataConnectMutationResult, useDataConnectMutationOptions} from '@tanstack-query-firebase/react/data-connect'; +import { UseQueryResult, UseMutationResult} from '@tanstack/react-query'; +import { DataConnect } from 'firebase/data-connect'; +import { FirebaseError } from 'firebase/app'; + + +export function useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +export function useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; + +export function useListEvents(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; +export function useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; diff --git a/frontend-web/src/dataconnect-generated/react/package.json b/frontend-web/src/dataconnect-generated/react/package.json new file mode 100644 index 00000000..512c7ec3 --- /dev/null +++ b/frontend-web/src/dataconnect-generated/react/package.json @@ -0,0 +1,17 @@ +{ + "name": "@dataconnect/generated-react", + "version": "1.0.0", + "author": "Firebase (https://firebase.google.com/)", + "description": "Generated SDK For krow-connector", + "license": "Apache-2.0", + "engines": { + "node": " >=18.0" + }, + "typings": "index.d.ts", + "main": "index.cjs.js", + "module": "esm/index.esm.js", + "browser": "esm/index.esm.js", + "peerDependencies": { + "@tanstack-query-firebase/react": "^2.0.0" + } +} \ No newline at end of file diff --git a/internal-api-harness/package-lock.json b/internal-api-harness/package-lock.json index 1a160494..65a2b64d 100644 --- a/internal-api-harness/package-lock.json +++ b/internal-api-harness/package-lock.json @@ -8,6 +8,7 @@ "name": "internal-api-harness", "version": "0.0.0", "dependencies": { + "@dataconnect/generated": "file:src/dataconnect-generated", "@radix-ui/react-collapsible": "^1.1.12", "@radix-ui/react-label": "^2.1.8", "@radix-ui/react-select": "^2.2.6", @@ -335,6 +336,10 @@ "node": ">=6.9.0" } }, + "node_modules/@dataconnect/generated": { + "resolved": "src/dataconnect-generated", + "link": true + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.25.12", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz", @@ -3092,6 +3097,45 @@ "win32" ] }, + "node_modules/@tanstack-query-firebase/react": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@tanstack-query-firebase/react/-/react-2.1.1.tgz", + "integrity": "sha512-1hOEcfxLgorg0TwadBJeeEvoD7P4JMCJLhdO1doUQWZRs83WmwTlBJGv8GiO1y2KWaKjQh+JdgsuYCqG2dPXcA==", + "license": "Apache-2.0", + "peer": true, + "peerDependencies": { + "@tanstack/react-query": "^5", + "firebase": "^11.3.0 || ^12.0.0" + } + }, + "node_modules/@tanstack/query-core": { + "version": "5.90.10", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.10.tgz", + "integrity": "sha512-EhZVFu9rl7GfRNuJLJ3Y7wtbTnENsvzp+YpcAV7kCYiXni1v8qZh++lpw4ch4rrwC0u/EZRnBHIehzCGzwXDSQ==", + "license": "MIT", + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.90.10", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.10.tgz", + "integrity": "sha512-BKLss9Y8PQ9IUjPYQiv3/Zmlx92uxffUOX8ZZNoQlCIZBJPT5M+GOMQj7xislvVQ6l1BstBjcX0XB/aHfFYVNw==", + "license": "MIT", + "peer": true, + "dependencies": { + "@tanstack/query-core": "5.90.10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18 || ^19" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -6606,6 +6650,18 @@ "peerDependencies": { "zod": "^3.25.0 || ^4.0.0" } + }, + "src/dataconnect-generated": { + "name": "@dataconnect/generated", + "version": "1.0.0", + "license": "Apache-2.0", + "engines": { + "node": " >=18.0" + }, + "peerDependencies": { + "@tanstack-query-firebase/react": "^2.0.0", + "firebase": "^11.3.0 || ^12.0.0" + } } } } diff --git a/internal-api-harness/package.json b/internal-api-harness/package.json index 10a03ee8..b94353cc 100644 --- a/internal-api-harness/package.json +++ b/internal-api-harness/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@dataconnect/generated": "file:src/dataconnect-generated", "@radix-ui/react-collapsible": "^1.1.12", "@radix-ui/react-label": "^2.1.8", "@radix-ui/react-select": "^2.2.6", diff --git a/internal-api-harness/src/dataconnect-generated/.guides/config.json b/internal-api-harness/src/dataconnect-generated/.guides/config.json new file mode 100644 index 00000000..e37ed06f --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/.guides/config.json @@ -0,0 +1,9 @@ +{ + "description": "A set of guides for interacting with the generated firebase dataconnect sdk", + "mcpServers": { + "firebase": { + "command": "npx", + "args": ["-y", "firebase-tools@latest", "experimental:mcp"] + } + } +} diff --git a/internal-api-harness/src/dataconnect-generated/.guides/setup.md b/internal-api-harness/src/dataconnect-generated/.guides/setup.md new file mode 100644 index 00000000..64a49286 --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/.guides/setup.md @@ -0,0 +1,62 @@ +# Setup + +If the user hasn't already installed the SDK, always run the user's node package manager of choice, and install the package in the directory ../package.json. +For more information on where the library is located, look at the connector.yaml file. + +```ts +import { initializeApp } from 'firebase/app'; + +initializeApp({ + // fill in your project config here using the values from your Firebase project or from the `firebase_get_sdk_config` tool from the Firebase MCP server. +}); +``` + +Then, you can run the SDK as needed. +```ts +import { ... } from '@dataconnect/generated'; +``` + + + + +## React +### Setup + +The user should make sure to install the `@tanstack/react-query` package, along with `@tanstack-query-firebase/react` and `firebase`. + +Then, they should initialize Firebase: +```ts +import { initializeApp } from 'firebase/app'; +initializeApp(firebaseConfig); /* your config here. To generate this, you can use the `firebase_sdk_config` MCP tool */ +``` + +Then, they should add a `QueryClientProvider` to their root of their application. + +Here's an example: + +```ts +import { initializeApp } from 'firebase/app'; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; + +const firebaseConfig = { + /* your config here. To generate this, you can use the `firebase_sdk_config` MCP tool */ +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); + +// Create a TanStack Query client instance +const queryClient = new QueryClient(); + +function App() { + return ( + // Provide the client to your App + + + + ) +} + +render(, document.getElementById('root')); +``` + diff --git a/internal-api-harness/src/dataconnect-generated/.guides/usage.md b/internal-api-harness/src/dataconnect-generated/.guides/usage.md new file mode 100644 index 00000000..ded8abc8 --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/.guides/usage.md @@ -0,0 +1,69 @@ +# Basic Usage + +Always prioritize using a supported framework over using the generated SDK +directly. Supported frameworks simplify the developer experience and help ensure +best practices are followed. + + + + +### React +For each operation, there is a wrapper hook that can be used to call the operation. + +Here are all of the hooks that get generated: +```ts +import { useCreateEvent, useListEvents } from '@dataconnect/generated/react'; +// The types of these hooks are available in react/index.d.ts + +const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars); + +const { data, isPending, isSuccess, isError, error } = useListEvents(); + +``` + +Here's an example from a different generated SDK: + +```ts +import { useListAllMovies } from '@dataconnect/generated/react'; + +function MyComponent() { + const { isLoading, data, error } = useListAllMovies(); + if(isLoading) { + return
Loading...
+ } + if(error) { + return
An Error Occurred: {error}
+ } +} + +// App.tsx +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import MyComponent from './my-component'; + +function App() { + const queryClient = new QueryClient(); + return + + +} +``` + + + +## Advanced Usage +If a user is not using a supported framework, they can use the generated SDK directly. + +Here's an example of how to use it with the first 5 operations: + +```js +import { createEvent, listEvents } from '@dataconnect/generated'; + + +// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts +const { data } = await CreateEvent(dataConnect, createEventVars); + +// Operation listEvents: +const { data } = await ListEvents(dataConnect); + + +``` \ No newline at end of file diff --git a/internal-api-harness/src/dataconnect-generated/README.md b/internal-api-harness/src/dataconnect-generated/README.md new file mode 100644 index 00000000..a201a0f7 --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/README.md @@ -0,0 +1,317 @@ +# Generated TypeScript README +This README will guide you through the process of using the generated JavaScript SDK package for the connector `krow-connector`. It will also provide examples on how to use your generated SDK to call your Data Connect queries and mutations. + +**If you're looking for the `React README`, you can find it at [`dataconnect-generated/react/README.md`](./react/README.md)** + +***NOTE:** This README is generated alongside the generated SDK. If you make changes to this file, they will be overwritten when the SDK is regenerated.* + +# Table of Contents +- [**Overview**](#generated-javascript-readme) +- [**Accessing the connector**](#accessing-the-connector) + - [*Connecting to the local Emulator*](#connecting-to-the-local-emulator) +- [**Queries**](#queries) + - [*listEvents*](#listevents) +- [**Mutations**](#mutations) + - [*CreateEvent*](#createevent) + +# Accessing the connector +A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector `krow-connector`. You can find more information about connectors in the [Data Connect documentation](https://firebase.google.com/docs/data-connect#how-does). + +You can use this generated SDK by importing from the package `@dataconnect/generated` as shown below. Both CommonJS and ESM imports are supported. + +You can also follow the instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#set-client). + +```typescript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig } from '@dataconnect/generated'; + +const dataConnect = getDataConnect(connectorConfig); +``` + +## Connecting to the local Emulator +By default, the connector will connect to the production service. + +To connect to the emulator, you can use the following code. +You can also follow the emulator instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#instrument-clients). + +```typescript +import { connectDataConnectEmulator, getDataConnect } from 'firebase/data-connect'; +import { connectorConfig } from '@dataconnect/generated'; + +const dataConnect = getDataConnect(connectorConfig); +connectDataConnectEmulator(dataConnect, 'localhost', 9399); +``` + +After it's initialized, you can call your Data Connect [queries](#queries) and [mutations](#mutations) from your generated SDK. + +# Queries + +There are two ways to execute a Data Connect Query using the generated Web SDK: +- Using a Query Reference function, which returns a `QueryRef` + - The `QueryRef` can be used as an argument to `executeQuery()`, which will execute the Query and return a `QueryPromise` +- Using an action shortcut function, which returns a `QueryPromise` + - Calling the action shortcut function will execute the Query and return a `QueryPromise` + +The following is true for both the action shortcut function and the `QueryRef` function: +- The `QueryPromise` returned will resolve to the result of the Query once it has finished executing +- If the Query accepts arguments, both the action shortcut function and the `QueryRef` function accept a single argument: an object that contains all the required variables (and the optional variables) for the Query +- Both functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. + +Below are examples of how to use the `krow-connector` connector's generated functions to execute each query. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#using-queries). + +## listEvents +You can execute the `listEvents` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): +```typescript +listEvents(): QueryPromise; + +interface ListEventsRef { + ... + /* Allow users to create refs without passing in DataConnect */ + (): QueryRef; +} +export const listEventsRef: ListEventsRef; +``` +You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function. +```typescript +listEvents(dc: DataConnect): QueryPromise; + +interface ListEventsRef { + ... + (dc: DataConnect): QueryRef; +} +export const listEventsRef: ListEventsRef; +``` + +If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the listEventsRef: +```typescript +const name = listEventsRef.operationName; +console.log(name); +``` + +### Variables +The `listEvents` query has no variables. +### Return Type +Recall that executing the `listEvents` query returns a `QueryPromise` that resolves to an object with a `data` property. + +The `data` property is an object of type `ListEventsData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: +```typescript +export interface ListEventsData { + events: ({ + id: UUIDString; + eventName: string; + status: EventStatus; + date: TimestampString; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + total?: number | null; + requested?: number | null; + } & Event_Key)[]; +} +``` +### Using `listEvents`'s action shortcut function + +```typescript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig, listEvents } from '@dataconnect/generated'; + + +// Call the `listEvents()` function to execute the query. +// You can use the `await` keyword to wait for the promise to resolve. +const { data } = await listEvents(); + +// You can also pass in a `DataConnect` instance to the action shortcut function. +const dataConnect = getDataConnect(connectorConfig); +const { data } = await listEvents(dataConnect); + +console.log(data.events); + +// Or, you can use the `Promise` API. +listEvents().then((response) => { + const data = response.data; + console.log(data.events); +}); +``` + +### Using `listEvents`'s `QueryRef` function + +```typescript +import { getDataConnect, executeQuery } from 'firebase/data-connect'; +import { connectorConfig, listEventsRef } from '@dataconnect/generated'; + + +// Call the `listEventsRef()` function to get a reference to the query. +const ref = listEventsRef(); + +// You can also pass in a `DataConnect` instance to the `QueryRef` function. +const dataConnect = getDataConnect(connectorConfig); +const ref = listEventsRef(dataConnect); + +// Call `executeQuery()` on the reference to execute the query. +// You can use the `await` keyword to wait for the promise to resolve. +const { data } = await executeQuery(ref); + +console.log(data.events); + +// Or, you can use the `Promise` API. +executeQuery(ref).then((response) => { + const data = response.data; + console.log(data.events); +}); +``` + +# Mutations + +There are two ways to execute a Data Connect Mutation using the generated Web SDK: +- Using a Mutation Reference function, which returns a `MutationRef` + - The `MutationRef` can be used as an argument to `executeMutation()`, which will execute the Mutation and return a `MutationPromise` +- Using an action shortcut function, which returns a `MutationPromise` + - Calling the action shortcut function will execute the Mutation and return a `MutationPromise` + +The following is true for both the action shortcut function and the `MutationRef` function: +- The `MutationPromise` returned will resolve to the result of the Mutation once it has finished executing +- If the Mutation accepts arguments, both the action shortcut function and the `MutationRef` function accept a single argument: an object that contains all the required variables (and the optional variables) for the Mutation +- Both functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. + +Below are examples of how to use the `krow-connector` connector's generated functions to execute each mutation. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#using-mutations). + +## CreateEvent +You can execute the `CreateEvent` mutation using the following action shortcut function, or by calling `executeMutation()` after calling the following `MutationRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts): +```typescript +createEvent(vars: CreateEventVariables): MutationPromise; + +interface CreateEventRef { + ... + /* Allow users to create refs without passing in DataConnect */ + (vars: CreateEventVariables): MutationRef; +} +export const createEventRef: CreateEventRef; +``` +You can also pass in a `DataConnect` instance to the action shortcut function or `MutationRef` function. +```typescript +createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; + +interface CreateEventRef { + ... + (dc: DataConnect, vars: CreateEventVariables): MutationRef; +} +export const createEventRef: CreateEventRef; +``` + +If you need the name of the operation without creating a ref, you can retrieve the operation name by calling the `operationName` property on the createEventRef: +```typescript +const name = createEventRef.operationName; +console.log(name); +``` + +### Variables +The `CreateEvent` mutation requires an argument of type `CreateEventVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: + +```typescript +export interface CreateEventVariables { + eventName: string; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + status: EventStatus; + date: TimestampString; + shifts?: string | null; + total?: number | null; + requested?: number | null; + assignedStaff?: string | null; +} +``` +### Return Type +Recall that executing the `CreateEvent` mutation returns a `MutationPromise` that resolves to an object with a `data` property. + +The `data` property is an object of type `CreateEventData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields: +```typescript +export interface CreateEventData { + event_insert: Event_Key; +} +``` +### Using `CreateEvent`'s action shortcut function + +```typescript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig, createEvent, CreateEventVariables } from '@dataconnect/generated'; + +// The `CreateEvent` mutation requires an argument of type `CreateEventVariables`: +const createEventVars: CreateEventVariables = { + eventName: ..., + isRecurring: ..., + recurrenceType: ..., // optional + businessId: ..., + vendorId: ..., // optional + status: ..., + date: ..., + shifts: ..., // optional + total: ..., // optional + requested: ..., // optional + assignedStaff: ..., // optional +}; + +// Call the `createEvent()` function to execute the mutation. +// You can use the `await` keyword to wait for the promise to resolve. +const { data } = await createEvent(createEventVars); +// Variables can be defined inline as well. +const { data } = await createEvent({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); + +// You can also pass in a `DataConnect` instance to the action shortcut function. +const dataConnect = getDataConnect(connectorConfig); +const { data } = await createEvent(dataConnect, createEventVars); + +console.log(data.event_insert); + +// Or, you can use the `Promise` API. +createEvent(createEventVars).then((response) => { + const data = response.data; + console.log(data.event_insert); +}); +``` + +### Using `CreateEvent`'s `MutationRef` function + +```typescript +import { getDataConnect, executeMutation } from 'firebase/data-connect'; +import { connectorConfig, createEventRef, CreateEventVariables } from '@dataconnect/generated'; + +// The `CreateEvent` mutation requires an argument of type `CreateEventVariables`: +const createEventVars: CreateEventVariables = { + eventName: ..., + isRecurring: ..., + recurrenceType: ..., // optional + businessId: ..., + vendorId: ..., // optional + status: ..., + date: ..., + shifts: ..., // optional + total: ..., // optional + requested: ..., // optional + assignedStaff: ..., // optional +}; + +// Call the `createEventRef()` function to get a reference to the mutation. +const ref = createEventRef(createEventVars); +// Variables can be defined inline as well. +const ref = createEventRef({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); + +// You can also pass in a `DataConnect` instance to the `MutationRef` function. +const dataConnect = getDataConnect(connectorConfig); +const ref = createEventRef(dataConnect, createEventVars); + +// Call `executeMutation()` on the reference to execute the mutation. +// You can use the `await` keyword to wait for the promise to resolve. +const { data } = await executeMutation(ref); + +console.log(data.event_insert); + +// Or, you can use the `Promise` API. +executeMutation(ref).then((response) => { + const data = response.data; + console.log(data.event_insert); +}); +``` + diff --git a/internal-api-harness/src/dataconnect-generated/esm/index.esm.js b/internal-api-harness/src/dataconnect-generated/esm/index.esm.js new file mode 100644 index 00000000..232d764e --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/esm/index.esm.js @@ -0,0 +1,46 @@ +import { queryRef, executeQuery, mutationRef, executeMutation, validateArgs } from 'firebase/data-connect'; + +export const EventStatus = { + DRAFT: "DRAFT", + ACTIVE: "ACTIVE", + PENDING: "PENDING", + ASSIGNED: "ASSIGNED", + CONFIRMED: "CONFIRMED", + COMPLETED: "COMPLETED", + CANCELED: "CANCELED", +} + +export const RecurrenceType = { + SINGLE: "SINGLE", + DATE_RANGE: "DATE_RANGE", + SCATTER: "SCATTER", +} + +export const connectorConfig = { + connector: 'krow-connector', + service: 'krow-workforce-db', + location: 'us-central1' +}; + +export const createEventRef = (dcOrVars, vars) => { + const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); + dcInstance._useGeneratedSdk(); + return mutationRef(dcInstance, 'CreateEvent', inputVars); +} +createEventRef.operationName = 'CreateEvent'; + +export function createEvent(dcOrVars, vars) { + return executeMutation(createEventRef(dcOrVars, vars)); +} + +export const listEventsRef = (dc) => { + const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); + dcInstance._useGeneratedSdk(); + return queryRef(dcInstance, 'listEvents'); +} +listEventsRef.operationName = 'listEvents'; + +export function listEvents(dc) { + return executeQuery(listEventsRef(dc)); +} + diff --git a/internal-api-harness/src/dataconnect-generated/esm/package.json b/internal-api-harness/src/dataconnect-generated/esm/package.json new file mode 100644 index 00000000..7c34deb5 --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/esm/package.json @@ -0,0 +1 @@ +{"type":"module"} \ No newline at end of file diff --git a/internal-api-harness/src/dataconnect-generated/index.cjs.js b/internal-api-harness/src/dataconnect-generated/index.cjs.js new file mode 100644 index 00000000..4ee6e173 --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/index.cjs.js @@ -0,0 +1,50 @@ +const { queryRef, executeQuery, mutationRef, executeMutation, validateArgs } = require('firebase/data-connect'); + +const EventStatus = { + DRAFT: "DRAFT", + ACTIVE: "ACTIVE", + PENDING: "PENDING", + ASSIGNED: "ASSIGNED", + CONFIRMED: "CONFIRMED", + COMPLETED: "COMPLETED", + CANCELED: "CANCELED", +} +exports.EventStatus = EventStatus; + +const RecurrenceType = { + SINGLE: "SINGLE", + DATE_RANGE: "DATE_RANGE", + SCATTER: "SCATTER", +} +exports.RecurrenceType = RecurrenceType; + +const connectorConfig = { + connector: 'krow-connector', + service: 'krow-workforce-db', + location: 'us-central1' +}; +exports.connectorConfig = connectorConfig; + +const createEventRef = (dcOrVars, vars) => { + const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); + dcInstance._useGeneratedSdk(); + return mutationRef(dcInstance, 'CreateEvent', inputVars); +} +createEventRef.operationName = 'CreateEvent'; +exports.createEventRef = createEventRef; + +exports.createEvent = function createEvent(dcOrVars, vars) { + return executeMutation(createEventRef(dcOrVars, vars)); +}; + +const listEventsRef = (dc) => { + const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); + dcInstance._useGeneratedSdk(); + return queryRef(dcInstance, 'listEvents'); +} +listEventsRef.operationName = 'listEvents'; +exports.listEventsRef = listEventsRef; + +exports.listEvents = function listEvents(dc) { + return executeQuery(listEventsRef(dc)); +}; diff --git a/internal-api-harness/src/dataconnect-generated/index.d.ts b/internal-api-harness/src/dataconnect-generated/index.d.ts new file mode 100644 index 00000000..856ff493 --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/index.d.ts @@ -0,0 +1,90 @@ +import { ConnectorConfig, DataConnect, QueryRef, QueryPromise, MutationRef, MutationPromise } from 'firebase/data-connect'; + +export const connectorConfig: ConnectorConfig; + +export type TimestampString = string; +export type UUIDString = string; +export type Int64String = string; +export type DateString = string; + + +export enum EventStatus { + DRAFT = "DRAFT", + ACTIVE = "ACTIVE", + PENDING = "PENDING", + ASSIGNED = "ASSIGNED", + CONFIRMED = "CONFIRMED", + COMPLETED = "COMPLETED", + CANCELED = "CANCELED", +}; + +export enum RecurrenceType { + SINGLE = "SINGLE", + DATE_RANGE = "DATE_RANGE", + SCATTER = "SCATTER", +}; + + + +export interface CreateEventData { + event_insert: Event_Key; +} + +export interface CreateEventVariables { + eventName: string; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + status: EventStatus; + date: TimestampString; + shifts?: string | null; + total?: number | null; + requested?: number | null; + assignedStaff?: string | null; +} + +export interface Event_Key { + id: UUIDString; + __typename?: 'Event_Key'; +} + +export interface ListEventsData { + events: ({ + id: UUIDString; + eventName: string; + status: EventStatus; + date: TimestampString; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + total?: number | null; + requested?: number | null; + } & Event_Key)[]; +} + +interface CreateEventRef { + /* Allow users to create refs without passing in DataConnect */ + (vars: CreateEventVariables): MutationRef; + /* Allow users to pass in custom DataConnect instances */ + (dc: DataConnect, vars: CreateEventVariables): MutationRef; + operationName: string; +} +export const createEventRef: CreateEventRef; + +export function createEvent(vars: CreateEventVariables): MutationPromise; +export function createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; + +interface ListEventsRef { + /* Allow users to create refs without passing in DataConnect */ + (): QueryRef; + /* Allow users to pass in custom DataConnect instances */ + (dc: DataConnect): QueryRef; + operationName: string; +} +export const listEventsRef: ListEventsRef; + +export function listEvents(): QueryPromise; +export function listEvents(dc: DataConnect): QueryPromise; + diff --git a/internal-api-harness/src/dataconnect-generated/package.json b/internal-api-harness/src/dataconnect-generated/package.json new file mode 100644 index 00000000..b686c0a0 --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/package.json @@ -0,0 +1,32 @@ +{ + "name": "@dataconnect/generated", + "version": "1.0.0", + "author": "Firebase (https://firebase.google.com/)", + "description": "Generated SDK For krow-connector", + "license": "Apache-2.0", + "engines": { + "node": " >=18.0" + }, + "typings": "index.d.ts", + "module": "esm/index.esm.js", + "main": "index.cjs.js", + "browser": "esm/index.esm.js", + "exports": { + ".": { + "types": "./index.d.ts", + "require": "./index.cjs.js", + "default": "./esm/index.esm.js" + }, + "./react": { + "types": "./react/index.d.ts", + "require": "./react/index.cjs.js", + "import": "./react/esm/index.esm.js", + "default": "./react/esm/index.esm.js" + }, + "./package.json": "./package.json" + }, + "peerDependencies": { + "firebase": "^11.3.0 || ^12.0.0", + "@tanstack-query-firebase/react": "^2.0.0" + } +} \ No newline at end of file diff --git a/internal-api-harness/src/dataconnect-generated/react/README.md b/internal-api-harness/src/dataconnect-generated/react/README.md new file mode 100644 index 00000000..24b8cec3 --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/react/README.md @@ -0,0 +1,332 @@ +# Generated React README +This README will guide you through the process of using the generated React SDK package for the connector `krow-connector`. It will also provide examples on how to use your generated SDK to call your Data Connect queries and mutations. + +**If you're looking for the `JavaScript README`, you can find it at [`dataconnect-generated/README.md`](../README.md)** + +***NOTE:** This README is generated alongside the generated SDK. If you make changes to this file, they will be overwritten when the SDK is regenerated.* + +You can use this generated SDK by importing from the package `@dataconnect/generated/react` as shown below. Both CommonJS and ESM imports are supported. + +You can also follow the instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#react). + +# Table of Contents +- [**Overview**](#generated-react-readme) +- [**TanStack Query Firebase & TanStack React Query**](#tanstack-query-firebase-tanstack-react-query) + - [*Package Installation*](#installing-tanstack-query-firebase-and-tanstack-react-query-packages) + - [*Configuring TanStack Query*](#configuring-tanstack-query) +- [**Accessing the connector**](#accessing-the-connector) + - [*Connecting to the local Emulator*](#connecting-to-the-local-emulator) +- [**Queries**](#queries) + - [*listEvents*](#listevents) +- [**Mutations**](#mutations) + - [*CreateEvent*](#createevent) + +# TanStack Query Firebase & TanStack React Query +This SDK provides [React](https://react.dev/) hooks generated specific to your application, for the operations found in the connector `krow-connector`. These hooks are generated using [TanStack Query Firebase](https://react-query-firebase.invertase.dev/) by our partners at Invertase, a library built on top of [TanStack React Query v5](https://tanstack.com/query/v5/docs/framework/react/overview). + +***You do not need to be familiar with Tanstack Query or Tanstack Query Firebase to use this SDK.*** However, you may find it useful to learn more about them, as they will empower you as a user of this Generated React SDK. + +## Installing TanStack Query Firebase and TanStack React Query Packages +In order to use the React generated SDK, you must install the `TanStack React Query` and `TanStack Query Firebase` packages. +```bash +npm i --save @tanstack/react-query @tanstack-query-firebase/react +``` +```bash +npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0 +``` + +You can also follow the installation instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#tanstack-install), or the [TanStack Query Firebase documentation](https://react-query-firebase.invertase.dev/react) and [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/installation). + +## Configuring TanStack Query +In order to use the React generated SDK in your application, you must wrap your application's component tree in a `QueryClientProvider` component from TanStack React Query. None of your generated React SDK hooks will work without this provider. + +```javascript +import { QueryClientProvider } from '@tanstack/react-query'; + +// Create a TanStack Query client instance +const queryClient = new QueryClient() + +function App() { + return ( + // Provide the client to your App + + + + ) +} +``` + +To learn more about `QueryClientProvider`, see the [TanStack React Query documentation](https://tanstack.com/query/latest/docs/framework/react/quick-start) and the [TanStack Query Firebase documentation](https://invertase.docs.page/tanstack-query-firebase/react#usage). + +# Accessing the connector +A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector `krow-connector`. + +You can find more information about connectors in the [Data Connect documentation](https://firebase.google.com/docs/data-connect#how-does). + +```javascript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig } from '@dataconnect/generated'; + +const dataConnect = getDataConnect(connectorConfig); +``` + +## Connecting to the local Emulator +By default, the connector will connect to the production service. + +To connect to the emulator, you can use the following code. +You can also follow the emulator instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#emulator-react-angular). + +```javascript +import { connectDataConnectEmulator, getDataConnect } from 'firebase/data-connect'; +import { connectorConfig } from '@dataconnect/generated'; + +const dataConnect = getDataConnect(connectorConfig); +connectDataConnectEmulator(dataConnect, 'localhost', 9399); +``` + +After it's initialized, you can call your Data Connect [queries](#queries) and [mutations](#mutations) using the hooks provided from your generated React SDK. + +# Queries + +The React generated SDK provides Query hook functions that call and return [`useDataConnectQuery`](https://react-query-firebase.invertase.dev/react/data-connect/querying) hooks from TanStack Query Firebase. + +Calling these hook functions will return a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and the most recent data returned by the Query, among other things. To learn more about these hooks and how to use them, see the [TanStack Query Firebase documentation](https://react-query-firebase.invertase.dev/react/data-connect/querying). + +TanStack React Query caches the results of your Queries, so using the same Query hook function in multiple places in your application allows the entire application to automatically see updates to that Query's data. + +Query hooks execute their Queries automatically when called, and periodically refresh, unless you change the `queryOptions` for the Query. To learn how to stop a Query from automatically executing, including how to make a query "lazy", see the [TanStack React Query documentation](https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries). + +To learn more about TanStack React Query's Queries, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/queries). + +## Using Query Hooks +Here's a general overview of how to use the generated Query hooks in your code: + +- If the Query has no variables, the Query hook function does not require arguments. +- If the Query has any required variables, the Query hook function will require at least one argument: an object that contains all the required variables for the Query. +- If the Query has some required and some optional variables, only required variables are necessary in the variables argument object, and optional variables may be provided as well. +- If all of the Query's variables are optional, the Query hook function does not require any arguments. +- Query hook functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. +- Query hooks functions can be called with or without passing in an `options` argument of type `useDataConnectQueryOptions`. To learn more about the `options` argument, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/query-options). + - ***Special case:*** If the Query has all optional variables and you would like to provide an `options` argument to the Query hook function without providing any variables, you must pass `undefined` where you would normally pass the Query's variables, and then may provide the `options` argument. + +Below are examples of how to use the `krow-connector` connector's generated Query hook functions to execute each Query. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular). + +## listEvents +You can execute the `listEvents` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts): + +```javascript +useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; +``` +You can also pass in a `DataConnect` instance to the Query hook function. +```javascript +useListEvents(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; +``` + +### Variables +The `listEvents` Query has no variables. +### Return Type +Recall that calling the `listEvents` Query hook function returns a `UseQueryResult` object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things. + +To check the status of a Query, use the `UseQueryResult.status` field. You can also check for pending / success / error status using the `UseQueryResult.isPending`, `UseQueryResult.isSuccess`, and `UseQueryResult.isError` fields. + +To access the data returned by a Query, use the `UseQueryResult.data` field. The data for the `listEvents` Query is of type `ListEventsData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: +```javascript +export interface ListEventsData { + events: ({ + id: UUIDString; + eventName: string; + status: EventStatus; + date: TimestampString; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + total?: number | null; + requested?: number | null; + } & Event_Key)[]; +} +``` + +To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery). + +### Using `listEvents`'s Query hook function + +```javascript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig } from '@dataconnect/generated'; +import { useListEvents } from '@dataconnect/generated/react' + +export default function ListEventsComponent() { + // You don't have to do anything to "execute" the Query. + // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query. + const query = useListEvents(); + + // You can also pass in a `DataConnect` instance to the Query hook function. + const dataConnect = getDataConnect(connectorConfig); + const query = useListEvents(dataConnect); + + // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function. + const options = { staleTime: 5 * 1000 }; + const query = useListEvents(options); + + // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object. + const dataConnect = getDataConnect(connectorConfig); + const options = { staleTime: 5 * 1000 }; + const query = useListEvents(dataConnect, options); + + // Then, you can render your component dynamically based on the status of the Query. + if (query.isPending) { + return
Loading...
; + } + + if (query.isError) { + return
Error: {query.error.message}
; + } + + // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field. + if (query.isSuccess) { + console.log(query.data.events); + } + return
Query execution {query.isSuccess ? 'successful' : 'failed'}!
; +} +``` + +# Mutations + +The React generated SDK provides Mutations hook functions that call and return [`useDataConnectMutation`](https://react-query-firebase.invertase.dev/react/data-connect/mutations) hooks from TanStack Query Firebase. + +Calling these hook functions will return a `UseMutationResult` object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, and the most recent data returned by the Mutation, among other things. To learn more about these hooks and how to use them, see the [TanStack Query Firebase documentation](https://react-query-firebase.invertase.dev/react/data-connect/mutations). + +Mutation hooks do not execute their Mutations automatically when called. Rather, after calling the Mutation hook function and getting a `UseMutationResult` object, you must call the `UseMutationResult.mutate()` function to execute the Mutation. + +To learn more about TanStack React Query's Mutations, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/mutations). + +## Using Mutation Hooks +Here's a general overview of how to use the generated Mutation hooks in your code: + +- Mutation hook functions are not called with the arguments to the Mutation. Instead, arguments are passed to `UseMutationResult.mutate()`. +- If the Mutation has no variables, the `mutate()` function does not require arguments. +- If the Mutation has any required variables, the `mutate()` function will require at least one argument: an object that contains all the required variables for the Mutation. +- If the Mutation has some required and some optional variables, only required variables are necessary in the variables argument object, and optional variables may be provided as well. +- If all of the Mutation's variables are optional, the Mutation hook function does not require any arguments. +- Mutation hook functions can be called with or without passing in a `DataConnect` instance as an argument. If no `DataConnect` argument is passed in, then the generated SDK will call `getDataConnect(connectorConfig)` behind the scenes for you. +- Mutation hooks also accept an `options` argument of type `useDataConnectMutationOptions`. To learn more about the `options` argument, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/mutations#mutation-side-effects). + - `UseMutationResult.mutate()` also accepts an `options` argument of type `useDataConnectMutationOptions`. + - ***Special case:*** If the Mutation has no arguments (or all optional arguments and you wish to provide none), and you want to pass `options` to `UseMutationResult.mutate()`, you must pass `undefined` where you would normally pass the Mutation's arguments, and then may provide the options argument. + +Below are examples of how to use the `krow-connector` connector's generated Mutation hook functions to execute each Mutation. You can also follow the examples from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular). + +## CreateEvent +You can execute the `CreateEvent` Mutation using the `UseMutationResult` object returned by the following Mutation hook function (which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts)): +```javascript +useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +``` +You can also pass in a `DataConnect` instance to the Mutation hook function. +```javascript +useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +``` + +### Variables +The `CreateEvent` Mutation requires an argument of type `CreateEventVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: + +```javascript +export interface CreateEventVariables { + eventName: string; + isRecurring: boolean; + recurrenceType?: RecurrenceType | null; + businessId: UUIDString; + vendorId?: UUIDString | null; + status: EventStatus; + date: TimestampString; + shifts?: string | null; + total?: number | null; + requested?: number | null; + assignedStaff?: string | null; +} +``` +### Return Type +Recall that calling the `CreateEvent` Mutation hook function returns a `UseMutationResult` object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things. + +To check the status of a Mutation, use the `UseMutationResult.status` field. You can also check for pending / success / error status using the `UseMutationResult.isPending`, `UseMutationResult.isSuccess`, and `UseMutationResult.isError` fields. + +To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation. + +To access the data returned by a Mutation, use the `UseMutationResult.data` field. The data for the `CreateEvent` Mutation is of type `CreateEventData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields: +```javascript +export interface CreateEventData { + event_insert: Event_Key; +} +``` + +To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation). + +### Using `CreateEvent`'s Mutation hook function + +```javascript +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig, CreateEventVariables } from '@dataconnect/generated'; +import { useCreateEvent } from '@dataconnect/generated/react' + +export default function CreateEventComponent() { + // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation. + const mutation = useCreateEvent(); + + // You can also pass in a `DataConnect` instance to the Mutation hook function. + const dataConnect = getDataConnect(connectorConfig); + const mutation = useCreateEvent(dataConnect); + + // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function. + const options = { + onSuccess: () => { console.log('Mutation succeeded!'); } + }; + const mutation = useCreateEvent(options); + + // You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object. + const dataConnect = getDataConnect(connectorConfig); + const options = { + onSuccess: () => { console.log('Mutation succeeded!'); } + }; + const mutation = useCreateEvent(dataConnect, options); + + // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation. + // The `useCreateEvent` Mutation requires an argument of type `CreateEventVariables`: + const createEventVars: CreateEventVariables = { + eventName: ..., + isRecurring: ..., + recurrenceType: ..., // optional + businessId: ..., + vendorId: ..., // optional + status: ..., + date: ..., + shifts: ..., // optional + total: ..., // optional + requested: ..., // optional + assignedStaff: ..., // optional + }; + mutation.mutate(createEventVars); + // Variables can be defined inline as well. + mutation.mutate({ eventName: ..., isRecurring: ..., recurrenceType: ..., businessId: ..., vendorId: ..., status: ..., date: ..., shifts: ..., total: ..., requested: ..., assignedStaff: ..., }); + + // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`. + const options = { + onSuccess: () => { console.log('Mutation succeeded!'); } + }; + mutation.mutate(createEventVars, options); + + // Then, you can render your component dynamically based on the status of the Mutation. + if (mutation.isPending) { + return
Loading...
; + } + + if (mutation.isError) { + return
Error: {mutation.error.message}
; + } + + // If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field. + if (mutation.isSuccess) { + console.log(mutation.data.event_insert); + } + return
Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!
; +} +``` + diff --git a/internal-api-harness/src/dataconnect-generated/react/esm/index.esm.js b/internal-api-harness/src/dataconnect-generated/react/esm/index.esm.js new file mode 100644 index 00000000..3463a0fa --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/react/esm/index.esm.js @@ -0,0 +1,18 @@ +import { createEventRef, listEventsRef, connectorConfig } from '../../esm/index.esm.js'; +import { validateArgs, CallerSdkTypeEnum } from 'firebase/data-connect'; +import { useDataConnectQuery, useDataConnectMutation, validateReactArgs } from '@tanstack-query-firebase/react/data-connect'; + +export function useCreateEvent(dcOrOptions, options) { + const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); + function refFactory(vars) { + return createEventRef(dcInstance, vars); + } + return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} + + +export function useListEvents(dcOrOptions, options) { + const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); + const ref = listEventsRef(dcInstance); + return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} \ No newline at end of file diff --git a/internal-api-harness/src/dataconnect-generated/react/esm/package.json b/internal-api-harness/src/dataconnect-generated/react/esm/package.json new file mode 100644 index 00000000..7c34deb5 --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/react/esm/package.json @@ -0,0 +1 @@ +{"type":"module"} \ No newline at end of file diff --git a/internal-api-harness/src/dataconnect-generated/react/index.cjs.js b/internal-api-harness/src/dataconnect-generated/react/index.cjs.js new file mode 100644 index 00000000..52b5314b --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/react/index.cjs.js @@ -0,0 +1,18 @@ +const { createEventRef, listEventsRef, connectorConfig } = require('../index.cjs.js'); +const { validateArgs, CallerSdkTypeEnum } = require('firebase/data-connect'); +const { useDataConnectQuery, useDataConnectMutation, validateReactArgs } = require('@tanstack-query-firebase/react/data-connect'); + +exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) { + const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); + function refFactory(vars) { + return createEventRef(dcInstance, vars); + } + return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} + + +exports.useListEvents = function useListEvents(dcOrOptions, options) { + const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); + const ref = listEventsRef(dcInstance); + return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} \ No newline at end of file diff --git a/internal-api-harness/src/dataconnect-generated/react/index.d.ts b/internal-api-harness/src/dataconnect-generated/react/index.d.ts new file mode 100644 index 00000000..cab1da38 --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/react/index.d.ts @@ -0,0 +1,12 @@ +import { CreateEventData, CreateEventVariables, ListEventsData } from '../'; +import { UseDataConnectQueryResult, useDataConnectQueryOptions, UseDataConnectMutationResult, useDataConnectMutationOptions} from '@tanstack-query-firebase/react/data-connect'; +import { UseQueryResult, UseMutationResult} from '@tanstack/react-query'; +import { DataConnect } from 'firebase/data-connect'; +import { FirebaseError } from 'firebase/app'; + + +export function useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +export function useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; + +export function useListEvents(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; +export function useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; diff --git a/internal-api-harness/src/dataconnect-generated/react/package.json b/internal-api-harness/src/dataconnect-generated/react/package.json new file mode 100644 index 00000000..512c7ec3 --- /dev/null +++ b/internal-api-harness/src/dataconnect-generated/react/package.json @@ -0,0 +1,17 @@ +{ + "name": "@dataconnect/generated-react", + "version": "1.0.0", + "author": "Firebase (https://firebase.google.com/)", + "description": "Generated SDK For krow-connector", + "license": "Apache-2.0", + "engines": { + "node": " >=18.0" + }, + "typings": "index.d.ts", + "main": "index.cjs.js", + "module": "esm/index.esm.js", + "browser": "esm/index.esm.js", + "peerDependencies": { + "@tanstack-query-firebase/react": "^2.0.0" + } +} \ No newline at end of file From 38b68e8520dade2f86e5bf5915e7a091ba8589cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Salazar?= <73718835+joshrs23@users.noreply.github.com> Date: Wed, 19 Nov 2025 15:53:11 -0500 Subject: [PATCH 4/7] new schema for event adding authid for created by and chaging type for assiged_staff and shits --- dataconnect/schema/event.gql | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dataconnect/schema/event.gql b/dataconnect/schema/event.gql index 4a7b2392..96d4f67a 100644 --- a/dataconnect/schema/event.gql +++ b/dataconnect/schema/event.gql @@ -25,13 +25,13 @@ type Event @table(name: "events") { vendorId: UUID status: EventStatus! date: Timestamp! - shifts: String @col(dataType: "jsonb") + shifts: String total: Float requested: Int - assignedStaff: String @col(dataType: "jsonb") + assignedStaff: String createdDate: Timestamp @default(expr: "request.time") updatedDate: Timestamp @default(expr: "request.time") - createdBy: String + createdBy: String @default(expr: "auth.uid") } From 35f0bc03fdc703dfcfdae9dad30cdad70030462b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Salazar?= <73718835+joshrs23@users.noreply.github.com> Date: Wed, 19 Nov 2025 15:57:45 -0500 Subject: [PATCH 5/7] new configuration for dataconnect request in internal api harness --- internal-api-harness/src/api/krowSDK.js | 83 ++++++++++++++++++++++++- internal-api-harness/src/firebase.js | 3 + 2 files changed, 84 insertions(+), 2 deletions(-) diff --git a/internal-api-harness/src/api/krowSDK.js b/internal-api-harness/src/api/krowSDK.js index 7f72449e..4ab64798 100644 --- a/internal-api-harness/src/api/krowSDK.js +++ b/internal-api-harness/src/api/krowSDK.js @@ -1,7 +1,9 @@ import apiClient from './client'; -import { auth } from '../firebase'; +import { auth, dataConnect } from '../firebase'; import { signOut } from 'firebase/auth'; +import * as dcSdk from '@dataconnect/generated'; // listEvents, createEvent, etc. + // --- Auth Module --- const authModule = { /** @@ -96,7 +98,7 @@ const coreIntegrationsModule = { // --- Entities Module --- // Based on docs/07-reference-base44-api-export.md -const entityNames = [ +/*const entityNames = [ "User", "Event", "Staff", "Vendor", "VendorRate", "Invoice", "Business", "Certification", "Team", "Conversation", "Message", "ActivityLog", "Enterprise", "Sector", "Partner", "Order", "Shift" @@ -134,6 +136,83 @@ entityNames.forEach(entityName => { return data; } }; +});*/ + +const dataconnectEntityConfig = { + Event: { + list: 'listEvents', + create: 'createEvent', + // get: 'getEvent', + // update: 'updateEvent', + // delete: 'deleteEvent', + // filter: 'filterEvents', + }, + + // Staff: { + // list: 'listStaff', + // create: 'createStaff', + // ... + // }, +}; + +// Helper for methods not implemented +const notImplemented = (entityName, method) => async () => { + throw new Error(`${entityName}.${method} is not implemented yet for Data Connect`); +}; + +// --- Entities Module ( Data Connect, without REST Base44) --- +const entitiesModule = {}; + +Object.entries(dataconnectEntityConfig).forEach(([entityName, ops]) => { + entitiesModule[entityName] = { + + get: notImplemented(entityName, 'get'), + update: notImplemented(entityName, 'update'), + delete: notImplemented(entityName, 'delete'), + filter: notImplemented(entityName, 'filter'), + list: notImplemented(entityName, 'list'), + create: notImplemented(entityName, 'create'), + + // list + ...(ops.list && { + list: async (params) => { + const fn = dcSdk[ops.list]; + if (typeof fn !== 'function') { + throw new Error( + `Data Connect operation "${ops.list}" not found for entity "${entityName}".` + ); + } + + return fn(dataConnect); + }, + }), + + // create + ...(ops.create && { + create: async (params) => { + const fn = dcSdk[ops.create]; + if (typeof fn !== 'function') { + throw new Error( + `Data Connect operation "${ops.create}" not found for entity "${entityName}".` + ); + } + + const { data } = params ?? {}; + if (!data) { + throw new Error( + `${entityName}.create expects a payload like { data: { ...fields } }` + ); + } + + return fn(dataConnect, data); + }, + }), + + // ...(ops.get && { get: async (params) => { ... } }), + // ...(ops.update && { update: async (params) => { ... } }), + // ...(ops.delete && { delete: async (params) => { ... } }), + // ...(ops.filter && { filter: async (params) => { ... } }), + }; }); diff --git a/internal-api-harness/src/firebase.js b/internal-api-harness/src/firebase.js index fc4f44e1..3455c48f 100644 --- a/internal-api-harness/src/firebase.js +++ b/internal-api-harness/src/firebase.js @@ -1,6 +1,8 @@ // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; +import { getDataConnect } from 'firebase/data-connect'; +import { connectorConfig } from '@dataconnect/generated'; // Your web app's Firebase configuration const firebaseConfig = { @@ -14,4 +16,5 @@ const firebaseConfig = { // Initialize Firebase const app = initializeApp(firebaseConfig); +export const dataConnect = getDataConnect(app, connectorConfig); export const auth = getAuth(app); \ No newline at end of file From e104f67f1d95cdfb12ccf16a0f247c32abe6e4ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Salazar?= <73718835+joshrs23@users.noreply.github.com> Date: Wed, 19 Nov 2025 15:58:24 -0500 Subject: [PATCH 6/7] actual schemas for front --- .../dataconnect-generated/.guides/usage.md | 14 +++++------ .../dataconnect-generated/esm/index.esm.js | 22 ++++++++--------- .../src/dataconnect-generated/index.cjs.js | 24 +++++++++---------- .../src/dataconnect-generated/index.d.ts | 24 +++++++++---------- .../react/esm/index.esm.js | 15 ++++++------ .../dataconnect-generated/react/index.cjs.js | 15 ++++++------ .../dataconnect-generated/react/index.d.ts | 8 +++---- .../dataconnect-generated/.guides/usage.md | 14 +++++------ .../dataconnect-generated/esm/index.esm.js | 22 ++++++++--------- .../src/dataconnect-generated/index.cjs.js | 24 +++++++++---------- .../src/dataconnect-generated/index.d.ts | 24 +++++++++---------- .../react/esm/index.esm.js | 15 ++++++------ .../dataconnect-generated/react/index.cjs.js | 15 ++++++------ .../dataconnect-generated/react/index.d.ts | 8 +++---- 14 files changed, 120 insertions(+), 124 deletions(-) diff --git a/frontend-web/src/dataconnect-generated/.guides/usage.md b/frontend-web/src/dataconnect-generated/.guides/usage.md index ded8abc8..8c0adfb2 100644 --- a/frontend-web/src/dataconnect-generated/.guides/usage.md +++ b/frontend-web/src/dataconnect-generated/.guides/usage.md @@ -12,13 +12,13 @@ For each operation, there is a wrapper hook that can be used to call the operati Here are all of the hooks that get generated: ```ts -import { useCreateEvent, useListEvents } from '@dataconnect/generated/react'; +import { useListEvents, useCreateEvent } from '@dataconnect/generated/react'; // The types of these hooks are available in react/index.d.ts -const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars); - const { data, isPending, isSuccess, isError, error } = useListEvents(); +const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars); + ``` Here's an example from a different generated SDK: @@ -56,14 +56,14 @@ If a user is not using a supported framework, they can use the generated SDK dir Here's an example of how to use it with the first 5 operations: ```js -import { createEvent, listEvents } from '@dataconnect/generated'; +import { listEvents, createEvent } from '@dataconnect/generated'; -// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts -const { data } = await CreateEvent(dataConnect, createEventVars); - // Operation listEvents: const { data } = await ListEvents(dataConnect); +// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts +const { data } = await CreateEvent(dataConnect, createEventVars); + ``` \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/esm/index.esm.js b/frontend-web/src/dataconnect-generated/esm/index.esm.js index 232d764e..3c0301de 100644 --- a/frontend-web/src/dataconnect-generated/esm/index.esm.js +++ b/frontend-web/src/dataconnect-generated/esm/index.esm.js @@ -22,17 +22,6 @@ export const connectorConfig = { location: 'us-central1' }; -export const createEventRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'CreateEvent', inputVars); -} -createEventRef.operationName = 'CreateEvent'; - -export function createEvent(dcOrVars, vars) { - return executeMutation(createEventRef(dcOrVars, vars)); -} - export const listEventsRef = (dc) => { const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); dcInstance._useGeneratedSdk(); @@ -44,3 +33,14 @@ export function listEvents(dc) { return executeQuery(listEventsRef(dc)); } +export const createEventRef = (dcOrVars, vars) => { + const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); + dcInstance._useGeneratedSdk(); + return mutationRef(dcInstance, 'CreateEvent', inputVars); +} +createEventRef.operationName = 'CreateEvent'; + +export function createEvent(dcOrVars, vars) { + return executeMutation(createEventRef(dcOrVars, vars)); +} + diff --git a/frontend-web/src/dataconnect-generated/index.cjs.js b/frontend-web/src/dataconnect-generated/index.cjs.js index 4ee6e173..56e9d088 100644 --- a/frontend-web/src/dataconnect-generated/index.cjs.js +++ b/frontend-web/src/dataconnect-generated/index.cjs.js @@ -25,18 +25,6 @@ const connectorConfig = { }; exports.connectorConfig = connectorConfig; -const createEventRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'CreateEvent', inputVars); -} -createEventRef.operationName = 'CreateEvent'; -exports.createEventRef = createEventRef; - -exports.createEvent = function createEvent(dcOrVars, vars) { - return executeMutation(createEventRef(dcOrVars, vars)); -}; - const listEventsRef = (dc) => { const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); dcInstance._useGeneratedSdk(); @@ -48,3 +36,15 @@ exports.listEventsRef = listEventsRef; exports.listEvents = function listEvents(dc) { return executeQuery(listEventsRef(dc)); }; + +const createEventRef = (dcOrVars, vars) => { + const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); + dcInstance._useGeneratedSdk(); + return mutationRef(dcInstance, 'CreateEvent', inputVars); +} +createEventRef.operationName = 'CreateEvent'; +exports.createEventRef = createEventRef; + +exports.createEvent = function createEvent(dcOrVars, vars) { + return executeMutation(createEventRef(dcOrVars, vars)); +}; diff --git a/frontend-web/src/dataconnect-generated/index.d.ts b/frontend-web/src/dataconnect-generated/index.d.ts index 856ff493..a0bac852 100644 --- a/frontend-web/src/dataconnect-generated/index.d.ts +++ b/frontend-web/src/dataconnect-generated/index.d.ts @@ -64,18 +64,6 @@ export interface ListEventsData { } & Event_Key)[]; } -interface CreateEventRef { - /* Allow users to create refs without passing in DataConnect */ - (vars: CreateEventVariables): MutationRef; - /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect, vars: CreateEventVariables): MutationRef; - operationName: string; -} -export const createEventRef: CreateEventRef; - -export function createEvent(vars: CreateEventVariables): MutationPromise; -export function createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; - interface ListEventsRef { /* Allow users to create refs without passing in DataConnect */ (): QueryRef; @@ -88,3 +76,15 @@ export const listEventsRef: ListEventsRef; export function listEvents(): QueryPromise; export function listEvents(dc: DataConnect): QueryPromise; +interface CreateEventRef { + /* Allow users to create refs without passing in DataConnect */ + (vars: CreateEventVariables): MutationRef; + /* Allow users to pass in custom DataConnect instances */ + (dc: DataConnect, vars: CreateEventVariables): MutationRef; + operationName: string; +} +export const createEventRef: CreateEventRef; + +export function createEvent(vars: CreateEventVariables): MutationPromise; +export function createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; + diff --git a/frontend-web/src/dataconnect-generated/react/esm/index.esm.js b/frontend-web/src/dataconnect-generated/react/esm/index.esm.js index 3463a0fa..30b9f593 100644 --- a/frontend-web/src/dataconnect-generated/react/esm/index.esm.js +++ b/frontend-web/src/dataconnect-generated/react/esm/index.esm.js @@ -1,7 +1,13 @@ -import { createEventRef, listEventsRef, connectorConfig } from '../../esm/index.esm.js'; +import { listEventsRef, createEventRef, connectorConfig } from '../../esm/index.esm.js'; import { validateArgs, CallerSdkTypeEnum } from 'firebase/data-connect'; import { useDataConnectQuery, useDataConnectMutation, validateReactArgs } from '@tanstack-query-firebase/react/data-connect'; + +export function useListEvents(dcOrOptions, options) { + const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); + const ref = listEventsRef(dcInstance); + return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} export function useCreateEvent(dcOrOptions, options) { const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); function refFactory(vars) { @@ -9,10 +15,3 @@ export function useCreateEvent(dcOrOptions, options) { } return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); } - - -export function useListEvents(dcOrOptions, options) { - const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listEventsRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/index.cjs.js b/frontend-web/src/dataconnect-generated/react/index.cjs.js index 52b5314b..7a777110 100644 --- a/frontend-web/src/dataconnect-generated/react/index.cjs.js +++ b/frontend-web/src/dataconnect-generated/react/index.cjs.js @@ -1,7 +1,13 @@ -const { createEventRef, listEventsRef, connectorConfig } = require('../index.cjs.js'); +const { listEventsRef, createEventRef, connectorConfig } = require('../index.cjs.js'); const { validateArgs, CallerSdkTypeEnum } = require('firebase/data-connect'); const { useDataConnectQuery, useDataConnectMutation, validateReactArgs } = require('@tanstack-query-firebase/react/data-connect'); + +exports.useListEvents = function useListEvents(dcOrOptions, options) { + const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); + const ref = listEventsRef(dcInstance); + return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) { const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); function refFactory(vars) { @@ -9,10 +15,3 @@ exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) { } return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); } - - -exports.useListEvents = function useListEvents(dcOrOptions, options) { - const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listEventsRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} \ No newline at end of file diff --git a/frontend-web/src/dataconnect-generated/react/index.d.ts b/frontend-web/src/dataconnect-generated/react/index.d.ts index cab1da38..c9a73eb5 100644 --- a/frontend-web/src/dataconnect-generated/react/index.d.ts +++ b/frontend-web/src/dataconnect-generated/react/index.d.ts @@ -1,12 +1,12 @@ -import { CreateEventData, CreateEventVariables, ListEventsData } from '../'; +import { ListEventsData, CreateEventData, CreateEventVariables } from '../'; import { UseDataConnectQueryResult, useDataConnectQueryOptions, UseDataConnectMutationResult, useDataConnectMutationOptions} from '@tanstack-query-firebase/react/data-connect'; import { UseQueryResult, UseMutationResult} from '@tanstack/react-query'; import { DataConnect } from 'firebase/data-connect'; import { FirebaseError } from 'firebase/app'; -export function useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -export function useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; - export function useListEvents(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; export function useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; + +export function useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +export function useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; diff --git a/internal-api-harness/src/dataconnect-generated/.guides/usage.md b/internal-api-harness/src/dataconnect-generated/.guides/usage.md index ded8abc8..8c0adfb2 100644 --- a/internal-api-harness/src/dataconnect-generated/.guides/usage.md +++ b/internal-api-harness/src/dataconnect-generated/.guides/usage.md @@ -12,13 +12,13 @@ For each operation, there is a wrapper hook that can be used to call the operati Here are all of the hooks that get generated: ```ts -import { useCreateEvent, useListEvents } from '@dataconnect/generated/react'; +import { useListEvents, useCreateEvent } from '@dataconnect/generated/react'; // The types of these hooks are available in react/index.d.ts -const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars); - const { data, isPending, isSuccess, isError, error } = useListEvents(); +const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars); + ``` Here's an example from a different generated SDK: @@ -56,14 +56,14 @@ If a user is not using a supported framework, they can use the generated SDK dir Here's an example of how to use it with the first 5 operations: ```js -import { createEvent, listEvents } from '@dataconnect/generated'; +import { listEvents, createEvent } from '@dataconnect/generated'; -// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts -const { data } = await CreateEvent(dataConnect, createEventVars); - // Operation listEvents: const { data } = await ListEvents(dataConnect); +// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts +const { data } = await CreateEvent(dataConnect, createEventVars); + ``` \ No newline at end of file diff --git a/internal-api-harness/src/dataconnect-generated/esm/index.esm.js b/internal-api-harness/src/dataconnect-generated/esm/index.esm.js index 232d764e..3c0301de 100644 --- a/internal-api-harness/src/dataconnect-generated/esm/index.esm.js +++ b/internal-api-harness/src/dataconnect-generated/esm/index.esm.js @@ -22,17 +22,6 @@ export const connectorConfig = { location: 'us-central1' }; -export const createEventRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'CreateEvent', inputVars); -} -createEventRef.operationName = 'CreateEvent'; - -export function createEvent(dcOrVars, vars) { - return executeMutation(createEventRef(dcOrVars, vars)); -} - export const listEventsRef = (dc) => { const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); dcInstance._useGeneratedSdk(); @@ -44,3 +33,14 @@ export function listEvents(dc) { return executeQuery(listEventsRef(dc)); } +export const createEventRef = (dcOrVars, vars) => { + const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); + dcInstance._useGeneratedSdk(); + return mutationRef(dcInstance, 'CreateEvent', inputVars); +} +createEventRef.operationName = 'CreateEvent'; + +export function createEvent(dcOrVars, vars) { + return executeMutation(createEventRef(dcOrVars, vars)); +} + diff --git a/internal-api-harness/src/dataconnect-generated/index.cjs.js b/internal-api-harness/src/dataconnect-generated/index.cjs.js index 4ee6e173..56e9d088 100644 --- a/internal-api-harness/src/dataconnect-generated/index.cjs.js +++ b/internal-api-harness/src/dataconnect-generated/index.cjs.js @@ -25,18 +25,6 @@ const connectorConfig = { }; exports.connectorConfig = connectorConfig; -const createEventRef = (dcOrVars, vars) => { - const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); - dcInstance._useGeneratedSdk(); - return mutationRef(dcInstance, 'CreateEvent', inputVars); -} -createEventRef.operationName = 'CreateEvent'; -exports.createEventRef = createEventRef; - -exports.createEvent = function createEvent(dcOrVars, vars) { - return executeMutation(createEventRef(dcOrVars, vars)); -}; - const listEventsRef = (dc) => { const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined); dcInstance._useGeneratedSdk(); @@ -48,3 +36,15 @@ exports.listEventsRef = listEventsRef; exports.listEvents = function listEvents(dc) { return executeQuery(listEventsRef(dc)); }; + +const createEventRef = (dcOrVars, vars) => { + const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true); + dcInstance._useGeneratedSdk(); + return mutationRef(dcInstance, 'CreateEvent', inputVars); +} +createEventRef.operationName = 'CreateEvent'; +exports.createEventRef = createEventRef; + +exports.createEvent = function createEvent(dcOrVars, vars) { + return executeMutation(createEventRef(dcOrVars, vars)); +}; diff --git a/internal-api-harness/src/dataconnect-generated/index.d.ts b/internal-api-harness/src/dataconnect-generated/index.d.ts index 856ff493..a0bac852 100644 --- a/internal-api-harness/src/dataconnect-generated/index.d.ts +++ b/internal-api-harness/src/dataconnect-generated/index.d.ts @@ -64,18 +64,6 @@ export interface ListEventsData { } & Event_Key)[]; } -interface CreateEventRef { - /* Allow users to create refs without passing in DataConnect */ - (vars: CreateEventVariables): MutationRef; - /* Allow users to pass in custom DataConnect instances */ - (dc: DataConnect, vars: CreateEventVariables): MutationRef; - operationName: string; -} -export const createEventRef: CreateEventRef; - -export function createEvent(vars: CreateEventVariables): MutationPromise; -export function createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; - interface ListEventsRef { /* Allow users to create refs without passing in DataConnect */ (): QueryRef; @@ -88,3 +76,15 @@ export const listEventsRef: ListEventsRef; export function listEvents(): QueryPromise; export function listEvents(dc: DataConnect): QueryPromise; +interface CreateEventRef { + /* Allow users to create refs without passing in DataConnect */ + (vars: CreateEventVariables): MutationRef; + /* Allow users to pass in custom DataConnect instances */ + (dc: DataConnect, vars: CreateEventVariables): MutationRef; + operationName: string; +} +export const createEventRef: CreateEventRef; + +export function createEvent(vars: CreateEventVariables): MutationPromise; +export function createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise; + diff --git a/internal-api-harness/src/dataconnect-generated/react/esm/index.esm.js b/internal-api-harness/src/dataconnect-generated/react/esm/index.esm.js index 3463a0fa..30b9f593 100644 --- a/internal-api-harness/src/dataconnect-generated/react/esm/index.esm.js +++ b/internal-api-harness/src/dataconnect-generated/react/esm/index.esm.js @@ -1,7 +1,13 @@ -import { createEventRef, listEventsRef, connectorConfig } from '../../esm/index.esm.js'; +import { listEventsRef, createEventRef, connectorConfig } from '../../esm/index.esm.js'; import { validateArgs, CallerSdkTypeEnum } from 'firebase/data-connect'; import { useDataConnectQuery, useDataConnectMutation, validateReactArgs } from '@tanstack-query-firebase/react/data-connect'; + +export function useListEvents(dcOrOptions, options) { + const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); + const ref = listEventsRef(dcInstance); + return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} export function useCreateEvent(dcOrOptions, options) { const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); function refFactory(vars) { @@ -9,10 +15,3 @@ export function useCreateEvent(dcOrOptions, options) { } return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); } - - -export function useListEvents(dcOrOptions, options) { - const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listEventsRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} \ No newline at end of file diff --git a/internal-api-harness/src/dataconnect-generated/react/index.cjs.js b/internal-api-harness/src/dataconnect-generated/react/index.cjs.js index 52b5314b..7a777110 100644 --- a/internal-api-harness/src/dataconnect-generated/react/index.cjs.js +++ b/internal-api-harness/src/dataconnect-generated/react/index.cjs.js @@ -1,7 +1,13 @@ -const { createEventRef, listEventsRef, connectorConfig } = require('../index.cjs.js'); +const { listEventsRef, createEventRef, connectorConfig } = require('../index.cjs.js'); const { validateArgs, CallerSdkTypeEnum } = require('firebase/data-connect'); const { useDataConnectQuery, useDataConnectMutation, validateReactArgs } = require('@tanstack-query-firebase/react/data-connect'); + +exports.useListEvents = function useListEvents(dcOrOptions, options) { + const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); + const ref = listEventsRef(dcInstance); + return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); +} exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) { const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options); function refFactory(vars) { @@ -9,10 +15,3 @@ exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) { } return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact); } - - -exports.useListEvents = function useListEvents(dcOrOptions, options) { - const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options); - const ref = listEventsRef(dcInstance); - return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact); -} \ No newline at end of file diff --git a/internal-api-harness/src/dataconnect-generated/react/index.d.ts b/internal-api-harness/src/dataconnect-generated/react/index.d.ts index cab1da38..c9a73eb5 100644 --- a/internal-api-harness/src/dataconnect-generated/react/index.d.ts +++ b/internal-api-harness/src/dataconnect-generated/react/index.d.ts @@ -1,12 +1,12 @@ -import { CreateEventData, CreateEventVariables, ListEventsData } from '../'; +import { ListEventsData, CreateEventData, CreateEventVariables } from '../'; import { UseDataConnectQueryResult, useDataConnectQueryOptions, UseDataConnectMutationResult, useDataConnectMutationOptions} from '@tanstack-query-firebase/react/data-connect'; import { UseQueryResult, UseMutationResult} from '@tanstack/react-query'; import { DataConnect } from 'firebase/data-connect'; import { FirebaseError } from 'firebase/app'; -export function useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; -export function useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; - export function useListEvents(options?: useDataConnectQueryOptions): UseDataConnectQueryResult; export function useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions): UseDataConnectQueryResult; + +export function useCreateEvent(options?: useDataConnectMutationOptions): UseDataConnectMutationResult; +export function useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions): UseDataConnectMutationResult; From ef2690d85dd156b6bda1f104c743e5172f7121d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Salazar?= <73718835+joshrs23@users.noreply.github.com> Date: Wed, 19 Nov 2025 16:13:19 -0500 Subject: [PATCH 7/7] adding all entities in to the list --- internal-api-harness/src/api/krowSDK.js | 65 +++++++++++++++++++++++-- 1 file changed, 60 insertions(+), 5 deletions(-) diff --git a/internal-api-harness/src/api/krowSDK.js b/internal-api-harness/src/api/krowSDK.js index 4ab64798..91686b2e 100644 --- a/internal-api-harness/src/api/krowSDK.js +++ b/internal-api-harness/src/api/krowSDK.js @@ -148,11 +148,66 @@ const dataconnectEntityConfig = { // filter: 'filterEvents', }, - // Staff: { - // list: 'listStaff', - // create: 'createStaff', - // ... - // }, + Staff: { + + }, + + Vendor: { + + }, + + VendorRate: { + + }, + + Invoice:{ + + }, + + Business:{ + + }, + + Certification:{ + + }, + + Team:{ + + }, + + Conversation:{ + + }, + + Message:{ + + }, + + ActivityLog:{ + + }, + + Enterprise:{ + + }, + + Sector:{ + + }, + + Partner:{ + + }, + + Order:{ + + }, + + Shift:{ + + } + }; // Helper for methods not implemented