new sdk for front with vendor entity
This commit is contained in:
@@ -12,10 +12,10 @@ 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 { useListStaff, useCreateEvent, useListEvents, useCreateStaff } from '@dataconnect/generated/react';
|
||||
import { useListVendor, useCreateEvent, useListEvents, useCreateStaff, useListStaff, useCreateVendor } from '@dataconnect/generated/react';
|
||||
// The types of these hooks are available in react/index.d.ts
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useListStaff();
|
||||
const { data, isPending, isSuccess, isError, error } = useListVendor();
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars);
|
||||
|
||||
@@ -23,6 +23,10 @@ const { data, isPending, isSuccess, isError, error } = useListEvents();
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useCreateStaff(createStaffVars);
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useListStaff();
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useCreateVendor(createVendorVars);
|
||||
|
||||
```
|
||||
|
||||
Here's an example from a different generated SDK:
|
||||
@@ -60,11 +64,11 @@ 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 { listStaff, createEvent, listEvents, createStaff } from '@dataconnect/generated';
|
||||
import { listVendor, createEvent, listEvents, createStaff, listStaff, createVendor } from '@dataconnect/generated';
|
||||
|
||||
|
||||
// Operation listStaff:
|
||||
const { data } = await ListStaff(dataConnect);
|
||||
// Operation listVendor:
|
||||
const { data } = await ListVendor(dataConnect);
|
||||
|
||||
// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts
|
||||
const { data } = await CreateEvent(dataConnect, createEventVars);
|
||||
@@ -75,5 +79,11 @@ const { data } = await ListEvents(dataConnect);
|
||||
// Operation CreateStaff: For variables, look at type CreateStaffVars in ../index.d.ts
|
||||
const { data } = await CreateStaff(dataConnect, createStaffVars);
|
||||
|
||||
// Operation listStaff:
|
||||
const { data } = await ListStaff(dataConnect);
|
||||
|
||||
// Operation CreateVendor: For variables, look at type CreateVendorVars in ../index.d.ts
|
||||
const { data } = await CreateVendor(dataConnect, createVendorVars);
|
||||
|
||||
|
||||
```
|
||||
@@ -10,11 +10,13 @@ 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)
|
||||
- [*listStaff*](#liststaff)
|
||||
- [*listVendor*](#listvendor)
|
||||
- [*listEvents*](#listevents)
|
||||
- [*listStaff*](#liststaff)
|
||||
- [**Mutations**](#mutations)
|
||||
- [*CreateEvent*](#createevent)
|
||||
- [*CreateStaff*](#createstaff)
|
||||
- [*CreateVendor*](#createvendor)
|
||||
|
||||
# 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).
|
||||
@@ -61,105 +63,103 @@ The following is true for both the action shortcut function and the `QueryRef` f
|
||||
|
||||
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).
|
||||
|
||||
## listStaff
|
||||
You can execute the `listStaff` 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):
|
||||
## listVendor
|
||||
You can execute the `listVendor` 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
|
||||
listStaff(): QueryPromise<ListStaffData, undefined>;
|
||||
listVendor(): QueryPromise<ListVendorData, undefined>;
|
||||
|
||||
interface ListStaffRef {
|
||||
interface ListVendorRef {
|
||||
...
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(): QueryRef<ListStaffData, undefined>;
|
||||
(): QueryRef<ListVendorData, undefined>;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
export const listVendorRef: ListVendorRef;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function.
|
||||
```typescript
|
||||
listStaff(dc: DataConnect): QueryPromise<ListStaffData, undefined>;
|
||||
listVendor(dc: DataConnect): QueryPromise<ListVendorData, undefined>;
|
||||
|
||||
interface ListStaffRef {
|
||||
interface ListVendorRef {
|
||||
...
|
||||
(dc: DataConnect): QueryRef<ListStaffData, undefined>;
|
||||
(dc: DataConnect): QueryRef<ListVendorData, undefined>;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
export const listVendorRef: ListVendorRef;
|
||||
```
|
||||
|
||||
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 listStaffRef:
|
||||
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 listVendorRef:
|
||||
```typescript
|
||||
const name = listStaffRef.operationName;
|
||||
const name = listVendorRef.operationName;
|
||||
console.log(name);
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `listStaff` query has no variables.
|
||||
The `listVendor` query has no variables.
|
||||
### Return Type
|
||||
Recall that executing the `listStaff` query returns a `QueryPromise` that resolves to an object with a `data` property.
|
||||
Recall that executing the `listVendor` query returns a `QueryPromise` that resolves to an object with a `data` property.
|
||||
|
||||
The `data` property is an object of type `ListStaffData`, 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 `ListVendorData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields:
|
||||
```typescript
|
||||
export interface ListStaffData {
|
||||
staffs: ({
|
||||
export interface ListVendorData {
|
||||
vendors: ({
|
||||
id: UUIDString;
|
||||
employeeName: string;
|
||||
vendorId?: UUIDString | null;
|
||||
email?: string | null;
|
||||
position?: string | null;
|
||||
employmentType: EmploymentType;
|
||||
rating?: number | null;
|
||||
reliabilityScore?: number | null;
|
||||
backgroundCheckStatus: BackgroundCheckStatus;
|
||||
certifications?: string | null;
|
||||
} & Staff_Key)[];
|
||||
vendorNumber: string;
|
||||
legalName: string;
|
||||
region: VendorRegion;
|
||||
platformType: VendorPlatformType;
|
||||
primaryContactEmail: string;
|
||||
approvalStatus: VendorApprovalStatus;
|
||||
isActive?: boolean | null;
|
||||
} & Vendor_Key)[];
|
||||
}
|
||||
```
|
||||
### Using `listStaff`'s action shortcut function
|
||||
### Using `listVendor`'s action shortcut function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, listStaff } from '@dataconnect/generated';
|
||||
import { connectorConfig, listVendor } from '@dataconnect/generated';
|
||||
|
||||
|
||||
// Call the `listStaff()` function to execute the query.
|
||||
// Call the `listVendor()` function to execute the query.
|
||||
// You can use the `await` keyword to wait for the promise to resolve.
|
||||
const { data } = await listStaff();
|
||||
const { data } = await listVendor();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the action shortcut function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const { data } = await listStaff(dataConnect);
|
||||
const { data } = await listVendor(dataConnect);
|
||||
|
||||
console.log(data.staffs);
|
||||
console.log(data.vendors);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
listStaff().then((response) => {
|
||||
listVendor().then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.staffs);
|
||||
console.log(data.vendors);
|
||||
});
|
||||
```
|
||||
|
||||
### Using `listStaff`'s `QueryRef` function
|
||||
### Using `listVendor`'s `QueryRef` function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect, executeQuery } from 'firebase/data-connect';
|
||||
import { connectorConfig, listStaffRef } from '@dataconnect/generated';
|
||||
import { connectorConfig, listVendorRef } from '@dataconnect/generated';
|
||||
|
||||
|
||||
// Call the `listStaffRef()` function to get a reference to the query.
|
||||
const ref = listStaffRef();
|
||||
// Call the `listVendorRef()` function to get a reference to the query.
|
||||
const ref = listVendorRef();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the `QueryRef` function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const ref = listStaffRef(dataConnect);
|
||||
const ref = listVendorRef(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.staffs);
|
||||
console.log(data.vendors);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
executeQuery(ref).then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.staffs);
|
||||
console.log(data.vendors);
|
||||
});
|
||||
```
|
||||
|
||||
@@ -265,6 +265,108 @@ executeQuery(ref).then((response) => {
|
||||
});
|
||||
```
|
||||
|
||||
## listStaff
|
||||
You can execute the `listStaff` 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
|
||||
listStaff(): QueryPromise<ListStaffData, undefined>;
|
||||
|
||||
interface ListStaffRef {
|
||||
...
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(): QueryRef<ListStaffData, undefined>;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function.
|
||||
```typescript
|
||||
listStaff(dc: DataConnect): QueryPromise<ListStaffData, undefined>;
|
||||
|
||||
interface ListStaffRef {
|
||||
...
|
||||
(dc: DataConnect): QueryRef<ListStaffData, undefined>;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
```
|
||||
|
||||
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 listStaffRef:
|
||||
```typescript
|
||||
const name = listStaffRef.operationName;
|
||||
console.log(name);
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `listStaff` query has no variables.
|
||||
### Return Type
|
||||
Recall that executing the `listStaff` query returns a `QueryPromise` that resolves to an object with a `data` property.
|
||||
|
||||
The `data` property is an object of type `ListStaffData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields:
|
||||
```typescript
|
||||
export interface ListStaffData {
|
||||
staffs: ({
|
||||
id: UUIDString;
|
||||
employeeName: string;
|
||||
vendorId?: UUIDString | null;
|
||||
email?: string | null;
|
||||
position?: string | null;
|
||||
employmentType: EmploymentType;
|
||||
rating?: number | null;
|
||||
reliabilityScore?: number | null;
|
||||
backgroundCheckStatus: BackgroundCheckStatus;
|
||||
certifications?: string | null;
|
||||
} & Staff_Key)[];
|
||||
}
|
||||
```
|
||||
### Using `listStaff`'s action shortcut function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, listStaff } from '@dataconnect/generated';
|
||||
|
||||
|
||||
// Call the `listStaff()` function to execute the query.
|
||||
// You can use the `await` keyword to wait for the promise to resolve.
|
||||
const { data } = await listStaff();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the action shortcut function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const { data } = await listStaff(dataConnect);
|
||||
|
||||
console.log(data.staffs);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
listStaff().then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.staffs);
|
||||
});
|
||||
```
|
||||
|
||||
### Using `listStaff`'s `QueryRef` function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect, executeQuery } from 'firebase/data-connect';
|
||||
import { connectorConfig, listStaffRef } from '@dataconnect/generated';
|
||||
|
||||
|
||||
// Call the `listStaffRef()` function to get a reference to the query.
|
||||
const ref = listStaffRef();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the `QueryRef` function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const ref = listStaffRef(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.staffs);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
executeQuery(ref).then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.staffs);
|
||||
});
|
||||
```
|
||||
|
||||
# Mutations
|
||||
|
||||
There are two ways to execute a Data Connect Mutation using the generated Web SDK:
|
||||
@@ -552,3 +654,130 @@ executeMutation(ref).then((response) => {
|
||||
});
|
||||
```
|
||||
|
||||
## CreateVendor
|
||||
You can execute the `CreateVendor` 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
|
||||
createVendor(vars: CreateVendorVariables): MutationPromise<CreateVendorData, CreateVendorVariables>;
|
||||
|
||||
interface CreateVendorRef {
|
||||
...
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(vars: CreateVendorVariables): MutationRef<CreateVendorData, CreateVendorVariables>;
|
||||
}
|
||||
export const createVendorRef: CreateVendorRef;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the action shortcut function or `MutationRef` function.
|
||||
```typescript
|
||||
createVendor(dc: DataConnect, vars: CreateVendorVariables): MutationPromise<CreateVendorData, CreateVendorVariables>;
|
||||
|
||||
interface CreateVendorRef {
|
||||
...
|
||||
(dc: DataConnect, vars: CreateVendorVariables): MutationRef<CreateVendorData, CreateVendorVariables>;
|
||||
}
|
||||
export const createVendorRef: CreateVendorRef;
|
||||
```
|
||||
|
||||
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 createVendorRef:
|
||||
```typescript
|
||||
const name = createVendorRef.operationName;
|
||||
console.log(name);
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `CreateVendor` mutation requires an argument of type `CreateVendorVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields:
|
||||
|
||||
```typescript
|
||||
export interface CreateVendorVariables {
|
||||
vendorNumber: string;
|
||||
legalName: string;
|
||||
region: VendorRegion;
|
||||
platformType: VendorPlatformType;
|
||||
primaryContactEmail: string;
|
||||
approvalStatus: VendorApprovalStatus;
|
||||
isActive?: boolean | null;
|
||||
}
|
||||
```
|
||||
### Return Type
|
||||
Recall that executing the `CreateVendor` mutation returns a `MutationPromise` that resolves to an object with a `data` property.
|
||||
|
||||
The `data` property is an object of type `CreateVendorData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields:
|
||||
```typescript
|
||||
export interface CreateVendorData {
|
||||
vendor_insert: Vendor_Key;
|
||||
}
|
||||
```
|
||||
### Using `CreateVendor`'s action shortcut function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, createVendor, CreateVendorVariables } from '@dataconnect/generated';
|
||||
|
||||
// The `CreateVendor` mutation requires an argument of type `CreateVendorVariables`:
|
||||
const createVendorVars: CreateVendorVariables = {
|
||||
vendorNumber: ...,
|
||||
legalName: ...,
|
||||
region: ...,
|
||||
platformType: ...,
|
||||
primaryContactEmail: ...,
|
||||
approvalStatus: ...,
|
||||
isActive: ..., // optional
|
||||
};
|
||||
|
||||
// Call the `createVendor()` function to execute the mutation.
|
||||
// You can use the `await` keyword to wait for the promise to resolve.
|
||||
const { data } = await createVendor(createVendorVars);
|
||||
// Variables can be defined inline as well.
|
||||
const { data } = await createVendor({ vendorNumber: ..., legalName: ..., region: ..., platformType: ..., primaryContactEmail: ..., approvalStatus: ..., isActive: ..., });
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the action shortcut function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const { data } = await createVendor(dataConnect, createVendorVars);
|
||||
|
||||
console.log(data.vendor_insert);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
createVendor(createVendorVars).then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.vendor_insert);
|
||||
});
|
||||
```
|
||||
|
||||
### Using `CreateVendor`'s `MutationRef` function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect, executeMutation } from 'firebase/data-connect';
|
||||
import { connectorConfig, createVendorRef, CreateVendorVariables } from '@dataconnect/generated';
|
||||
|
||||
// The `CreateVendor` mutation requires an argument of type `CreateVendorVariables`:
|
||||
const createVendorVars: CreateVendorVariables = {
|
||||
vendorNumber: ...,
|
||||
legalName: ...,
|
||||
region: ...,
|
||||
platformType: ...,
|
||||
primaryContactEmail: ...,
|
||||
approvalStatus: ...,
|
||||
isActive: ..., // optional
|
||||
};
|
||||
|
||||
// Call the `createVendorRef()` function to get a reference to the mutation.
|
||||
const ref = createVendorRef(createVendorVars);
|
||||
// Variables can be defined inline as well.
|
||||
const ref = createVendorRef({ vendorNumber: ..., legalName: ..., region: ..., platformType: ..., primaryContactEmail: ..., approvalStatus: ..., isActive: ..., });
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the `MutationRef` function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const ref = createVendorRef(dataConnect, createVendorVars);
|
||||
|
||||
// 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.vendor_insert);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
executeMutation(ref).then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.vendor_insert);
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@@ -30,21 +30,46 @@ export const RecurrenceType = {
|
||||
SCATTER: "SCATTER",
|
||||
}
|
||||
|
||||
export const VendorApprovalStatus = {
|
||||
PENDING: "PENDING",
|
||||
APPROVED: "APPROVED",
|
||||
SUSPENDED: "SUSPENDED",
|
||||
TERMINATED: "TERMINATED",
|
||||
}
|
||||
|
||||
export const VendorPlatformType = {
|
||||
FULL_PLATFORM: "FULL_PLATFORM",
|
||||
BUILDING_PLATFORM: "BUILDING_PLATFORM",
|
||||
PARTIAL_TECH: "PARTIAL_TECH",
|
||||
TRADITIONAL: "TRADITIONAL",
|
||||
}
|
||||
|
||||
export const VendorRegion = {
|
||||
NATIONAL: "NATIONAL",
|
||||
BAY_AREA: "BAY_AREA",
|
||||
SOUTHERN_CALIFORNIA: "SOUTHERN_CALIFORNIA",
|
||||
NORTHERN_CALIFORNIA: "NORTHERN_CALIFORNIA",
|
||||
WEST: "WEST",
|
||||
EAST: "EAST",
|
||||
MIDWEST: "MIDWEST",
|
||||
SOUTH: "SOUTH",
|
||||
}
|
||||
|
||||
export const connectorConfig = {
|
||||
connector: 'krow-connector',
|
||||
service: 'krow-workforce-db',
|
||||
location: 'us-central1'
|
||||
};
|
||||
|
||||
export const listStaffRef = (dc) => {
|
||||
export const listVendorRef = (dc) => {
|
||||
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return queryRef(dcInstance, 'listStaff');
|
||||
return queryRef(dcInstance, 'listVendor');
|
||||
}
|
||||
listStaffRef.operationName = 'listStaff';
|
||||
listVendorRef.operationName = 'listVendor';
|
||||
|
||||
export function listStaff(dc) {
|
||||
return executeQuery(listStaffRef(dc));
|
||||
export function listVendor(dc) {
|
||||
return executeQuery(listVendorRef(dc));
|
||||
}
|
||||
|
||||
export const createEventRef = (dcOrVars, vars) => {
|
||||
@@ -80,3 +105,25 @@ export function createStaff(dcOrVars, vars) {
|
||||
return executeMutation(createStaffRef(dcOrVars, vars));
|
||||
}
|
||||
|
||||
export const listStaffRef = (dc) => {
|
||||
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return queryRef(dcInstance, 'listStaff');
|
||||
}
|
||||
listStaffRef.operationName = 'listStaff';
|
||||
|
||||
export function listStaff(dc) {
|
||||
return executeQuery(listStaffRef(dc));
|
||||
}
|
||||
|
||||
export const createVendorRef = (dcOrVars, vars) => {
|
||||
const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return mutationRef(dcInstance, 'CreateVendor', inputVars);
|
||||
}
|
||||
createVendorRef.operationName = 'CreateVendor';
|
||||
|
||||
export function createVendor(dcOrVars, vars) {
|
||||
return executeMutation(createVendorRef(dcOrVars, vars));
|
||||
}
|
||||
|
||||
|
||||
@@ -34,6 +34,34 @@ const RecurrenceType = {
|
||||
}
|
||||
exports.RecurrenceType = RecurrenceType;
|
||||
|
||||
const VendorApprovalStatus = {
|
||||
PENDING: "PENDING",
|
||||
APPROVED: "APPROVED",
|
||||
SUSPENDED: "SUSPENDED",
|
||||
TERMINATED: "TERMINATED",
|
||||
}
|
||||
exports.VendorApprovalStatus = VendorApprovalStatus;
|
||||
|
||||
const VendorPlatformType = {
|
||||
FULL_PLATFORM: "FULL_PLATFORM",
|
||||
BUILDING_PLATFORM: "BUILDING_PLATFORM",
|
||||
PARTIAL_TECH: "PARTIAL_TECH",
|
||||
TRADITIONAL: "TRADITIONAL",
|
||||
}
|
||||
exports.VendorPlatformType = VendorPlatformType;
|
||||
|
||||
const VendorRegion = {
|
||||
NATIONAL: "NATIONAL",
|
||||
BAY_AREA: "BAY_AREA",
|
||||
SOUTHERN_CALIFORNIA: "SOUTHERN_CALIFORNIA",
|
||||
NORTHERN_CALIFORNIA: "NORTHERN_CALIFORNIA",
|
||||
WEST: "WEST",
|
||||
EAST: "EAST",
|
||||
MIDWEST: "MIDWEST",
|
||||
SOUTH: "SOUTH",
|
||||
}
|
||||
exports.VendorRegion = VendorRegion;
|
||||
|
||||
const connectorConfig = {
|
||||
connector: 'krow-connector',
|
||||
service: 'krow-workforce-db',
|
||||
@@ -41,16 +69,16 @@ const connectorConfig = {
|
||||
};
|
||||
exports.connectorConfig = connectorConfig;
|
||||
|
||||
const listStaffRef = (dc) => {
|
||||
const listVendorRef = (dc) => {
|
||||
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return queryRef(dcInstance, 'listStaff');
|
||||
return queryRef(dcInstance, 'listVendor');
|
||||
}
|
||||
listStaffRef.operationName = 'listStaff';
|
||||
exports.listStaffRef = listStaffRef;
|
||||
listVendorRef.operationName = 'listVendor';
|
||||
exports.listVendorRef = listVendorRef;
|
||||
|
||||
exports.listStaff = function listStaff(dc) {
|
||||
return executeQuery(listStaffRef(dc));
|
||||
exports.listVendor = function listVendor(dc) {
|
||||
return executeQuery(listVendorRef(dc));
|
||||
};
|
||||
|
||||
const createEventRef = (dcOrVars, vars) => {
|
||||
@@ -88,3 +116,27 @@ exports.createStaffRef = createStaffRef;
|
||||
exports.createStaff = function createStaff(dcOrVars, vars) {
|
||||
return executeMutation(createStaffRef(dcOrVars, vars));
|
||||
};
|
||||
|
||||
const listStaffRef = (dc) => {
|
||||
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return queryRef(dcInstance, 'listStaff');
|
||||
}
|
||||
listStaffRef.operationName = 'listStaff';
|
||||
exports.listStaffRef = listStaffRef;
|
||||
|
||||
exports.listStaff = function listStaff(dc) {
|
||||
return executeQuery(listStaffRef(dc));
|
||||
};
|
||||
|
||||
const createVendorRef = (dcOrVars, vars) => {
|
||||
const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return mutationRef(dcInstance, 'CreateVendor', inputVars);
|
||||
}
|
||||
createVendorRef.operationName = 'CreateVendor';
|
||||
exports.createVendorRef = createVendorRef;
|
||||
|
||||
exports.createVendor = function createVendor(dcOrVars, vars) {
|
||||
return executeMutation(createVendorRef(dcOrVars, vars));
|
||||
};
|
||||
|
||||
@@ -38,6 +38,31 @@ export enum RecurrenceType {
|
||||
SCATTER = "SCATTER",
|
||||
};
|
||||
|
||||
export enum VendorApprovalStatus {
|
||||
PENDING = "PENDING",
|
||||
APPROVED = "APPROVED",
|
||||
SUSPENDED = "SUSPENDED",
|
||||
TERMINATED = "TERMINATED",
|
||||
};
|
||||
|
||||
export enum VendorPlatformType {
|
||||
FULL_PLATFORM = "FULL_PLATFORM",
|
||||
BUILDING_PLATFORM = "BUILDING_PLATFORM",
|
||||
PARTIAL_TECH = "PARTIAL_TECH",
|
||||
TRADITIONAL = "TRADITIONAL",
|
||||
};
|
||||
|
||||
export enum VendorRegion {
|
||||
NATIONAL = "NATIONAL",
|
||||
BAY_AREA = "BAY_AREA",
|
||||
SOUTHERN_CALIFORNIA = "SOUTHERN_CALIFORNIA",
|
||||
NORTHERN_CALIFORNIA = "NORTHERN_CALIFORNIA",
|
||||
WEST = "WEST",
|
||||
EAST = "EAST",
|
||||
MIDWEST = "MIDWEST",
|
||||
SOUTH = "SOUTH",
|
||||
};
|
||||
|
||||
|
||||
|
||||
export interface CreateEventData {
|
||||
@@ -74,6 +99,20 @@ export interface CreateStaffVariables {
|
||||
certifications?: string | null;
|
||||
}
|
||||
|
||||
export interface CreateVendorData {
|
||||
vendor_insert: Vendor_Key;
|
||||
}
|
||||
|
||||
export interface CreateVendorVariables {
|
||||
vendorNumber: string;
|
||||
legalName: string;
|
||||
region: VendorRegion;
|
||||
platformType: VendorPlatformType;
|
||||
primaryContactEmail: string;
|
||||
approvalStatus: VendorApprovalStatus;
|
||||
isActive?: boolean | null;
|
||||
}
|
||||
|
||||
export interface Event_Key {
|
||||
id: UUIDString;
|
||||
__typename?: 'Event_Key';
|
||||
@@ -109,22 +148,40 @@ export interface ListStaffData {
|
||||
} & Staff_Key)[];
|
||||
}
|
||||
|
||||
export interface ListVendorData {
|
||||
vendors: ({
|
||||
id: UUIDString;
|
||||
vendorNumber: string;
|
||||
legalName: string;
|
||||
region: VendorRegion;
|
||||
platformType: VendorPlatformType;
|
||||
primaryContactEmail: string;
|
||||
approvalStatus: VendorApprovalStatus;
|
||||
isActive?: boolean | null;
|
||||
} & Vendor_Key)[];
|
||||
}
|
||||
|
||||
export interface Staff_Key {
|
||||
id: UUIDString;
|
||||
__typename?: 'Staff_Key';
|
||||
}
|
||||
|
||||
interface ListStaffRef {
|
||||
export interface Vendor_Key {
|
||||
id: UUIDString;
|
||||
__typename?: 'Vendor_Key';
|
||||
}
|
||||
|
||||
interface ListVendorRef {
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(): QueryRef<ListStaffData, undefined>;
|
||||
(): QueryRef<ListVendorData, undefined>;
|
||||
/* Allow users to pass in custom DataConnect instances */
|
||||
(dc: DataConnect): QueryRef<ListStaffData, undefined>;
|
||||
(dc: DataConnect): QueryRef<ListVendorData, undefined>;
|
||||
operationName: string;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
export const listVendorRef: ListVendorRef;
|
||||
|
||||
export function listStaff(): QueryPromise<ListStaffData, undefined>;
|
||||
export function listStaff(dc: DataConnect): QueryPromise<ListStaffData, undefined>;
|
||||
export function listVendor(): QueryPromise<ListVendorData, undefined>;
|
||||
export function listVendor(dc: DataConnect): QueryPromise<ListVendorData, undefined>;
|
||||
|
||||
interface CreateEventRef {
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
@@ -162,3 +219,27 @@ export const createStaffRef: CreateStaffRef;
|
||||
export function createStaff(vars: CreateStaffVariables): MutationPromise<CreateStaffData, CreateStaffVariables>;
|
||||
export function createStaff(dc: DataConnect, vars: CreateStaffVariables): MutationPromise<CreateStaffData, CreateStaffVariables>;
|
||||
|
||||
interface ListStaffRef {
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(): QueryRef<ListStaffData, undefined>;
|
||||
/* Allow users to pass in custom DataConnect instances */
|
||||
(dc: DataConnect): QueryRef<ListStaffData, undefined>;
|
||||
operationName: string;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
|
||||
export function listStaff(): QueryPromise<ListStaffData, undefined>;
|
||||
export function listStaff(dc: DataConnect): QueryPromise<ListStaffData, undefined>;
|
||||
|
||||
interface CreateVendorRef {
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(vars: CreateVendorVariables): MutationRef<CreateVendorData, CreateVendorVariables>;
|
||||
/* Allow users to pass in custom DataConnect instances */
|
||||
(dc: DataConnect, vars: CreateVendorVariables): MutationRef<CreateVendorData, CreateVendorVariables>;
|
||||
operationName: string;
|
||||
}
|
||||
export const createVendorRef: CreateVendorRef;
|
||||
|
||||
export function createVendor(vars: CreateVendorVariables): MutationPromise<CreateVendorData, CreateVendorVariables>;
|
||||
export function createVendor(dc: DataConnect, vars: CreateVendorVariables): MutationPromise<CreateVendorData, CreateVendorVariables>;
|
||||
|
||||
|
||||
@@ -17,11 +17,13 @@ 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)
|
||||
- [*listStaff*](#liststaff)
|
||||
- [*listVendor*](#listvendor)
|
||||
- [*listEvents*](#listevents)
|
||||
- [*listStaff*](#liststaff)
|
||||
- [**Mutations**](#mutations)
|
||||
- [*CreateEvent*](#createevent)
|
||||
- [*CreateStaff*](#createstaff)
|
||||
- [*CreateVendor*](#createvendor)
|
||||
|
||||
# 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).
|
||||
@@ -113,68 +115,66 @@ 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).
|
||||
|
||||
## 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):
|
||||
## 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
|
||||
useListStaff(dc: DataConnect, options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
useListVendor(dc: DataConnect, options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
```javascript
|
||||
useListStaff(options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
useListVendor(options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `listStaff` Query has no variables.
|
||||
The `listVendor` Query has no variables.
|
||||
### Return Type
|
||||
Recall that calling the `listStaff` 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 `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 `listStaff` Query is of type `ListStaffData`, 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 `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 ListStaffData {
|
||||
staffs: ({
|
||||
export interface ListVendorData {
|
||||
vendors: ({
|
||||
id: UUIDString;
|
||||
employeeName: string;
|
||||
vendorId?: UUIDString | null;
|
||||
email?: string | null;
|
||||
position?: string | null;
|
||||
employmentType: EmploymentType;
|
||||
rating?: number | null;
|
||||
reliabilityScore?: number | null;
|
||||
backgroundCheckStatus: BackgroundCheckStatus;
|
||||
certifications?: string | null;
|
||||
} & Staff_Key)[];
|
||||
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 `listStaff`'s Query hook function
|
||||
### Using `listVendor`'s Query hook function
|
||||
|
||||
```javascript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig } from '@dataconnect/generated';
|
||||
import { useListStaff } from '@dataconnect/generated/react'
|
||||
import { useListVendor } from '@dataconnect/generated/react'
|
||||
|
||||
export default function ListStaffComponent() {
|
||||
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 = useListStaff();
|
||||
const query = useListVendor();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const query = useListStaff(dataConnect);
|
||||
const query = useListVendor(dataConnect);
|
||||
|
||||
// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
|
||||
const options = { staleTime: 5 * 1000 };
|
||||
const query = useListStaff(options);
|
||||
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 = useListStaff(dataConnect, options);
|
||||
const query = useListVendor(dataConnect, options);
|
||||
|
||||
// Then, you can render your component dynamically based on the status of the Query.
|
||||
if (query.isPending) {
|
||||
@@ -187,7 +187,7 @@ export default function ListStaffComponent() {
|
||||
|
||||
// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
|
||||
if (query.isSuccess) {
|
||||
console.log(query.data.staffs);
|
||||
console.log(query.data.vendors);
|
||||
}
|
||||
return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
|
||||
}
|
||||
@@ -273,6 +273,86 @@ export default function ListEventsComponent() {
|
||||
}
|
||||
```
|
||||
|
||||
## 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):
|
||||
|
||||
```javascript
|
||||
useListStaff(dc: DataConnect, options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
```javascript
|
||||
useListStaff(options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `listStaff` Query has no variables.
|
||||
### Return Type
|
||||
Recall that calling the `listStaff` 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 `listStaff` Query is of type `ListStaffData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
```javascript
|
||||
export interface ListStaffData {
|
||||
staffs: ({
|
||||
id: UUIDString;
|
||||
employeeName: string;
|
||||
vendorId?: UUIDString | null;
|
||||
email?: string | null;
|
||||
position?: string | null;
|
||||
employmentType: EmploymentType;
|
||||
rating?: number | null;
|
||||
reliabilityScore?: number | null;
|
||||
backgroundCheckStatus: BackgroundCheckStatus;
|
||||
certifications?: string | null;
|
||||
} & Staff_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 `listStaff`'s Query hook function
|
||||
|
||||
```javascript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig } from '@dataconnect/generated';
|
||||
import { useListStaff } from '@dataconnect/generated/react'
|
||||
|
||||
export default function ListStaffComponent() {
|
||||
// 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 = useListStaff();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const query = useListStaff(dataConnect);
|
||||
|
||||
// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
|
||||
const options = { staleTime: 5 * 1000 };
|
||||
const query = useListStaff(options);
|
||||
|
||||
// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const options = { staleTime: 5 * 1000 };
|
||||
const query = useListStaff(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.staffs);
|
||||
}
|
||||
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.
|
||||
@@ -522,3 +602,109 @@ export default function CreateStaffComponent() {
|
||||
}
|
||||
```
|
||||
|
||||
## CreateVendor
|
||||
You can execute the `CreateVendor` 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
|
||||
useCreateVendor(options?: useDataConnectMutationOptions<CreateVendorData, FirebaseError, CreateVendorVariables>): UseDataConnectMutationResult<CreateVendorData, CreateVendorVariables>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Mutation hook function.
|
||||
```javascript
|
||||
useCreateVendor(dc: DataConnect, options?: useDataConnectMutationOptions<CreateVendorData, FirebaseError, CreateVendorVariables>): UseDataConnectMutationResult<CreateVendorData, CreateVendorVariables>;
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `CreateVendor` Mutation requires an argument of type `CreateVendorVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
|
||||
```javascript
|
||||
export interface CreateVendorVariables {
|
||||
vendorNumber: string;
|
||||
legalName: string;
|
||||
region: VendorRegion;
|
||||
platformType: VendorPlatformType;
|
||||
primaryContactEmail: string;
|
||||
approvalStatus: VendorApprovalStatus;
|
||||
isActive?: boolean | null;
|
||||
}
|
||||
```
|
||||
### Return Type
|
||||
Recall that calling the `CreateVendor` 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 `CreateVendor` Mutation is of type `CreateVendorData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
```javascript
|
||||
export interface CreateVendorData {
|
||||
vendor_insert: Vendor_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 `CreateVendor`'s Mutation hook function
|
||||
|
||||
```javascript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, CreateVendorVariables } from '@dataconnect/generated';
|
||||
import { useCreateVendor } from '@dataconnect/generated/react'
|
||||
|
||||
export default function CreateVendorComponent() {
|
||||
// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
|
||||
const mutation = useCreateVendor();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the Mutation hook function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const mutation = useCreateVendor(dataConnect);
|
||||
|
||||
// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
|
||||
const options = {
|
||||
onSuccess: () => { console.log('Mutation succeeded!'); }
|
||||
};
|
||||
const mutation = useCreateVendor(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 = useCreateVendor(dataConnect, options);
|
||||
|
||||
// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
|
||||
// The `useCreateVendor` Mutation requires an argument of type `CreateVendorVariables`:
|
||||
const createVendorVars: CreateVendorVariables = {
|
||||
vendorNumber: ...,
|
||||
legalName: ...,
|
||||
region: ...,
|
||||
platformType: ...,
|
||||
primaryContactEmail: ...,
|
||||
approvalStatus: ...,
|
||||
isActive: ..., // optional
|
||||
};
|
||||
mutation.mutate(createVendorVars);
|
||||
// Variables can be defined inline as well.
|
||||
mutation.mutate({ 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(createVendorVars, 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_insert);
|
||||
}
|
||||
return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { listStaffRef, createEventRef, listEventsRef, createStaffRef, connectorConfig } from '../../esm/index.esm.js';
|
||||
import { listVendorRef, createEventRef, listEventsRef, createStaffRef, listStaffRef, createVendorRef, 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 useListStaff(dcOrOptions, options) {
|
||||
export function useListVendor(dcOrOptions, options) {
|
||||
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
|
||||
const ref = listStaffRef(dcInstance);
|
||||
const ref = listVendorRef(dcInstance);
|
||||
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
export function useCreateEvent(dcOrOptions, options) {
|
||||
@@ -29,3 +29,17 @@ export function useCreateStaff(dcOrOptions, options) {
|
||||
}
|
||||
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
|
||||
|
||||
export function useListStaff(dcOrOptions, options) {
|
||||
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
|
||||
const ref = listStaffRef(dcInstance);
|
||||
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
export function useCreateVendor(dcOrOptions, options) {
|
||||
const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options);
|
||||
function refFactory(vars) {
|
||||
return createVendorRef(dcInstance, vars);
|
||||
}
|
||||
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
const { listStaffRef, createEventRef, listEventsRef, createStaffRef, connectorConfig } = require('../index.cjs.js');
|
||||
const { listVendorRef, createEventRef, listEventsRef, createStaffRef, listStaffRef, createVendorRef, connectorConfig } = require('../index.cjs.js');
|
||||
const { validateArgs, CallerSdkTypeEnum } = require('firebase/data-connect');
|
||||
const { useDataConnectQuery, useDataConnectMutation, validateReactArgs } = require('@tanstack-query-firebase/react/data-connect');
|
||||
|
||||
|
||||
exports.useListStaff = function useListStaff(dcOrOptions, options) {
|
||||
exports.useListVendor = function useListVendor(dcOrOptions, options) {
|
||||
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
|
||||
const ref = listStaffRef(dcInstance);
|
||||
const ref = listVendorRef(dcInstance);
|
||||
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) {
|
||||
@@ -29,3 +29,17 @@ exports.useCreateStaff = function useCreateStaff(dcOrOptions, options) {
|
||||
}
|
||||
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
|
||||
|
||||
exports.useListStaff = function useListStaff(dcOrOptions, options) {
|
||||
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
|
||||
const ref = listStaffRef(dcInstance);
|
||||
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
exports.useCreateVendor = function useCreateVendor(dcOrOptions, options) {
|
||||
const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options);
|
||||
function refFactory(vars) {
|
||||
return createVendorRef(dcInstance, vars);
|
||||
}
|
||||
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { ListStaffData, CreateEventData, CreateEventVariables, ListEventsData, CreateStaffData, CreateStaffVariables } from '../';
|
||||
import { ListVendorData, CreateEventData, CreateEventVariables, ListEventsData, CreateStaffData, CreateStaffVariables, ListStaffData, CreateVendorData, CreateVendorVariables } 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 useListStaff(options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
export function useListStaff(dc: DataConnect, options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
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>;
|
||||
@@ -16,3 +16,9 @@ export function useListEvents(dc: DataConnect, options?: useDataConnectQueryOpti
|
||||
|
||||
export function useCreateStaff(options?: useDataConnectMutationOptions<CreateStaffData, FirebaseError, CreateStaffVariables>): UseDataConnectMutationResult<CreateStaffData, CreateStaffVariables>;
|
||||
export function useCreateStaff(dc: DataConnect, options?: useDataConnectMutationOptions<CreateStaffData, FirebaseError, CreateStaffVariables>): UseDataConnectMutationResult<CreateStaffData, CreateStaffVariables>;
|
||||
|
||||
export function useListStaff(options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
export function useListStaff(dc: DataConnect, options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
|
||||
export function useCreateVendor(options?: useDataConnectMutationOptions<CreateVendorData, FirebaseError, CreateVendorVariables>): UseDataConnectMutationResult<CreateVendorData, CreateVendorVariables>;
|
||||
export function useCreateVendor(dc: DataConnect, options?: useDataConnectMutationOptions<CreateVendorData, FirebaseError, CreateVendorVariables>): UseDataConnectMutationResult<CreateVendorData, CreateVendorVariables>;
|
||||
|
||||
@@ -12,10 +12,10 @@ 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 { useListStaff, useCreateEvent, useListEvents, useCreateStaff } from '@dataconnect/generated/react';
|
||||
import { useListVendor, useCreateEvent, useListEvents, useCreateStaff, useListStaff, useCreateVendor } from '@dataconnect/generated/react';
|
||||
// The types of these hooks are available in react/index.d.ts
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useListStaff();
|
||||
const { data, isPending, isSuccess, isError, error } = useListVendor();
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars);
|
||||
|
||||
@@ -23,6 +23,10 @@ const { data, isPending, isSuccess, isError, error } = useListEvents();
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useCreateStaff(createStaffVars);
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useListStaff();
|
||||
|
||||
const { data, isPending, isSuccess, isError, error } = useCreateVendor(createVendorVars);
|
||||
|
||||
```
|
||||
|
||||
Here's an example from a different generated SDK:
|
||||
@@ -60,11 +64,11 @@ 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 { listStaff, createEvent, listEvents, createStaff } from '@dataconnect/generated';
|
||||
import { listVendor, createEvent, listEvents, createStaff, listStaff, createVendor } from '@dataconnect/generated';
|
||||
|
||||
|
||||
// Operation listStaff:
|
||||
const { data } = await ListStaff(dataConnect);
|
||||
// Operation listVendor:
|
||||
const { data } = await ListVendor(dataConnect);
|
||||
|
||||
// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts
|
||||
const { data } = await CreateEvent(dataConnect, createEventVars);
|
||||
@@ -75,5 +79,11 @@ const { data } = await ListEvents(dataConnect);
|
||||
// Operation CreateStaff: For variables, look at type CreateStaffVars in ../index.d.ts
|
||||
const { data } = await CreateStaff(dataConnect, createStaffVars);
|
||||
|
||||
// Operation listStaff:
|
||||
const { data } = await ListStaff(dataConnect);
|
||||
|
||||
// Operation CreateVendor: For variables, look at type CreateVendorVars in ../index.d.ts
|
||||
const { data } = await CreateVendor(dataConnect, createVendorVars);
|
||||
|
||||
|
||||
```
|
||||
@@ -10,11 +10,13 @@ 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)
|
||||
- [*listStaff*](#liststaff)
|
||||
- [*listVendor*](#listvendor)
|
||||
- [*listEvents*](#listevents)
|
||||
- [*listStaff*](#liststaff)
|
||||
- [**Mutations**](#mutations)
|
||||
- [*CreateEvent*](#createevent)
|
||||
- [*CreateStaff*](#createstaff)
|
||||
- [*CreateVendor*](#createvendor)
|
||||
|
||||
# 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).
|
||||
@@ -61,105 +63,103 @@ The following is true for both the action shortcut function and the `QueryRef` f
|
||||
|
||||
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).
|
||||
|
||||
## listStaff
|
||||
You can execute the `listStaff` 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):
|
||||
## listVendor
|
||||
You can execute the `listVendor` 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
|
||||
listStaff(): QueryPromise<ListStaffData, undefined>;
|
||||
listVendor(): QueryPromise<ListVendorData, undefined>;
|
||||
|
||||
interface ListStaffRef {
|
||||
interface ListVendorRef {
|
||||
...
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(): QueryRef<ListStaffData, undefined>;
|
||||
(): QueryRef<ListVendorData, undefined>;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
export const listVendorRef: ListVendorRef;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function.
|
||||
```typescript
|
||||
listStaff(dc: DataConnect): QueryPromise<ListStaffData, undefined>;
|
||||
listVendor(dc: DataConnect): QueryPromise<ListVendorData, undefined>;
|
||||
|
||||
interface ListStaffRef {
|
||||
interface ListVendorRef {
|
||||
...
|
||||
(dc: DataConnect): QueryRef<ListStaffData, undefined>;
|
||||
(dc: DataConnect): QueryRef<ListVendorData, undefined>;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
export const listVendorRef: ListVendorRef;
|
||||
```
|
||||
|
||||
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 listStaffRef:
|
||||
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 listVendorRef:
|
||||
```typescript
|
||||
const name = listStaffRef.operationName;
|
||||
const name = listVendorRef.operationName;
|
||||
console.log(name);
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `listStaff` query has no variables.
|
||||
The `listVendor` query has no variables.
|
||||
### Return Type
|
||||
Recall that executing the `listStaff` query returns a `QueryPromise` that resolves to an object with a `data` property.
|
||||
Recall that executing the `listVendor` query returns a `QueryPromise` that resolves to an object with a `data` property.
|
||||
|
||||
The `data` property is an object of type `ListStaffData`, 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 `ListVendorData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields:
|
||||
```typescript
|
||||
export interface ListStaffData {
|
||||
staffs: ({
|
||||
export interface ListVendorData {
|
||||
vendors: ({
|
||||
id: UUIDString;
|
||||
employeeName: string;
|
||||
vendorId?: UUIDString | null;
|
||||
email?: string | null;
|
||||
position?: string | null;
|
||||
employmentType: EmploymentType;
|
||||
rating?: number | null;
|
||||
reliabilityScore?: number | null;
|
||||
backgroundCheckStatus: BackgroundCheckStatus;
|
||||
certifications?: string | null;
|
||||
} & Staff_Key)[];
|
||||
vendorNumber: string;
|
||||
legalName: string;
|
||||
region: VendorRegion;
|
||||
platformType: VendorPlatformType;
|
||||
primaryContactEmail: string;
|
||||
approvalStatus: VendorApprovalStatus;
|
||||
isActive?: boolean | null;
|
||||
} & Vendor_Key)[];
|
||||
}
|
||||
```
|
||||
### Using `listStaff`'s action shortcut function
|
||||
### Using `listVendor`'s action shortcut function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, listStaff } from '@dataconnect/generated';
|
||||
import { connectorConfig, listVendor } from '@dataconnect/generated';
|
||||
|
||||
|
||||
// Call the `listStaff()` function to execute the query.
|
||||
// Call the `listVendor()` function to execute the query.
|
||||
// You can use the `await` keyword to wait for the promise to resolve.
|
||||
const { data } = await listStaff();
|
||||
const { data } = await listVendor();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the action shortcut function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const { data } = await listStaff(dataConnect);
|
||||
const { data } = await listVendor(dataConnect);
|
||||
|
||||
console.log(data.staffs);
|
||||
console.log(data.vendors);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
listStaff().then((response) => {
|
||||
listVendor().then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.staffs);
|
||||
console.log(data.vendors);
|
||||
});
|
||||
```
|
||||
|
||||
### Using `listStaff`'s `QueryRef` function
|
||||
### Using `listVendor`'s `QueryRef` function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect, executeQuery } from 'firebase/data-connect';
|
||||
import { connectorConfig, listStaffRef } from '@dataconnect/generated';
|
||||
import { connectorConfig, listVendorRef } from '@dataconnect/generated';
|
||||
|
||||
|
||||
// Call the `listStaffRef()` function to get a reference to the query.
|
||||
const ref = listStaffRef();
|
||||
// Call the `listVendorRef()` function to get a reference to the query.
|
||||
const ref = listVendorRef();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the `QueryRef` function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const ref = listStaffRef(dataConnect);
|
||||
const ref = listVendorRef(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.staffs);
|
||||
console.log(data.vendors);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
executeQuery(ref).then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.staffs);
|
||||
console.log(data.vendors);
|
||||
});
|
||||
```
|
||||
|
||||
@@ -265,6 +265,108 @@ executeQuery(ref).then((response) => {
|
||||
});
|
||||
```
|
||||
|
||||
## listStaff
|
||||
You can execute the `listStaff` 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
|
||||
listStaff(): QueryPromise<ListStaffData, undefined>;
|
||||
|
||||
interface ListStaffRef {
|
||||
...
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(): QueryRef<ListStaffData, undefined>;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the action shortcut function or `QueryRef` function.
|
||||
```typescript
|
||||
listStaff(dc: DataConnect): QueryPromise<ListStaffData, undefined>;
|
||||
|
||||
interface ListStaffRef {
|
||||
...
|
||||
(dc: DataConnect): QueryRef<ListStaffData, undefined>;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
```
|
||||
|
||||
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 listStaffRef:
|
||||
```typescript
|
||||
const name = listStaffRef.operationName;
|
||||
console.log(name);
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `listStaff` query has no variables.
|
||||
### Return Type
|
||||
Recall that executing the `listStaff` query returns a `QueryPromise` that resolves to an object with a `data` property.
|
||||
|
||||
The `data` property is an object of type `ListStaffData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields:
|
||||
```typescript
|
||||
export interface ListStaffData {
|
||||
staffs: ({
|
||||
id: UUIDString;
|
||||
employeeName: string;
|
||||
vendorId?: UUIDString | null;
|
||||
email?: string | null;
|
||||
position?: string | null;
|
||||
employmentType: EmploymentType;
|
||||
rating?: number | null;
|
||||
reliabilityScore?: number | null;
|
||||
backgroundCheckStatus: BackgroundCheckStatus;
|
||||
certifications?: string | null;
|
||||
} & Staff_Key)[];
|
||||
}
|
||||
```
|
||||
### Using `listStaff`'s action shortcut function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, listStaff } from '@dataconnect/generated';
|
||||
|
||||
|
||||
// Call the `listStaff()` function to execute the query.
|
||||
// You can use the `await` keyword to wait for the promise to resolve.
|
||||
const { data } = await listStaff();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the action shortcut function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const { data } = await listStaff(dataConnect);
|
||||
|
||||
console.log(data.staffs);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
listStaff().then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.staffs);
|
||||
});
|
||||
```
|
||||
|
||||
### Using `listStaff`'s `QueryRef` function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect, executeQuery } from 'firebase/data-connect';
|
||||
import { connectorConfig, listStaffRef } from '@dataconnect/generated';
|
||||
|
||||
|
||||
// Call the `listStaffRef()` function to get a reference to the query.
|
||||
const ref = listStaffRef();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the `QueryRef` function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const ref = listStaffRef(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.staffs);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
executeQuery(ref).then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.staffs);
|
||||
});
|
||||
```
|
||||
|
||||
# Mutations
|
||||
|
||||
There are two ways to execute a Data Connect Mutation using the generated Web SDK:
|
||||
@@ -552,3 +654,130 @@ executeMutation(ref).then((response) => {
|
||||
});
|
||||
```
|
||||
|
||||
## CreateVendor
|
||||
You can execute the `CreateVendor` 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
|
||||
createVendor(vars: CreateVendorVariables): MutationPromise<CreateVendorData, CreateVendorVariables>;
|
||||
|
||||
interface CreateVendorRef {
|
||||
...
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(vars: CreateVendorVariables): MutationRef<CreateVendorData, CreateVendorVariables>;
|
||||
}
|
||||
export const createVendorRef: CreateVendorRef;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the action shortcut function or `MutationRef` function.
|
||||
```typescript
|
||||
createVendor(dc: DataConnect, vars: CreateVendorVariables): MutationPromise<CreateVendorData, CreateVendorVariables>;
|
||||
|
||||
interface CreateVendorRef {
|
||||
...
|
||||
(dc: DataConnect, vars: CreateVendorVariables): MutationRef<CreateVendorData, CreateVendorVariables>;
|
||||
}
|
||||
export const createVendorRef: CreateVendorRef;
|
||||
```
|
||||
|
||||
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 createVendorRef:
|
||||
```typescript
|
||||
const name = createVendorRef.operationName;
|
||||
console.log(name);
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `CreateVendor` mutation requires an argument of type `CreateVendorVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields:
|
||||
|
||||
```typescript
|
||||
export interface CreateVendorVariables {
|
||||
vendorNumber: string;
|
||||
legalName: string;
|
||||
region: VendorRegion;
|
||||
platformType: VendorPlatformType;
|
||||
primaryContactEmail: string;
|
||||
approvalStatus: VendorApprovalStatus;
|
||||
isActive?: boolean | null;
|
||||
}
|
||||
```
|
||||
### Return Type
|
||||
Recall that executing the `CreateVendor` mutation returns a `MutationPromise` that resolves to an object with a `data` property.
|
||||
|
||||
The `data` property is an object of type `CreateVendorData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields:
|
||||
```typescript
|
||||
export interface CreateVendorData {
|
||||
vendor_insert: Vendor_Key;
|
||||
}
|
||||
```
|
||||
### Using `CreateVendor`'s action shortcut function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, createVendor, CreateVendorVariables } from '@dataconnect/generated';
|
||||
|
||||
// The `CreateVendor` mutation requires an argument of type `CreateVendorVariables`:
|
||||
const createVendorVars: CreateVendorVariables = {
|
||||
vendorNumber: ...,
|
||||
legalName: ...,
|
||||
region: ...,
|
||||
platformType: ...,
|
||||
primaryContactEmail: ...,
|
||||
approvalStatus: ...,
|
||||
isActive: ..., // optional
|
||||
};
|
||||
|
||||
// Call the `createVendor()` function to execute the mutation.
|
||||
// You can use the `await` keyword to wait for the promise to resolve.
|
||||
const { data } = await createVendor(createVendorVars);
|
||||
// Variables can be defined inline as well.
|
||||
const { data } = await createVendor({ vendorNumber: ..., legalName: ..., region: ..., platformType: ..., primaryContactEmail: ..., approvalStatus: ..., isActive: ..., });
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the action shortcut function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const { data } = await createVendor(dataConnect, createVendorVars);
|
||||
|
||||
console.log(data.vendor_insert);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
createVendor(createVendorVars).then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.vendor_insert);
|
||||
});
|
||||
```
|
||||
|
||||
### Using `CreateVendor`'s `MutationRef` function
|
||||
|
||||
```typescript
|
||||
import { getDataConnect, executeMutation } from 'firebase/data-connect';
|
||||
import { connectorConfig, createVendorRef, CreateVendorVariables } from '@dataconnect/generated';
|
||||
|
||||
// The `CreateVendor` mutation requires an argument of type `CreateVendorVariables`:
|
||||
const createVendorVars: CreateVendorVariables = {
|
||||
vendorNumber: ...,
|
||||
legalName: ...,
|
||||
region: ...,
|
||||
platformType: ...,
|
||||
primaryContactEmail: ...,
|
||||
approvalStatus: ...,
|
||||
isActive: ..., // optional
|
||||
};
|
||||
|
||||
// Call the `createVendorRef()` function to get a reference to the mutation.
|
||||
const ref = createVendorRef(createVendorVars);
|
||||
// Variables can be defined inline as well.
|
||||
const ref = createVendorRef({ vendorNumber: ..., legalName: ..., region: ..., platformType: ..., primaryContactEmail: ..., approvalStatus: ..., isActive: ..., });
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the `MutationRef` function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const ref = createVendorRef(dataConnect, createVendorVars);
|
||||
|
||||
// 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.vendor_insert);
|
||||
|
||||
// Or, you can use the `Promise` API.
|
||||
executeMutation(ref).then((response) => {
|
||||
const data = response.data;
|
||||
console.log(data.vendor_insert);
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@@ -30,21 +30,46 @@ export const RecurrenceType = {
|
||||
SCATTER: "SCATTER",
|
||||
}
|
||||
|
||||
export const VendorApprovalStatus = {
|
||||
PENDING: "PENDING",
|
||||
APPROVED: "APPROVED",
|
||||
SUSPENDED: "SUSPENDED",
|
||||
TERMINATED: "TERMINATED",
|
||||
}
|
||||
|
||||
export const VendorPlatformType = {
|
||||
FULL_PLATFORM: "FULL_PLATFORM",
|
||||
BUILDING_PLATFORM: "BUILDING_PLATFORM",
|
||||
PARTIAL_TECH: "PARTIAL_TECH",
|
||||
TRADITIONAL: "TRADITIONAL",
|
||||
}
|
||||
|
||||
export const VendorRegion = {
|
||||
NATIONAL: "NATIONAL",
|
||||
BAY_AREA: "BAY_AREA",
|
||||
SOUTHERN_CALIFORNIA: "SOUTHERN_CALIFORNIA",
|
||||
NORTHERN_CALIFORNIA: "NORTHERN_CALIFORNIA",
|
||||
WEST: "WEST",
|
||||
EAST: "EAST",
|
||||
MIDWEST: "MIDWEST",
|
||||
SOUTH: "SOUTH",
|
||||
}
|
||||
|
||||
export const connectorConfig = {
|
||||
connector: 'krow-connector',
|
||||
service: 'krow-workforce-db',
|
||||
location: 'us-central1'
|
||||
};
|
||||
|
||||
export const listStaffRef = (dc) => {
|
||||
export const listVendorRef = (dc) => {
|
||||
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return queryRef(dcInstance, 'listStaff');
|
||||
return queryRef(dcInstance, 'listVendor');
|
||||
}
|
||||
listStaffRef.operationName = 'listStaff';
|
||||
listVendorRef.operationName = 'listVendor';
|
||||
|
||||
export function listStaff(dc) {
|
||||
return executeQuery(listStaffRef(dc));
|
||||
export function listVendor(dc) {
|
||||
return executeQuery(listVendorRef(dc));
|
||||
}
|
||||
|
||||
export const createEventRef = (dcOrVars, vars) => {
|
||||
@@ -80,3 +105,25 @@ export function createStaff(dcOrVars, vars) {
|
||||
return executeMutation(createStaffRef(dcOrVars, vars));
|
||||
}
|
||||
|
||||
export const listStaffRef = (dc) => {
|
||||
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return queryRef(dcInstance, 'listStaff');
|
||||
}
|
||||
listStaffRef.operationName = 'listStaff';
|
||||
|
||||
export function listStaff(dc) {
|
||||
return executeQuery(listStaffRef(dc));
|
||||
}
|
||||
|
||||
export const createVendorRef = (dcOrVars, vars) => {
|
||||
const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return mutationRef(dcInstance, 'CreateVendor', inputVars);
|
||||
}
|
||||
createVendorRef.operationName = 'CreateVendor';
|
||||
|
||||
export function createVendor(dcOrVars, vars) {
|
||||
return executeMutation(createVendorRef(dcOrVars, vars));
|
||||
}
|
||||
|
||||
|
||||
@@ -34,6 +34,34 @@ const RecurrenceType = {
|
||||
}
|
||||
exports.RecurrenceType = RecurrenceType;
|
||||
|
||||
const VendorApprovalStatus = {
|
||||
PENDING: "PENDING",
|
||||
APPROVED: "APPROVED",
|
||||
SUSPENDED: "SUSPENDED",
|
||||
TERMINATED: "TERMINATED",
|
||||
}
|
||||
exports.VendorApprovalStatus = VendorApprovalStatus;
|
||||
|
||||
const VendorPlatformType = {
|
||||
FULL_PLATFORM: "FULL_PLATFORM",
|
||||
BUILDING_PLATFORM: "BUILDING_PLATFORM",
|
||||
PARTIAL_TECH: "PARTIAL_TECH",
|
||||
TRADITIONAL: "TRADITIONAL",
|
||||
}
|
||||
exports.VendorPlatformType = VendorPlatformType;
|
||||
|
||||
const VendorRegion = {
|
||||
NATIONAL: "NATIONAL",
|
||||
BAY_AREA: "BAY_AREA",
|
||||
SOUTHERN_CALIFORNIA: "SOUTHERN_CALIFORNIA",
|
||||
NORTHERN_CALIFORNIA: "NORTHERN_CALIFORNIA",
|
||||
WEST: "WEST",
|
||||
EAST: "EAST",
|
||||
MIDWEST: "MIDWEST",
|
||||
SOUTH: "SOUTH",
|
||||
}
|
||||
exports.VendorRegion = VendorRegion;
|
||||
|
||||
const connectorConfig = {
|
||||
connector: 'krow-connector',
|
||||
service: 'krow-workforce-db',
|
||||
@@ -41,16 +69,16 @@ const connectorConfig = {
|
||||
};
|
||||
exports.connectorConfig = connectorConfig;
|
||||
|
||||
const listStaffRef = (dc) => {
|
||||
const listVendorRef = (dc) => {
|
||||
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return queryRef(dcInstance, 'listStaff');
|
||||
return queryRef(dcInstance, 'listVendor');
|
||||
}
|
||||
listStaffRef.operationName = 'listStaff';
|
||||
exports.listStaffRef = listStaffRef;
|
||||
listVendorRef.operationName = 'listVendor';
|
||||
exports.listVendorRef = listVendorRef;
|
||||
|
||||
exports.listStaff = function listStaff(dc) {
|
||||
return executeQuery(listStaffRef(dc));
|
||||
exports.listVendor = function listVendor(dc) {
|
||||
return executeQuery(listVendorRef(dc));
|
||||
};
|
||||
|
||||
const createEventRef = (dcOrVars, vars) => {
|
||||
@@ -88,3 +116,27 @@ exports.createStaffRef = createStaffRef;
|
||||
exports.createStaff = function createStaff(dcOrVars, vars) {
|
||||
return executeMutation(createStaffRef(dcOrVars, vars));
|
||||
};
|
||||
|
||||
const listStaffRef = (dc) => {
|
||||
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return queryRef(dcInstance, 'listStaff');
|
||||
}
|
||||
listStaffRef.operationName = 'listStaff';
|
||||
exports.listStaffRef = listStaffRef;
|
||||
|
||||
exports.listStaff = function listStaff(dc) {
|
||||
return executeQuery(listStaffRef(dc));
|
||||
};
|
||||
|
||||
const createVendorRef = (dcOrVars, vars) => {
|
||||
const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
|
||||
dcInstance._useGeneratedSdk();
|
||||
return mutationRef(dcInstance, 'CreateVendor', inputVars);
|
||||
}
|
||||
createVendorRef.operationName = 'CreateVendor';
|
||||
exports.createVendorRef = createVendorRef;
|
||||
|
||||
exports.createVendor = function createVendor(dcOrVars, vars) {
|
||||
return executeMutation(createVendorRef(dcOrVars, vars));
|
||||
};
|
||||
|
||||
@@ -38,6 +38,31 @@ export enum RecurrenceType {
|
||||
SCATTER = "SCATTER",
|
||||
};
|
||||
|
||||
export enum VendorApprovalStatus {
|
||||
PENDING = "PENDING",
|
||||
APPROVED = "APPROVED",
|
||||
SUSPENDED = "SUSPENDED",
|
||||
TERMINATED = "TERMINATED",
|
||||
};
|
||||
|
||||
export enum VendorPlatformType {
|
||||
FULL_PLATFORM = "FULL_PLATFORM",
|
||||
BUILDING_PLATFORM = "BUILDING_PLATFORM",
|
||||
PARTIAL_TECH = "PARTIAL_TECH",
|
||||
TRADITIONAL = "TRADITIONAL",
|
||||
};
|
||||
|
||||
export enum VendorRegion {
|
||||
NATIONAL = "NATIONAL",
|
||||
BAY_AREA = "BAY_AREA",
|
||||
SOUTHERN_CALIFORNIA = "SOUTHERN_CALIFORNIA",
|
||||
NORTHERN_CALIFORNIA = "NORTHERN_CALIFORNIA",
|
||||
WEST = "WEST",
|
||||
EAST = "EAST",
|
||||
MIDWEST = "MIDWEST",
|
||||
SOUTH = "SOUTH",
|
||||
};
|
||||
|
||||
|
||||
|
||||
export interface CreateEventData {
|
||||
@@ -74,6 +99,20 @@ export interface CreateStaffVariables {
|
||||
certifications?: string | null;
|
||||
}
|
||||
|
||||
export interface CreateVendorData {
|
||||
vendor_insert: Vendor_Key;
|
||||
}
|
||||
|
||||
export interface CreateVendorVariables {
|
||||
vendorNumber: string;
|
||||
legalName: string;
|
||||
region: VendorRegion;
|
||||
platformType: VendorPlatformType;
|
||||
primaryContactEmail: string;
|
||||
approvalStatus: VendorApprovalStatus;
|
||||
isActive?: boolean | null;
|
||||
}
|
||||
|
||||
export interface Event_Key {
|
||||
id: UUIDString;
|
||||
__typename?: 'Event_Key';
|
||||
@@ -109,22 +148,40 @@ export interface ListStaffData {
|
||||
} & Staff_Key)[];
|
||||
}
|
||||
|
||||
export interface ListVendorData {
|
||||
vendors: ({
|
||||
id: UUIDString;
|
||||
vendorNumber: string;
|
||||
legalName: string;
|
||||
region: VendorRegion;
|
||||
platformType: VendorPlatformType;
|
||||
primaryContactEmail: string;
|
||||
approvalStatus: VendorApprovalStatus;
|
||||
isActive?: boolean | null;
|
||||
} & Vendor_Key)[];
|
||||
}
|
||||
|
||||
export interface Staff_Key {
|
||||
id: UUIDString;
|
||||
__typename?: 'Staff_Key';
|
||||
}
|
||||
|
||||
interface ListStaffRef {
|
||||
export interface Vendor_Key {
|
||||
id: UUIDString;
|
||||
__typename?: 'Vendor_Key';
|
||||
}
|
||||
|
||||
interface ListVendorRef {
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(): QueryRef<ListStaffData, undefined>;
|
||||
(): QueryRef<ListVendorData, undefined>;
|
||||
/* Allow users to pass in custom DataConnect instances */
|
||||
(dc: DataConnect): QueryRef<ListStaffData, undefined>;
|
||||
(dc: DataConnect): QueryRef<ListVendorData, undefined>;
|
||||
operationName: string;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
export const listVendorRef: ListVendorRef;
|
||||
|
||||
export function listStaff(): QueryPromise<ListStaffData, undefined>;
|
||||
export function listStaff(dc: DataConnect): QueryPromise<ListStaffData, undefined>;
|
||||
export function listVendor(): QueryPromise<ListVendorData, undefined>;
|
||||
export function listVendor(dc: DataConnect): QueryPromise<ListVendorData, undefined>;
|
||||
|
||||
interface CreateEventRef {
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
@@ -162,3 +219,27 @@ export const createStaffRef: CreateStaffRef;
|
||||
export function createStaff(vars: CreateStaffVariables): MutationPromise<CreateStaffData, CreateStaffVariables>;
|
||||
export function createStaff(dc: DataConnect, vars: CreateStaffVariables): MutationPromise<CreateStaffData, CreateStaffVariables>;
|
||||
|
||||
interface ListStaffRef {
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(): QueryRef<ListStaffData, undefined>;
|
||||
/* Allow users to pass in custom DataConnect instances */
|
||||
(dc: DataConnect): QueryRef<ListStaffData, undefined>;
|
||||
operationName: string;
|
||||
}
|
||||
export const listStaffRef: ListStaffRef;
|
||||
|
||||
export function listStaff(): QueryPromise<ListStaffData, undefined>;
|
||||
export function listStaff(dc: DataConnect): QueryPromise<ListStaffData, undefined>;
|
||||
|
||||
interface CreateVendorRef {
|
||||
/* Allow users to create refs without passing in DataConnect */
|
||||
(vars: CreateVendorVariables): MutationRef<CreateVendorData, CreateVendorVariables>;
|
||||
/* Allow users to pass in custom DataConnect instances */
|
||||
(dc: DataConnect, vars: CreateVendorVariables): MutationRef<CreateVendorData, CreateVendorVariables>;
|
||||
operationName: string;
|
||||
}
|
||||
export const createVendorRef: CreateVendorRef;
|
||||
|
||||
export function createVendor(vars: CreateVendorVariables): MutationPromise<CreateVendorData, CreateVendorVariables>;
|
||||
export function createVendor(dc: DataConnect, vars: CreateVendorVariables): MutationPromise<CreateVendorData, CreateVendorVariables>;
|
||||
|
||||
|
||||
@@ -17,11 +17,13 @@ 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)
|
||||
- [*listStaff*](#liststaff)
|
||||
- [*listVendor*](#listvendor)
|
||||
- [*listEvents*](#listevents)
|
||||
- [*listStaff*](#liststaff)
|
||||
- [**Mutations**](#mutations)
|
||||
- [*CreateEvent*](#createevent)
|
||||
- [*CreateStaff*](#createstaff)
|
||||
- [*CreateVendor*](#createvendor)
|
||||
|
||||
# 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).
|
||||
@@ -113,68 +115,66 @@ 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).
|
||||
|
||||
## 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):
|
||||
## 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
|
||||
useListStaff(dc: DataConnect, options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
useListVendor(dc: DataConnect, options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
```javascript
|
||||
useListStaff(options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
useListVendor(options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `listStaff` Query has no variables.
|
||||
The `listVendor` Query has no variables.
|
||||
### Return Type
|
||||
Recall that calling the `listStaff` 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 `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 `listStaff` Query is of type `ListStaffData`, 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 `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 ListStaffData {
|
||||
staffs: ({
|
||||
export interface ListVendorData {
|
||||
vendors: ({
|
||||
id: UUIDString;
|
||||
employeeName: string;
|
||||
vendorId?: UUIDString | null;
|
||||
email?: string | null;
|
||||
position?: string | null;
|
||||
employmentType: EmploymentType;
|
||||
rating?: number | null;
|
||||
reliabilityScore?: number | null;
|
||||
backgroundCheckStatus: BackgroundCheckStatus;
|
||||
certifications?: string | null;
|
||||
} & Staff_Key)[];
|
||||
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 `listStaff`'s Query hook function
|
||||
### Using `listVendor`'s Query hook function
|
||||
|
||||
```javascript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig } from '@dataconnect/generated';
|
||||
import { useListStaff } from '@dataconnect/generated/react'
|
||||
import { useListVendor } from '@dataconnect/generated/react'
|
||||
|
||||
export default function ListStaffComponent() {
|
||||
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 = useListStaff();
|
||||
const query = useListVendor();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const query = useListStaff(dataConnect);
|
||||
const query = useListVendor(dataConnect);
|
||||
|
||||
// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
|
||||
const options = { staleTime: 5 * 1000 };
|
||||
const query = useListStaff(options);
|
||||
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 = useListStaff(dataConnect, options);
|
||||
const query = useListVendor(dataConnect, options);
|
||||
|
||||
// Then, you can render your component dynamically based on the status of the Query.
|
||||
if (query.isPending) {
|
||||
@@ -187,7 +187,7 @@ export default function ListStaffComponent() {
|
||||
|
||||
// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
|
||||
if (query.isSuccess) {
|
||||
console.log(query.data.staffs);
|
||||
console.log(query.data.vendors);
|
||||
}
|
||||
return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
|
||||
}
|
||||
@@ -273,6 +273,86 @@ export default function ListEventsComponent() {
|
||||
}
|
||||
```
|
||||
|
||||
## 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):
|
||||
|
||||
```javascript
|
||||
useListStaff(dc: DataConnect, options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
```javascript
|
||||
useListStaff(options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `listStaff` Query has no variables.
|
||||
### Return Type
|
||||
Recall that calling the `listStaff` 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 `listStaff` Query is of type `ListStaffData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
```javascript
|
||||
export interface ListStaffData {
|
||||
staffs: ({
|
||||
id: UUIDString;
|
||||
employeeName: string;
|
||||
vendorId?: UUIDString | null;
|
||||
email?: string | null;
|
||||
position?: string | null;
|
||||
employmentType: EmploymentType;
|
||||
rating?: number | null;
|
||||
reliabilityScore?: number | null;
|
||||
backgroundCheckStatus: BackgroundCheckStatus;
|
||||
certifications?: string | null;
|
||||
} & Staff_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 `listStaff`'s Query hook function
|
||||
|
||||
```javascript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig } from '@dataconnect/generated';
|
||||
import { useListStaff } from '@dataconnect/generated/react'
|
||||
|
||||
export default function ListStaffComponent() {
|
||||
// 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 = useListStaff();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the Query hook function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const query = useListStaff(dataConnect);
|
||||
|
||||
// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
|
||||
const options = { staleTime: 5 * 1000 };
|
||||
const query = useListStaff(options);
|
||||
|
||||
// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const options = { staleTime: 5 * 1000 };
|
||||
const query = useListStaff(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.staffs);
|
||||
}
|
||||
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.
|
||||
@@ -522,3 +602,109 @@ export default function CreateStaffComponent() {
|
||||
}
|
||||
```
|
||||
|
||||
## CreateVendor
|
||||
You can execute the `CreateVendor` 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
|
||||
useCreateVendor(options?: useDataConnectMutationOptions<CreateVendorData, FirebaseError, CreateVendorVariables>): UseDataConnectMutationResult<CreateVendorData, CreateVendorVariables>;
|
||||
```
|
||||
You can also pass in a `DataConnect` instance to the Mutation hook function.
|
||||
```javascript
|
||||
useCreateVendor(dc: DataConnect, options?: useDataConnectMutationOptions<CreateVendorData, FirebaseError, CreateVendorVariables>): UseDataConnectMutationResult<CreateVendorData, CreateVendorVariables>;
|
||||
```
|
||||
|
||||
### Variables
|
||||
The `CreateVendor` Mutation requires an argument of type `CreateVendorVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
|
||||
```javascript
|
||||
export interface CreateVendorVariables {
|
||||
vendorNumber: string;
|
||||
legalName: string;
|
||||
region: VendorRegion;
|
||||
platformType: VendorPlatformType;
|
||||
primaryContactEmail: string;
|
||||
approvalStatus: VendorApprovalStatus;
|
||||
isActive?: boolean | null;
|
||||
}
|
||||
```
|
||||
### Return Type
|
||||
Recall that calling the `CreateVendor` 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 `CreateVendor` Mutation is of type `CreateVendorData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
|
||||
```javascript
|
||||
export interface CreateVendorData {
|
||||
vendor_insert: Vendor_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 `CreateVendor`'s Mutation hook function
|
||||
|
||||
```javascript
|
||||
import { getDataConnect } from 'firebase/data-connect';
|
||||
import { connectorConfig, CreateVendorVariables } from '@dataconnect/generated';
|
||||
import { useCreateVendor } from '@dataconnect/generated/react'
|
||||
|
||||
export default function CreateVendorComponent() {
|
||||
// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
|
||||
const mutation = useCreateVendor();
|
||||
|
||||
// You can also pass in a `DataConnect` instance to the Mutation hook function.
|
||||
const dataConnect = getDataConnect(connectorConfig);
|
||||
const mutation = useCreateVendor(dataConnect);
|
||||
|
||||
// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
|
||||
const options = {
|
||||
onSuccess: () => { console.log('Mutation succeeded!'); }
|
||||
};
|
||||
const mutation = useCreateVendor(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 = useCreateVendor(dataConnect, options);
|
||||
|
||||
// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
|
||||
// The `useCreateVendor` Mutation requires an argument of type `CreateVendorVariables`:
|
||||
const createVendorVars: CreateVendorVariables = {
|
||||
vendorNumber: ...,
|
||||
legalName: ...,
|
||||
region: ...,
|
||||
platformType: ...,
|
||||
primaryContactEmail: ...,
|
||||
approvalStatus: ...,
|
||||
isActive: ..., // optional
|
||||
};
|
||||
mutation.mutate(createVendorVars);
|
||||
// Variables can be defined inline as well.
|
||||
mutation.mutate({ 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(createVendorVars, 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_insert);
|
||||
}
|
||||
return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { listStaffRef, createEventRef, listEventsRef, createStaffRef, connectorConfig } from '../../esm/index.esm.js';
|
||||
import { listVendorRef, createEventRef, listEventsRef, createStaffRef, listStaffRef, createVendorRef, 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 useListStaff(dcOrOptions, options) {
|
||||
export function useListVendor(dcOrOptions, options) {
|
||||
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
|
||||
const ref = listStaffRef(dcInstance);
|
||||
const ref = listVendorRef(dcInstance);
|
||||
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
export function useCreateEvent(dcOrOptions, options) {
|
||||
@@ -29,3 +29,17 @@ export function useCreateStaff(dcOrOptions, options) {
|
||||
}
|
||||
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
|
||||
|
||||
export function useListStaff(dcOrOptions, options) {
|
||||
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
|
||||
const ref = listStaffRef(dcInstance);
|
||||
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
export function useCreateVendor(dcOrOptions, options) {
|
||||
const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options);
|
||||
function refFactory(vars) {
|
||||
return createVendorRef(dcInstance, vars);
|
||||
}
|
||||
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
const { listStaffRef, createEventRef, listEventsRef, createStaffRef, connectorConfig } = require('../index.cjs.js');
|
||||
const { listVendorRef, createEventRef, listEventsRef, createStaffRef, listStaffRef, createVendorRef, connectorConfig } = require('../index.cjs.js');
|
||||
const { validateArgs, CallerSdkTypeEnum } = require('firebase/data-connect');
|
||||
const { useDataConnectQuery, useDataConnectMutation, validateReactArgs } = require('@tanstack-query-firebase/react/data-connect');
|
||||
|
||||
|
||||
exports.useListStaff = function useListStaff(dcOrOptions, options) {
|
||||
exports.useListVendor = function useListVendor(dcOrOptions, options) {
|
||||
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
|
||||
const ref = listStaffRef(dcInstance);
|
||||
const ref = listVendorRef(dcInstance);
|
||||
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) {
|
||||
@@ -29,3 +29,17 @@ exports.useCreateStaff = function useCreateStaff(dcOrOptions, options) {
|
||||
}
|
||||
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
|
||||
|
||||
exports.useListStaff = function useListStaff(dcOrOptions, options) {
|
||||
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
|
||||
const ref = listStaffRef(dcInstance);
|
||||
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
exports.useCreateVendor = function useCreateVendor(dcOrOptions, options) {
|
||||
const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options);
|
||||
function refFactory(vars) {
|
||||
return createVendorRef(dcInstance, vars);
|
||||
}
|
||||
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { ListStaffData, CreateEventData, CreateEventVariables, ListEventsData, CreateStaffData, CreateStaffVariables } from '../';
|
||||
import { ListVendorData, CreateEventData, CreateEventVariables, ListEventsData, CreateStaffData, CreateStaffVariables, ListStaffData, CreateVendorData, CreateVendorVariables } 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 useListStaff(options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
export function useListStaff(dc: DataConnect, options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
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>;
|
||||
@@ -16,3 +16,9 @@ export function useListEvents(dc: DataConnect, options?: useDataConnectQueryOpti
|
||||
|
||||
export function useCreateStaff(options?: useDataConnectMutationOptions<CreateStaffData, FirebaseError, CreateStaffVariables>): UseDataConnectMutationResult<CreateStaffData, CreateStaffVariables>;
|
||||
export function useCreateStaff(dc: DataConnect, options?: useDataConnectMutationOptions<CreateStaffData, FirebaseError, CreateStaffVariables>): UseDataConnectMutationResult<CreateStaffData, CreateStaffVariables>;
|
||||
|
||||
export function useListStaff(options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
export function useListStaff(dc: DataConnect, options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
|
||||
|
||||
export function useCreateVendor(options?: useDataConnectMutationOptions<CreateVendorData, FirebaseError, CreateVendorVariables>): UseDataConnectMutationResult<CreateVendorData, CreateVendorVariables>;
|
||||
export function useCreateVendor(dc: DataConnect, options?: useDataConnectMutationOptions<CreateVendorData, FirebaseError, CreateVendorVariables>): UseDataConnectMutationResult<CreateVendorData, CreateVendorVariables>;
|
||||
|
||||
Reference in New Issue
Block a user