Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new sdk with full funcionts of ventors

Browse Source
This commit is contained in:
José Salazar
2025-11-24 16:07:50 -05:00
parent 7a751b1950
commit bf37bb45ad
18 changed files with 3504 additions and 1108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

794
internal-api-harness/src/dataconnect-generated/react/README.md
View File

@@ -17,13 +17,17 @@ 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)
- [*listVendor*](#listvendor)
- [*listEvents*](#listevents)
- [*listStaff*](#liststaff)
- [*listVendor*](#listvendor)
- [*getVendorById*](#getvendorbyid)
- [*filterVendors*](#filtervendors)
- [**Mutations**](#mutations)
- [*CreateEvent*](#createevent)
- [*CreateStaff*](#createstaff)
- [*CreateVendor*](#createvendor)
- [*UpdateVendor*](#updatevendor)
- [*DeleteVendor*](#deletevendor)
- [*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).
@@ -115,84 +119,6 @@ Here's a general overview of how to use the generated Query hooks in your code:
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).
## listVendor
You can execute the `listVendor` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
```javascript
useListVendor(dc: DataConnect, options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
```
You can also pass in a `DataConnect` instance to the Query hook function.
```javascript
useListVendor(options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
```
### Variables
The `listVendor` Query has no variables.
### Return Type
Recall that calling the `listVendor` 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 `listVendor` Query is of type `ListVendorData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface ListVendorData {
vendors: ({
id: UUIDString;
vendorNumber: string;
legalName: string;
region: VendorRegion;
platformType: VendorPlatformType;
primaryContactEmail: string;
approvalStatus: VendorApprovalStatus;
isActive?: boolean | null;
} & Vendor_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 `listVendor`'s Query hook function
```javascript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';
import { useListVendor } from '@dataconnect/generated/react'
export default function ListVendorComponent() {
// 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 = useListVendor();
// You can also pass in a `DataConnect` instance to the Query hook function.
const dataConnect = getDataConnect(connectorConfig);
const query = useListVendor(dataConnect);
// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
const options = { staleTime: 5 * 1000 };
const query = useListVendor(options);
// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
const dataConnect = getDataConnect(connectorConfig);
const options = { staleTime: 5 * 1000 };
const query = useListVendor(dataConnect, options);
// Then, you can render your component dynamically based on the status of the Query.
if (query.isPending) {
return <div>Loading...</div>;
}
if (query.isError) {
return <div>Error: {query.error.message}</div>;
}
// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
if (query.isSuccess) {
console.log(query.data.vendors);
}
return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}
```
## 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):
@@ -353,6 +279,284 @@ export default function ListStaffComponent() {
}
```
## listVendor
You can execute the `listVendor` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
```javascript
useListVendor(dc: DataConnect, options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
```
You can also pass in a `DataConnect` instance to the Query hook function.
```javascript
useListVendor(options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
```
### Variables
The `listVendor` Query has no variables.
### Return Type
Recall that calling the `listVendor` 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 `listVendor` Query is of type `ListVendorData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface ListVendorData {
vendors: ({
id: UUIDString;
vendorNumber: string;
legalName: string;
region: VendorRegion;
platformType: VendorPlatformType;
primaryContactEmail: string;
approvalStatus: VendorApprovalStatus;
isActive?: boolean | null;
} & Vendor_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 `listVendor`'s Query hook function
```javascript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';
import { useListVendor } from '@dataconnect/generated/react'
export default function ListVendorComponent() {
// 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 = useListVendor();
// You can also pass in a `DataConnect` instance to the Query hook function.
const dataConnect = getDataConnect(connectorConfig);
const query = useListVendor(dataConnect);
// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
const options = { staleTime: 5 * 1000 };
const query = useListVendor(options);
// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
const dataConnect = getDataConnect(connectorConfig);
const options = { staleTime: 5 * 1000 };
const query = useListVendor(dataConnect, options);
// Then, you can render your component dynamically based on the status of the Query.
if (query.isPending) {
return <div>Loading...</div>;
}
if (query.isError) {
return <div>Error: {query.error.message}</div>;
}
// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
if (query.isSuccess) {
console.log(query.data.vendors);
}
return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}
```
## getVendorById
You can execute the `getVendorById` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
```javascript
useGetVendorById(dc: DataConnect, vars: GetVendorByIdVariables, options?: useDataConnectQueryOptions<GetVendorByIdData>): UseDataConnectQueryResult<GetVendorByIdData, GetVendorByIdVariables>;
```
You can also pass in a `DataConnect` instance to the Query hook function.
```javascript
useGetVendorById(vars: GetVendorByIdVariables, options?: useDataConnectQueryOptions<GetVendorByIdData>): UseDataConnectQueryResult<GetVendorByIdData, GetVendorByIdVariables>;
```
### Variables
The `getVendorById` Query requires an argument of type `GetVendorByIdVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface GetVendorByIdVariables {
id: UUIDString;
}
```
### Return Type
Recall that calling the `getVendorById` 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 `getVendorById` Query is of type `GetVendorByIdData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface GetVendorByIdData {
vendor?: {
id: UUIDString;
vendorNumber: string;
legalName: string;
region: VendorRegion;
platformType: VendorPlatformType;
primaryContactEmail: string;
approvalStatus: VendorApprovalStatus;
isActive?: boolean | null;
} & Vendor_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 `getVendorById`'s Query hook function
```javascript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, GetVendorByIdVariables } from '@dataconnect/generated';
import { useGetVendorById } from '@dataconnect/generated/react'
export default function GetVendorByIdComponent() {
// The `useGetVendorById` Query hook requires an argument of type `GetVendorByIdVariables`:
const getVendorByIdVars: GetVendorByIdVariables = {
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 = useGetVendorById(getVendorByIdVars);
// Variables can be defined inline as well.
const query = useGetVendorById({ id: ..., });
// You can also pass in a `DataConnect` instance to the Query hook function.
const dataConnect = getDataConnect(connectorConfig);
const query = useGetVendorById(dataConnect, getVendorByIdVars);
// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
const options = { staleTime: 5 * 1000 };
const query = useGetVendorById(getVendorByIdVars, options);
// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
const dataConnect = getDataConnect(connectorConfig);
const options = { staleTime: 5 * 1000 };
const query = useGetVendorById(dataConnect, getVendorByIdVars, options);
// Then, you can render your component dynamically based on the status of the Query.
if (query.isPending) {
return <div>Loading...</div>;
}
if (query.isError) {
return <div>Error: {query.error.message}</div>;
}
// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
if (query.isSuccess) {
console.log(query.data.vendor);
}
return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}
```
## filterVendors
You can execute the `filterVendors` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
```javascript
useFilterVendors(dc: DataConnect, vars?: FilterVendorsVariables, options?: useDataConnectQueryOptions<FilterVendorsData>): UseDataConnectQueryResult<FilterVendorsData, FilterVendorsVariables>;
```
You can also pass in a `DataConnect` instance to the Query hook function.
```javascript
useFilterVendors(vars?: FilterVendorsVariables, options?: useDataConnectQueryOptions<FilterVendorsData>): UseDataConnectQueryResult<FilterVendorsData, FilterVendorsVariables>;
```
### Variables
The `filterVendors` Query has an optional argument of type `FilterVendorsVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface FilterVendorsVariables {
region?: VendorRegion | null;
approvalStatus?: VendorApprovalStatus | null;
isActive?: boolean | null;
vendorNumber?: string | null;
primaryContactEmail?: string | null;
legalName?: string | null;
platformType?: VendorPlatformType | null;
}
```
### Return Type
Recall that calling the `filterVendors` 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 `filterVendors` Query is of type `FilterVendorsData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface FilterVendorsData {
vendors: ({
id: UUIDString;
vendorNumber: string;
legalName: string;
region: VendorRegion;
platformType: VendorPlatformType;
primaryContactEmail: string;
approvalStatus: VendorApprovalStatus;
isActive?: boolean | null;
} & Vendor_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 `filterVendors`'s Query hook function
```javascript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, FilterVendorsVariables } from '@dataconnect/generated';
import { useFilterVendors } from '@dataconnect/generated/react'
export default function FilterVendorsComponent() {
// The `useFilterVendors` Query hook has an optional argument of type `FilterVendorsVariables`:
const filterVendorsVars: FilterVendorsVariables = {
region: ..., // optional
approvalStatus: ..., // optional
isActive: ..., // optional
vendorNumber: ..., // optional
primaryContactEmail: ..., // optional
legalName: ..., // optional
platformType: ..., // 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 = useFilterVendors(filterVendorsVars);
// Variables can be defined inline as well.
const query = useFilterVendors({ region: ..., approvalStatus: ..., isActive: ..., vendorNumber: ..., primaryContactEmail: ..., legalName: ..., platformType: ..., });
// Since all variables are optional for this Query, you can omit the `FilterVendorsVariables` argument.
// (as long as you don't want to provide any `options`!)
const query = useFilterVendors();
// You can also pass in a `DataConnect` instance to the Query hook function.
const dataConnect = getDataConnect(connectorConfig);
const query = useFilterVendors(dataConnect, filterVendorsVars);
// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
const options = { staleTime: 5 * 1000 };
const query = useFilterVendors(filterVendorsVars, 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 = useFilterVendors(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 = useFilterVendors(dataConnect, filterVendorsVars /** or undefined */, options);
// Then, you can render your component dynamically based on the status of the Query.
if (query.isPending) {
return <div>Loading...</div>;
}
if (query.isError) {
return <div>Error: {query.error.message}</div>;
}
// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
if (query.isSuccess) {
console.log(query.data.vendors);
}
return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}
```
# 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.
@@ -378,120 +582,6 @@ Here's a general overview of how to use the generated Mutation hooks in your cod
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<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;
```
You can also pass in a `DataConnect` instance to the Mutation hook function.
```javascript
useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;
```
### 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 <div>Loading...</div>;
}
if (mutation.isError) {
return <div>Error: {mutation.error.message}</div>;
}
// 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 <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}
```
## CreateStaff
You can execute the `CreateStaff` 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
@@ -708,3 +798,319 @@ export default function CreateVendorComponent() {
}
```
## UpdateVendor
You can execute the `UpdateVendor` 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
useUpdateVendor(options?: useDataConnectMutationOptions<UpdateVendorData, FirebaseError, UpdateVendorVariables>): UseDataConnectMutationResult<UpdateVendorData, UpdateVendorVariables>;
```
You can also pass in a `DataConnect` instance to the Mutation hook function.
```javascript
useUpdateVendor(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateVendorData, FirebaseError, UpdateVendorVariables>): UseDataConnectMutationResult<UpdateVendorData, UpdateVendorVariables>;
```
### Variables
The `UpdateVendor` Mutation requires an argument of type `UpdateVendorVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface UpdateVendorVariables {
id: UUIDString;
vendorNumber?: string | null;
legalName?: string | null;
region?: VendorRegion | null;
platformType?: VendorPlatformType | null;
primaryContactEmail?: string | null;
approvalStatus?: VendorApprovalStatus | null;
isActive?: boolean | null;
}
```
### Return Type
Recall that calling the `UpdateVendor` 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 `UpdateVendor` Mutation is of type `UpdateVendorData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface UpdateVendorData {
vendor_update?: Vendor_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 `UpdateVendor`'s Mutation hook function
```javascript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, UpdateVendorVariables } from '@dataconnect/generated';
import { useUpdateVendor } from '@dataconnect/generated/react'
export default function UpdateVendorComponent() {
// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
const mutation = useUpdateVendor();
// You can also pass in a `DataConnect` instance to the Mutation hook function.
const dataConnect = getDataConnect(connectorConfig);
const mutation = useUpdateVendor(dataConnect);
// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
const options = {
onSuccess: () => { console.log('Mutation succeeded!'); }
};
const mutation = useUpdateVendor(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 = useUpdateVendor(dataConnect, options);
// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
// The `useUpdateVendor` Mutation requires an argument of type `UpdateVendorVariables`:
const updateVendorVars: UpdateVendorVariables = {
id: ...,
vendorNumber: ..., // optional
legalName: ..., // optional
region: ..., // optional
platformType: ..., // optional
primaryContactEmail: ..., // optional
approvalStatus: ..., // optional
isActive: ..., // optional
};
mutation.mutate(updateVendorVars);
// Variables can be defined inline as well.
mutation.mutate({ id: ..., vendorNumber: ..., legalName: ..., region: ..., platformType: ..., primaryContactEmail: ..., approvalStatus: ..., isActive: ..., });
// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
const options = {
onSuccess: () => { console.log('Mutation succeeded!'); }
};
mutation.mutate(updateVendorVars, options);
// Then, you can render your component dynamically based on the status of the Mutation.
if (mutation.isPending) {
return <div>Loading...</div>;
}
if (mutation.isError) {
return <div>Error: {mutation.error.message}</div>;
}
// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
if (mutation.isSuccess) {
console.log(mutation.data.vendor_update);
}
return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}
```
## DeleteVendor
You can execute the `DeleteVendor` 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
useDeleteVendor(options?: useDataConnectMutationOptions<DeleteVendorData, FirebaseError, DeleteVendorVariables>): UseDataConnectMutationResult<DeleteVendorData, DeleteVendorVariables>;
```
You can also pass in a `DataConnect` instance to the Mutation hook function.
```javascript
useDeleteVendor(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteVendorData, FirebaseError, DeleteVendorVariables>): UseDataConnectMutationResult<DeleteVendorData, DeleteVendorVariables>;
```
### Variables
The `DeleteVendor` Mutation requires an argument of type `DeleteVendorVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface DeleteVendorVariables {
id: UUIDString;
}
```
### Return Type
Recall that calling the `DeleteVendor` 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 `DeleteVendor` Mutation is of type `DeleteVendorData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface DeleteVendorData {
vendor_delete?: Vendor_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 `DeleteVendor`'s Mutation hook function
```javascript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, DeleteVendorVariables } from '@dataconnect/generated';
import { useDeleteVendor } from '@dataconnect/generated/react'
export default function DeleteVendorComponent() {
// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
const mutation = useDeleteVendor();
// You can also pass in a `DataConnect` instance to the Mutation hook function.
const dataConnect = getDataConnect(connectorConfig);
const mutation = useDeleteVendor(dataConnect);
// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
const options = {
onSuccess: () => { console.log('Mutation succeeded!'); }
};
const mutation = useDeleteVendor(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 = useDeleteVendor(dataConnect, options);
// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
// The `useDeleteVendor` Mutation requires an argument of type `DeleteVendorVariables`:
const deleteVendorVars: DeleteVendorVariables = {
id: ...,
};
mutation.mutate(deleteVendorVars);
// Variables can be defined inline as well.
mutation.mutate({ id: ..., });
// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
const options = {
onSuccess: () => { console.log('Mutation succeeded!'); }
};
mutation.mutate(deleteVendorVars, options);
// Then, you can render your component dynamically based on the status of the Mutation.
if (mutation.isPending) {
return <div>Loading...</div>;
}
if (mutation.isError) {
return <div>Error: {mutation.error.message}</div>;
}
// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
if (mutation.isSuccess) {
console.log(mutation.data.vendor_delete);
}
return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}
```
## 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<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;
```
You can also pass in a `DataConnect` instance to the Mutation hook function.
```javascript
useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;
```
### 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 <div>Loading...</div>;
}
if (mutation.isError) {
return <div>Error: {mutation.error.message}</div>;
}
// 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 <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}
```

58
internal-api-harness/src/dataconnect-generated/react/esm/index.esm.js
View File

@@ -1,22 +1,8 @@
import { listVendorRef, createEventRef, listEventsRef, createStaffRef, listStaffRef, createVendorRef, connectorConfig } from '../../esm/index.esm.js';
import { listEventsRef, createStaffRef, listStaffRef, createVendorRef, updateVendorRef, deleteVendorRef, listVendorRef, getVendorByIdRef, filterVendorsRef, 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 useListVendor(dcOrOptions, options) {
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
const ref = listVendorRef(dcInstance);
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
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);
@@ -43,3 +29,45 @@ export function useCreateVendor(dcOrOptions, options) {
}
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
export function useUpdateVendor(dcOrOptions, options) {
const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options);
function refFactory(vars) {
return updateVendorRef(dcInstance, vars);
}
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
export function useDeleteVendor(dcOrOptions, options) {
const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options);
function refFactory(vars) {
return deleteVendorRef(dcInstance, vars);
}
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
export function useListVendor(dcOrOptions, options) {
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
const ref = listVendorRef(dcInstance);
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
export function useGetVendorById(dcOrVars, varsOrOptions, options) {
const { dc: dcInstance, vars: inputVars, options: inputOpts } = validateReactArgs(connectorConfig, dcOrVars, varsOrOptions, options, true, true);
const ref = getVendorByIdRef(dcInstance, inputVars);
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
export function useFilterVendors(dcOrVars, varsOrOptions, options) {
const { dc: dcInstance, vars: inputVars, options: inputOpts } = validateReactArgs(connectorConfig, dcOrVars, varsOrOptions, options, true, false);
const ref = filterVendorsRef(dcInstance, inputVars);
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
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);
}

58
internal-api-harness/src/dataconnect-generated/react/index.cjs.js
View File

@@ -1,22 +1,8 @@
const { listVendorRef, createEventRef, listEventsRef, createStaffRef, listStaffRef, createVendorRef, connectorConfig } = require('../index.cjs.js');
const { listEventsRef, createStaffRef, listStaffRef, createVendorRef, updateVendorRef, deleteVendorRef, listVendorRef, getVendorByIdRef, filterVendorsRef, 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.useListVendor = function useListVendor(dcOrOptions, options) {
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
const ref = listVendorRef(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) {
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);
@@ -43,3 +29,45 @@ exports.useCreateVendor = function useCreateVendor(dcOrOptions, options) {
}
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
exports.useUpdateVendor = function useUpdateVendor(dcOrOptions, options) {
const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options);
function refFactory(vars) {
return updateVendorRef(dcInstance, vars);
}
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
exports.useDeleteVendor = function useDeleteVendor(dcOrOptions, options) {
const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options);
function refFactory(vars) {
return deleteVendorRef(dcInstance, vars);
}
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
exports.useListVendor = function useListVendor(dcOrOptions, options) {
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
const ref = listVendorRef(dcInstance);
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
exports.useGetVendorById = function useGetVendorById(dcOrVars, varsOrOptions, options) {
const { dc: dcInstance, vars: inputVars, options: inputOpts } = validateReactArgs(connectorConfig, dcOrVars, varsOrOptions, options, true, true);
const ref = getVendorByIdRef(dcInstance, inputVars);
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
exports.useFilterVendors = function useFilterVendors(dcOrVars, varsOrOptions, options) {
const { dc: dcInstance, vars: inputVars, options: inputOpts } = validateReactArgs(connectorConfig, dcOrVars, varsOrOptions, options, true, false);
const ref = filterVendorsRef(dcInstance, inputVars);
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
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);
}

26
internal-api-harness/src/dataconnect-generated/react/index.d.ts vendored
View File

@@ -1,16 +1,10 @@
import { ListVendorData, CreateEventData, CreateEventVariables, ListEventsData, CreateStaffData, CreateStaffVariables, ListStaffData, CreateVendorData, CreateVendorVariables } from '../';
import { ListEventsData, CreateStaffData, CreateStaffVariables, ListStaffData, CreateVendorData, CreateVendorVariables, UpdateVendorData, UpdateVendorVariables, DeleteVendorData, DeleteVendorVariables, ListVendorData, GetVendorByIdData, GetVendorByIdVariables, FilterVendorsData, FilterVendorsVariables, 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 useListVendor(options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
export function useListVendor(dc: DataConnect, options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
export function useCreateEvent(options?: useDataConnectMutationOptions<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;
export function useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;
export function useListEvents(options?: useDataConnectQueryOptions<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;
export function useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;
@@ -22,3 +16,21 @@ export function useListStaff(dc: DataConnect, options?: useDataConnectQueryOptio
export function useCreateVendor(options?: useDataConnectMutationOptions<CreateVendorData, FirebaseError, CreateVendorVariables>): UseDataConnectMutationResult<CreateVendorData, CreateVendorVariables>;
export function useCreateVendor(dc: DataConnect, options?: useDataConnectMutationOptions<CreateVendorData, FirebaseError, CreateVendorVariables>): UseDataConnectMutationResult<CreateVendorData, CreateVendorVariables>;
export function useUpdateVendor(options?: useDataConnectMutationOptions<UpdateVendorData, FirebaseError, UpdateVendorVariables>): UseDataConnectMutationResult<UpdateVendorData, UpdateVendorVariables>;
export function useUpdateVendor(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateVendorData, FirebaseError, UpdateVendorVariables>): UseDataConnectMutationResult<UpdateVendorData, UpdateVendorVariables>;
export function useDeleteVendor(options?: useDataConnectMutationOptions<DeleteVendorData, FirebaseError, DeleteVendorVariables>): UseDataConnectMutationResult<DeleteVendorData, DeleteVendorVariables>;
export function useDeleteVendor(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteVendorData, FirebaseError, DeleteVendorVariables>): UseDataConnectMutationResult<DeleteVendorData, DeleteVendorVariables>;
export function useListVendor(options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
export function useListVendor(dc: DataConnect, options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
export function useGetVendorById(vars: GetVendorByIdVariables, options?: useDataConnectQueryOptions<GetVendorByIdData>): UseDataConnectQueryResult<GetVendorByIdData, GetVendorByIdVariables>;
export function useGetVendorById(dc: DataConnect, vars: GetVendorByIdVariables, options?: useDataConnectQueryOptions<GetVendorByIdData>): UseDataConnectQueryResult<GetVendorByIdData, GetVendorByIdVariables>;
export function useFilterVendors(vars?: FilterVendorsVariables, options?: useDataConnectQueryOptions<FilterVendorsData>): UseDataConnectQueryResult<FilterVendorsData, FilterVendorsVariables>;
export function useFilterVendors(dc: DataConnect, vars?: FilterVendorsVariables, options?: useDataConnectQueryOptions<FilterVendorsData>): UseDataConnectQueryResult<FilterVendorsData, FilterVendorsVariables>;
export function useCreateEvent(options?: useDataConnectMutationOptions<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;
export function useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;