new schema for event v.3
This commit is contained in:
José Salazar
@@ -17,17 +17,21 @@ 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)
|
||||
- [*listEvents*](#listevents)
|
||||
- [*listStaff*](#liststaff)
|
||||
- [*listVendor*](#listvendor)
|
||||
- [*getVendorById*](#getvendorbyid)
|
||||
- [*filterVendors*](#filtervendors)
|
||||
- [*listEvents*](#listevents)
|
||||
- [*getEventById*](#geteventbyid)
|
||||
- [*filterEvents*](#filterevents)
|
||||
- [**Mutations**](#mutations)
|
||||
- [*CreateStaff*](#createstaff)
|
||||
- [*CreateVendor*](#createvendor)
|
||||
- [*UpdateVendor*](#updatevendor)
|
||||
- [*DeleteVendor*](#deletevendor)
|
||||
- [*CreateEvent*](#createevent)
|
||||
- [*UpdateEvent*](#updateevent)
|
||||
- [*DeleteEvent*](#deleteevent)
|
||||
|
||||
# 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).
|
||||
@@ -119,86 +123,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).
|
||||
|
||||
## 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<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
```javascript
|
||||
useListEvents(options?: useDataConnectQueryOptions<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;
|
||||
```
|
||||
|
||||
### 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 <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.events);
|
||||
}
|
||||
return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
|
||||
}
|
||||
```
|
||||
|
||||
## listStaff
|
||||
You can execute the `listStaff` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
|
||||
|
||||
@@ -557,6 +481,375 @@ export default function FilterVendorsComponent() {
|
||||
}
|
||||
```
|
||||
|
||||
## 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<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
```javascript
|
||||
useListEvents(options?: useDataConnectQueryOptions<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;
|
||||
```
|
||||
|
||||
### 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;
|
||||
isRapid?: boolean | null;
|
||||
isRecurring?: boolean | null;
|
||||
isMultiDay?: boolean | null;
|
||||
recurrenceType?: RecurrenceType | null;
|
||||
recurrenceStartDate?: TimestampString | null;
|
||||
recurrenceEndDate?: TimestampString | null;
|
||||
scatterDates?: string | null;
|
||||
multiDayStartDate?: TimestampString | null;
|
||||
multiDayEndDate?: TimestampString | null;
|
||||
bufferTimeBefore?: number | null;
|
||||
bufferTimeAfter?: number | null;
|
||||
conflictDetectionEnabled?: boolean | null;
|
||||
detectedConflicts?: string | null;
|
||||
businessId: UUIDString;
|
||||
businessName?: string | null;
|
||||
vendorId?: UUIDString | null;
|
||||
vendorName?: string | null;
|
||||
hub?: string | null;
|
||||
eventLocation?: string | null;
|
||||
contractType?: ContractType | null;
|
||||
poReference?: string | null;
|
||||
shifts?: string | null;
|
||||
addons?: string | null;
|
||||
total?: number | null;
|
||||
clientName?: string | null;
|
||||
clientEmail?: string | null;
|
||||
clientPhone?: string | null;
|
||||
invoiceId?: UUIDString | null;
|
||||
notes?: string | null;
|
||||
requested?: number | null;
|
||||
assignedStaff?: string | 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 <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.events);
|
||||
}
|
||||
return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
|
||||
}
|
||||
```
|
||||
|
||||
## getEventById
|
||||
You can execute the `getEventById` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
|
||||
|
||||
```javascript
|
||||
useGetEventById(dc: DataConnect, vars: GetEventByIdVariables, options?: useDataConnectQueryOptions<GetEventByIdData>): UseDataConnectQueryResult<GetEventByIdData, GetEventByIdVariables>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
```javascript
|
||||
useGetEventById(vars: GetEventByIdVariables, options?: useDataConnectQueryOptions<GetEventByIdData>): UseDataConnectQueryResult<GetEventByIdData, GetEventByIdVariables>;
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `getEventById` Query requires an argument of type `GetEventByIdVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
|
||||
```javascript
|
||||
export interface GetEventByIdVariables {
|
||||
id: UUIDString;
|
||||
}
|
||||
```
|
||||
### Return Type
|
||||
Recall that calling the `getEventById` 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 `getEventById` Query is of type `GetEventByIdData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
```javascript
|
||||
export interface GetEventByIdData {
|
||||
event?: {
|
||||
id: UUIDString;
|
||||
eventName: string;
|
||||
status: EventStatus;
|
||||
date: TimestampString;
|
||||
isRapid?: boolean | null;
|
||||
isRecurring?: boolean | null;
|
||||
isMultiDay?: boolean | null;
|
||||
recurrenceType?: RecurrenceType | null;
|
||||
recurrenceStartDate?: TimestampString | null;
|
||||
recurrenceEndDate?: TimestampString | null;
|
||||
scatterDates?: string | null;
|
||||
multiDayStartDate?: TimestampString | null;
|
||||
multiDayEndDate?: TimestampString | null;
|
||||
bufferTimeBefore?: number | null;
|
||||
bufferTimeAfter?: number | null;
|
||||
conflictDetectionEnabled?: boolean | null;
|
||||
detectedConflicts?: string | null;
|
||||
businessId: UUIDString;
|
||||
businessName?: string | null;
|
||||
vendorId?: UUIDString | null;
|
||||
vendorName?: string | null;
|
||||
hub?: string | null;
|
||||
eventLocation?: string | null;
|
||||
contractType?: ContractType | null;
|
||||
poReference?: string | null;
|
||||
shifts?: string | null;
|
||||
addons?: string | null;
|
||||
total?: number | null;
|
||||
clientName?: string | null;
|
||||
clientEmail?: string | null;
|
||||
clientPhone?: string | null;
|
||||
invoiceId?: UUIDString | null;
|
||||
notes?: string | null;
|
||||
requested?: number | null;
|
||||
assignedStaff?: string | 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 `getEventById`'s Query hook function
|
||||
|
||||
```javascript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, GetEventByIdVariables } from '@dataconnect/generated';
|
||||
import { useGetEventById } from '@dataconnect/generated/react'
|
||||
|
||||
export default function GetEventByIdComponent() {
|
||||
// The `useGetEventById` Query hook requires an argument of type `GetEventByIdVariables`:
|
||||
const getEventByIdVars: GetEventByIdVariables = {
|
||||
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 = useGetEventById(getEventByIdVars);
|
||||
// Variables can be defined inline as well.
|
||||
const query = useGetEventById({ id: ..., });
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const query = useGetEventById(dataConnect, getEventByIdVars);
|
||||
|
||||
// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
|
||||
const options = { staleTime: 5 * 1000 };
|
||||
const query = useGetEventById(getEventByIdVars, options);
|
||||
|
||||
// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const options = { staleTime: 5 * 1000 };
|
||||
const query = useGetEventById(dataConnect, getEventByIdVars, 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.event);
|
||||
}
|
||||
return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
|
||||
}
|
||||
```
|
||||
|
||||
## filterEvents
|
||||
You can execute the `filterEvents` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
|
||||
|
||||
```javascript
|
||||
useFilterEvents(dc: DataConnect, vars?: FilterEventsVariables, options?: useDataConnectQueryOptions<FilterEventsData>): UseDataConnectQueryResult<FilterEventsData, FilterEventsVariables>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
```javascript
|
||||
useFilterEvents(vars?: FilterEventsVariables, options?: useDataConnectQueryOptions<FilterEventsData>): UseDataConnectQueryResult<FilterEventsData, FilterEventsVariables>;
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `filterEvents` Query has an optional argument of type `FilterEventsVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
|
||||
```javascript
|
||||
export interface FilterEventsVariables {
|
||||
status?: EventStatus | null;
|
||||
businessId?: UUIDString | null;
|
||||
vendorId?: UUIDString | null;
|
||||
isRecurring?: boolean | null;
|
||||
isRapid?: boolean | null;
|
||||
isMultiDay?: boolean | null;
|
||||
recurrenceType?: RecurrenceType | null;
|
||||
date?: TimestampString | null;
|
||||
hub?: string | null;
|
||||
eventLocation?: string | null;
|
||||
contractType?: ContractType | null;
|
||||
clientEmail?: string | null;
|
||||
}
|
||||
```
|
||||
### Return Type
|
||||
Recall that calling the `filterEvents` 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 `filterEvents` Query is of type `FilterEventsData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
```javascript
|
||||
export interface FilterEventsData {
|
||||
events: ({
|
||||
id: UUIDString;
|
||||
eventName: string;
|
||||
status: EventStatus;
|
||||
date: TimestampString;
|
||||
isRapid?: boolean | null;
|
||||
isRecurring?: boolean | null;
|
||||
isMultiDay?: boolean | null;
|
||||
recurrenceType?: RecurrenceType | null;
|
||||
recurrenceStartDate?: TimestampString | null;
|
||||
recurrenceEndDate?: TimestampString | null;
|
||||
scatterDates?: string | null;
|
||||
multiDayStartDate?: TimestampString | null;
|
||||
multiDayEndDate?: TimestampString | null;
|
||||
bufferTimeBefore?: number | null;
|
||||
bufferTimeAfter?: number | null;
|
||||
conflictDetectionEnabled?: boolean | null;
|
||||
detectedConflicts?: string | null;
|
||||
businessId: UUIDString;
|
||||
businessName?: string | null;
|
||||
vendorId?: UUIDString | null;
|
||||
vendorName?: string | null;
|
||||
hub?: string | null;
|
||||
eventLocation?: string | null;
|
||||
contractType?: ContractType | null;
|
||||
poReference?: string | null;
|
||||
shifts?: string | null;
|
||||
addons?: string | null;
|
||||
total?: number | null;
|
||||
clientName?: string | null;
|
||||
clientEmail?: string | null;
|
||||
clientPhone?: string | null;
|
||||
invoiceId?: UUIDString | null;
|
||||
notes?: string | null;
|
||||
requested?: number | null;
|
||||
assignedStaff?: string | 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 `filterEvents`'s Query hook function
|
||||
|
||||
```javascript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, FilterEventsVariables } from '@dataconnect/generated';
|
||||
import { useFilterEvents } from '@dataconnect/generated/react'
|
||||
|
||||
export default function FilterEventsComponent() {
|
||||
// The `useFilterEvents` Query hook has an optional argument of type `FilterEventsVariables`:
|
||||
const filterEventsVars: FilterEventsVariables = {
|
||||
status: ..., // optional
|
||||
businessId: ..., // optional
|
||||
vendorId: ..., // optional
|
||||
isRecurring: ..., // optional
|
||||
isRapid: ..., // optional
|
||||
isMultiDay: ..., // optional
|
||||
recurrenceType: ..., // optional
|
||||
date: ..., // optional
|
||||
hub: ..., // optional
|
||||
eventLocation: ..., // optional
|
||||
contractType: ..., // optional
|
||||
clientEmail: ..., // 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 = useFilterEvents(filterEventsVars);
|
||||
// Variables can be defined inline as well.
|
||||
const query = useFilterEvents({ status: ..., businessId: ..., vendorId: ..., isRecurring: ..., isRapid: ..., isMultiDay: ..., recurrenceType: ..., date: ..., hub: ..., eventLocation: ..., contractType: ..., clientEmail: ..., });
|
||||
// Since all variables are optional for this Query, you can omit the `FilterEventsVariables` argument.
|
||||
// (as long as you don't want to provide any `options`!)
|
||||
const query = useFilterEvents();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const query = useFilterEvents(dataConnect, filterEventsVars);
|
||||
|
||||
// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
|
||||
const options = { staleTime: 5 * 1000 };
|
||||
const query = useFilterEvents(filterEventsVars, 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 = useFilterEvents(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 = useFilterEvents(dataConnect, filterEventsVars /** 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.events);
|
||||
}
|
||||
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.
|
||||
@@ -1016,14 +1309,37 @@ The `CreateEvent` Mutation requires an argument of type `CreateEventVariables`,
|
||||
```javascript
|
||||
export interface CreateEventVariables {
|
||||
eventName: string;
|
||||
isRecurring: boolean;
|
||||
isRapid?: boolean | null;
|
||||
isRecurring?: boolean | null;
|
||||
isMultiDay?: boolean | null;
|
||||
recurrenceType?: RecurrenceType | null;
|
||||
recurrenceStartDate?: TimestampString | null;
|
||||
recurrenceEndDate?: TimestampString | null;
|
||||
scatterDates?: string | null;
|
||||
multiDayStartDate?: TimestampString | null;
|
||||
multiDayEndDate?: TimestampString | null;
|
||||
bufferTimeBefore?: number | null;
|
||||
bufferTimeAfter?: number | null;
|
||||
conflictDetectionEnabled?: boolean | null;
|
||||
detectedConflicts?: string | null;
|
||||
businessId: UUIDString;
|
||||
businessName?: string | null;
|
||||
vendorId?: UUIDString | null;
|
||||
vendorName?: string | null;
|
||||
hub?: string | null;
|
||||
eventLocation?: string | null;
|
||||
contractType?: ContractType | null;
|
||||
poReference?: string | null;
|
||||
status: EventStatus;
|
||||
date: TimestampString;
|
||||
shifts?: string | null;
|
||||
addons?: string | null;
|
||||
total?: number | null;
|
||||
clientName?: string | null;
|
||||
clientEmail?: string | null;
|
||||
clientPhone?: string | null;
|
||||
invoiceId?: UUIDString | null;
|
||||
notes?: string | null;
|
||||
requested?: number | null;
|
||||
assignedStaff?: string | null;
|
||||
}
|
||||
@@ -1076,20 +1392,43 @@ export default function CreateEventComponent() {
|
||||
// The `useCreateEvent` Mutation requires an argument of type `CreateEventVariables`:
|
||||
const createEventVars: CreateEventVariables = {
|
||||
eventName: ...,
|
||||
isRecurring: ...,
|
||||
isRapid: ..., // optional
|
||||
isRecurring: ..., // optional
|
||||
isMultiDay: ..., // optional
|
||||
recurrenceType: ..., // optional
|
||||
recurrenceStartDate: ..., // optional
|
||||
recurrenceEndDate: ..., // optional
|
||||
scatterDates: ..., // optional
|
||||
multiDayStartDate: ..., // optional
|
||||
multiDayEndDate: ..., // optional
|
||||
bufferTimeBefore: ..., // optional
|
||||
bufferTimeAfter: ..., // optional
|
||||
conflictDetectionEnabled: ..., // optional
|
||||
detectedConflicts: ..., // optional
|
||||
businessId: ...,
|
||||
businessName: ..., // optional
|
||||
vendorId: ..., // optional
|
||||
vendorName: ..., // optional
|
||||
hub: ..., // optional
|
||||
eventLocation: ..., // optional
|
||||
contractType: ..., // optional
|
||||
poReference: ..., // optional
|
||||
status: ...,
|
||||
date: ...,
|
||||
shifts: ..., // optional
|
||||
addons: ..., // optional
|
||||
total: ..., // optional
|
||||
clientName: ..., // optional
|
||||
clientEmail: ..., // optional
|
||||
clientPhone: ..., // optional
|
||||
invoiceId: ..., // optional
|
||||
notes: ..., // 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: ..., });
|
||||
mutation.mutate({ eventName: ..., isRapid: ..., isRecurring: ..., isMultiDay: ..., recurrenceType: ..., recurrenceStartDate: ..., recurrenceEndDate: ..., scatterDates: ..., multiDayStartDate: ..., multiDayEndDate: ..., bufferTimeBefore: ..., bufferTimeAfter: ..., conflictDetectionEnabled: ..., detectedConflicts: ..., businessId: ..., businessName: ..., vendorId: ..., vendorName: ..., hub: ..., eventLocation: ..., contractType: ..., poReference: ..., status: ..., date: ..., shifts: ..., addons: ..., total: ..., clientName: ..., clientEmail: ..., clientPhone: ..., invoiceId: ..., notes: ..., requested: ..., assignedStaff: ..., });
|
||||
|
||||
// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
|
||||
const options = {
|
||||
@@ -1114,3 +1453,259 @@ export default function CreateEventComponent() {
|
||||
}
|
||||
```
|
||||
|
||||
## UpdateEvent
|
||||
You can execute the `UpdateEvent` 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
|
||||
useUpdateEvent(options?: useDataConnectMutationOptions<UpdateEventData, FirebaseError, UpdateEventVariables>): UseDataConnectMutationResult<UpdateEventData, UpdateEventVariables>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Mutation hook function.
|
||||
```javascript
|
||||
useUpdateEvent(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateEventData, FirebaseError, UpdateEventVariables>): UseDataConnectMutationResult<UpdateEventData, UpdateEventVariables>;
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `UpdateEvent` Mutation requires an argument of type `UpdateEventVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
|
||||
```javascript
|
||||
export interface UpdateEventVariables {
|
||||
id: UUIDString;
|
||||
eventName?: string | null;
|
||||
isRapid?: boolean | null;
|
||||
isRecurring?: boolean | null;
|
||||
isMultiDay?: boolean | null;
|
||||
recurrenceType?: RecurrenceType | null;
|
||||
recurrenceStartDate?: TimestampString | null;
|
||||
recurrenceEndDate?: TimestampString | null;
|
||||
scatterDates?: string | null;
|
||||
multiDayStartDate?: TimestampString | null;
|
||||
multiDayEndDate?: TimestampString | null;
|
||||
bufferTimeBefore?: number | null;
|
||||
bufferTimeAfter?: number | null;
|
||||
conflictDetectionEnabled?: boolean | null;
|
||||
detectedConflicts?: string | null;
|
||||
businessId?: UUIDString | null;
|
||||
businessName?: string | null;
|
||||
vendorId?: UUIDString | null;
|
||||
vendorName?: string | null;
|
||||
hub?: string | null;
|
||||
eventLocation?: string | null;
|
||||
contractType?: ContractType | null;
|
||||
poReference?: string | null;
|
||||
status?: EventStatus | null;
|
||||
date?: TimestampString | null;
|
||||
shifts?: string | null;
|
||||
addons?: string | null;
|
||||
total?: number | null;
|
||||
clientName?: string | null;
|
||||
clientEmail?: string | null;
|
||||
clientPhone?: string | null;
|
||||
invoiceId?: UUIDString | null;
|
||||
notes?: string | null;
|
||||
requested?: number | null;
|
||||
assignedStaff?: string | null;
|
||||
}
|
||||
```
|
||||
### Return Type
|
||||
Recall that calling the `UpdateEvent` 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 `UpdateEvent` Mutation is of type `UpdateEventData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
```javascript
|
||||
export interface UpdateEventData {
|
||||
event_update?: Event_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 `UpdateEvent`'s Mutation hook function
|
||||
|
||||
```javascript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, UpdateEventVariables } from '@dataconnect/generated';
|
||||
import { useUpdateEvent } from '@dataconnect/generated/react'
|
||||
|
||||
export default function UpdateEventComponent() {
|
||||
// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
|
||||
const mutation = useUpdateEvent();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the Mutation hook function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const mutation = useUpdateEvent(dataConnect);
|
||||
|
||||
// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
|
||||
const options = {
|
||||
onSuccess: () => { console.log('Mutation succeeded!'); }
|
||||
};
|
||||
const mutation = useUpdateEvent(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 = useUpdateEvent(dataConnect, options);
|
||||
|
||||
// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
|
||||
// The `useUpdateEvent` Mutation requires an argument of type `UpdateEventVariables`:
|
||||
const updateEventVars: UpdateEventVariables = {
|
||||
id: ...,
|
||||
eventName: ..., // optional
|
||||
isRapid: ..., // optional
|
||||
isRecurring: ..., // optional
|
||||
isMultiDay: ..., // optional
|
||||
recurrenceType: ..., // optional
|
||||
recurrenceStartDate: ..., // optional
|
||||
recurrenceEndDate: ..., // optional
|
||||
scatterDates: ..., // optional
|
||||
multiDayStartDate: ..., // optional
|
||||
multiDayEndDate: ..., // optional
|
||||
bufferTimeBefore: ..., // optional
|
||||
bufferTimeAfter: ..., // optional
|
||||
conflictDetectionEnabled: ..., // optional
|
||||
detectedConflicts: ..., // optional
|
||||
businessId: ..., // optional
|
||||
businessName: ..., // optional
|
||||
vendorId: ..., // optional
|
||||
vendorName: ..., // optional
|
||||
hub: ..., // optional
|
||||
eventLocation: ..., // optional
|
||||
contractType: ..., // optional
|
||||
poReference: ..., // optional
|
||||
status: ..., // optional
|
||||
date: ..., // optional
|
||||
shifts: ..., // optional
|
||||
addons: ..., // optional
|
||||
total: ..., // optional
|
||||
clientName: ..., // optional
|
||||
clientEmail: ..., // optional
|
||||
clientPhone: ..., // optional
|
||||
invoiceId: ..., // optional
|
||||
notes: ..., // optional
|
||||
requested: ..., // optional
|
||||
assignedStaff: ..., // optional
|
||||
};
|
||||
mutation.mutate(updateEventVars);
|
||||
// Variables can be defined inline as well.
|
||||
mutation.mutate({ id: ..., eventName: ..., isRapid: ..., isRecurring: ..., isMultiDay: ..., recurrenceType: ..., recurrenceStartDate: ..., recurrenceEndDate: ..., scatterDates: ..., multiDayStartDate: ..., multiDayEndDate: ..., bufferTimeBefore: ..., bufferTimeAfter: ..., conflictDetectionEnabled: ..., detectedConflicts: ..., businessId: ..., businessName: ..., vendorId: ..., vendorName: ..., hub: ..., eventLocation: ..., contractType: ..., poReference: ..., status: ..., date: ..., shifts: ..., addons: ..., total: ..., clientName: ..., clientEmail: ..., clientPhone: ..., invoiceId: ..., notes: ..., requested: ..., assignedStaff: ..., });
|
||||
|
||||
// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
|
||||
const options = {
|
||||
onSuccess: () => { console.log('Mutation succeeded!'); }
|
||||
};
|
||||
mutation.mutate(updateEventVars, 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_update);
|
||||
}
|
||||
return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
|
||||
}
|
||||
```
|
||||
|
||||
## DeleteEvent
|
||||
You can execute the `DeleteEvent` 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
|
||||
useDeleteEvent(options?: useDataConnectMutationOptions<DeleteEventData, FirebaseError, DeleteEventVariables>): UseDataConnectMutationResult<DeleteEventData, DeleteEventVariables>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Mutation hook function.
|
||||
```javascript
|
||||
useDeleteEvent(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteEventData, FirebaseError, DeleteEventVariables>): UseDataConnectMutationResult<DeleteEventData, DeleteEventVariables>;
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `DeleteEvent` Mutation requires an argument of type `DeleteEventVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
|
||||
```javascript
|
||||
export interface DeleteEventVariables {
|
||||
id: UUIDString;
|
||||
}
|
||||
```
|
||||
### Return Type
|
||||
Recall that calling the `DeleteEvent` 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 `DeleteEvent` Mutation is of type `DeleteEventData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
```javascript
|
||||
export interface DeleteEventData {
|
||||
event_delete?: Event_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 `DeleteEvent`'s Mutation hook function
|
||||
|
||||
```javascript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, DeleteEventVariables } from '@dataconnect/generated';
|
||||
import { useDeleteEvent } from '@dataconnect/generated/react'
|
||||
|
||||
export default function DeleteEventComponent() {
|
||||
// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
|
||||
const mutation = useDeleteEvent();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the Mutation hook function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const mutation = useDeleteEvent(dataConnect);
|
||||
|
||||
// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
|
||||
const options = {
|
||||
onSuccess: () => { console.log('Mutation succeeded!'); }
|
||||
};
|
||||
const mutation = useDeleteEvent(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 = useDeleteEvent(dataConnect, options);
|
||||
|
||||
// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
|
||||
// The `useDeleteEvent` Mutation requires an argument of type `DeleteEventVariables`:
|
||||
const deleteEventVars: DeleteEventVariables = {
|
||||
id: ...,
|
||||
};
|
||||
mutation.mutate(deleteEventVars);
|
||||
// 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(deleteEventVars, 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_delete);
|
||||
}
|
||||
return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user