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

new sdk of staffs to front

Browse Source
This commit is contained in:
José Salazar
2025-11-21 14:16:11 -05:00
parent 4ef479ef1c
commit 7e35a589fd
24 changed files with 2349 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
internal-api-harness/src/dataconnect-generated/.guides/usage.md
View File

@@ -12,12 +12,16 @@ 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 { useListEvents, useCreateEvent } from '@dataconnect/generated/react';
import { useListStaff, useCreateEvent, useListEvents, useCreateStaff } 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 } = useCreateEvent(createEventVars);
const { data, isPending, isSuccess, isError, error } = useListEvents();
const { data, isPending, isSuccess, isError, error } = useCreateEvent(createEventVars);
const { data, isPending, isSuccess, isError, error } = useCreateStaff(createStaffVars);
```
@@ -56,14 +60,20 @@ 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 { listEvents, createEvent } from '@dataconnect/generated';
import { listStaff, createEvent, listEvents, createStaff } from '@dataconnect/generated';
// Operation listEvents:
const { data } = await ListEvents(dataConnect);
// Operation listStaff:
const { data } = await ListStaff(dataConnect);
// Operation CreateEvent: For variables, look at type CreateEventVars in ../index.d.ts
const { data } = await CreateEvent(dataConnect, createEventVars);
// Operation listEvents:
const { data } = await ListEvents(dataConnect);
// Operation CreateStaff: For variables, look at type CreateStaffVars in ../index.d.ts
const { data } = await CreateStaff(dataConnect, createStaffVars);
```

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

@@ -10,9 +10,11 @@ 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)
- [*listEvents*](#listevents)
- [**Mutations**](#mutations)
- [*CreateEvent*](#createevent)
- [*CreateStaff*](#createstaff)
# 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).
@@ -59,6 +61,108 @@ 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):
```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);
});
```
## listEvents
You can execute the `listEvents` query using the following action shortcut function, or by calling `executeQuery()` after calling the following `QueryRef` function, both of which are defined in [dataconnect-generated/index.d.ts](./index.d.ts):
```typescript
@@ -315,3 +419,136 @@ executeMutation(ref).then((response) => {
});
```
## CreateStaff
You can execute the `CreateStaff` 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
createStaff(vars: CreateStaffVariables): MutationPromise<CreateStaffData, CreateStaffVariables>;
interface CreateStaffRef {
...
/* Allow users to create refs without passing in DataConnect */
(vars: CreateStaffVariables): MutationRef<CreateStaffData, CreateStaffVariables>;
}
export const createStaffRef: CreateStaffRef;
```
You can also pass in a `DataConnect` instance to the action shortcut function or `MutationRef` function.
```typescript
createStaff(dc: DataConnect, vars: CreateStaffVariables): MutationPromise<CreateStaffData, CreateStaffVariables>;
interface CreateStaffRef {
...
(dc: DataConnect, vars: CreateStaffVariables): MutationRef<CreateStaffData, CreateStaffVariables>;
}
export const createStaffRef: CreateStaffRef;
```
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 createStaffRef:
```typescript
const name = createStaffRef.operationName;
console.log(name);
```
### Variables
The `CreateStaff` mutation requires an argument of type `CreateStaffVariables`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields:
```typescript
export interface CreateStaffVariables {
employeeName: string;
vendorId?: UUIDString | null;
email?: string | null;
position?: string | null;
employmentType: EmploymentType;
rating?: number | null;
reliabilityScore?: number | null;
backgroundCheckStatus: BackgroundCheckStatus;
certifications?: string | null;
}
```
### Return Type
Recall that executing the `CreateStaff` mutation returns a `MutationPromise` that resolves to an object with a `data` property.
The `data` property is an object of type `CreateStaffData`, which is defined in [dataconnect-generated/index.d.ts](./index.d.ts). It has the following fields:
```typescript
export interface CreateStaffData {
staff_insert: Staff_Key;
}
```
### Using `CreateStaff`'s action shortcut function
```typescript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, createStaff, CreateStaffVariables } from '@dataconnect/generated';
// The `CreateStaff` mutation requires an argument of type `CreateStaffVariables`:
const createStaffVars: CreateStaffVariables = {
employeeName: ...,
vendorId: ..., // optional
email: ..., // optional
position: ..., // optional
employmentType: ...,
rating: ..., // optional
reliabilityScore: ..., // optional
backgroundCheckStatus: ...,
certifications: ..., // optional
};
// Call the `createStaff()` function to execute the mutation.
// You can use the `await` keyword to wait for the promise to resolve.
const { data } = await createStaff(createStaffVars);
// Variables can be defined inline as well.
const { data } = await createStaff({ employeeName: ..., vendorId: ..., email: ..., position: ..., employmentType: ..., rating: ..., reliabilityScore: ..., backgroundCheckStatus: ..., certifications: ..., });
// You can also pass in a `DataConnect` instance to the action shortcut function.
const dataConnect = getDataConnect(connectorConfig);
const { data } = await createStaff(dataConnect, createStaffVars);
console.log(data.staff_insert);
// Or, you can use the `Promise` API.
createStaff(createStaffVars).then((response) => {
const data = response.data;
console.log(data.staff_insert);
});
```
### Using `CreateStaff`'s `MutationRef` function
```typescript
import { getDataConnect, executeMutation } from 'firebase/data-connect';
import { connectorConfig, createStaffRef, CreateStaffVariables } from '@dataconnect/generated';
// The `CreateStaff` mutation requires an argument of type `CreateStaffVariables`:
const createStaffVars: CreateStaffVariables = {
employeeName: ...,
vendorId: ..., // optional
email: ..., // optional
position: ..., // optional
employmentType: ...,
rating: ..., // optional
reliabilityScore: ..., // optional
backgroundCheckStatus: ...,
certifications: ..., // optional
};
// Call the `createStaffRef()` function to get a reference to the mutation.
const ref = createStaffRef(createStaffVars);
// Variables can be defined inline as well.
const ref = createStaffRef({ employeeName: ..., vendorId: ..., email: ..., position: ..., employmentType: ..., rating: ..., reliabilityScore: ..., backgroundCheckStatus: ..., certifications: ..., });
// You can also pass in a `DataConnect` instance to the `MutationRef` function.
const dataConnect = getDataConnect(connectorConfig);
const ref = createStaffRef(dataConnect, createStaffVars);
// 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.staff_insert);
// Or, you can use the `Promise` API.
executeMutation(ref).then((response) => {
const data = response.data;
console.log(data.staff_insert);
});
```

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

@@ -1,5 +1,19 @@
import { queryRef, executeQuery, mutationRef, executeMutation, validateArgs } from 'firebase/data-connect';
export const BackgroundCheckStatus = {
PENDING: "PENDING",
CLEARED: "CLEARED",
FAILED: "FAILED",
EXPIRED: "EXPIRED",
}
export const EmploymentType = {
FULL_TIME: "FULL_TIME",
PART_TIME: "PART_TIME",
ON_CALL: "ON_CALL",
CONTRACT: "CONTRACT",
}
export const EventStatus = {
DRAFT: "DRAFT",
ACTIVE: "ACTIVE",
@@ -22,15 +36,15 @@ export const connectorConfig = {
location: 'us-central1'
};
export const listEventsRef = (dc) => {
export const listStaffRef = (dc) => {
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
dcInstance._useGeneratedSdk();
return queryRef(dcInstance, 'listEvents');
return queryRef(dcInstance, 'listStaff');
}
listEventsRef.operationName = 'listEvents';
listStaffRef.operationName = 'listStaff';
export function listEvents(dc) {
return executeQuery(listEventsRef(dc));
export function listStaff(dc) {
return executeQuery(listStaffRef(dc));
}
export const createEventRef = (dcOrVars, vars) => {
@@ -44,3 +58,25 @@ export function createEvent(dcOrVars, vars) {
return executeMutation(createEventRef(dcOrVars, vars));
}
export const listEventsRef = (dc) => {
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
dcInstance._useGeneratedSdk();
return queryRef(dcInstance, 'listEvents');
}
listEventsRef.operationName = 'listEvents';
export function listEvents(dc) {
return executeQuery(listEventsRef(dc));
}
export const createStaffRef = (dcOrVars, vars) => {
const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
dcInstance._useGeneratedSdk();
return mutationRef(dcInstance, 'CreateStaff', inputVars);
}
createStaffRef.operationName = 'CreateStaff';
export function createStaff(dcOrVars, vars) {
return executeMutation(createStaffRef(dcOrVars, vars));
}

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

@@ -1,5 +1,21 @@
const { queryRef, executeQuery, mutationRef, executeMutation, validateArgs } = require('firebase/data-connect');
const BackgroundCheckStatus = {
PENDING: "PENDING",
CLEARED: "CLEARED",
FAILED: "FAILED",
EXPIRED: "EXPIRED",
}
exports.BackgroundCheckStatus = BackgroundCheckStatus;
const EmploymentType = {
FULL_TIME: "FULL_TIME",
PART_TIME: "PART_TIME",
ON_CALL: "ON_CALL",
CONTRACT: "CONTRACT",
}
exports.EmploymentType = EmploymentType;
const EventStatus = {
DRAFT: "DRAFT",
ACTIVE: "ACTIVE",
@@ -25,16 +41,16 @@ const connectorConfig = {
};
exports.connectorConfig = connectorConfig;
const listEventsRef = (dc) => {
const listStaffRef = (dc) => {
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
dcInstance._useGeneratedSdk();
return queryRef(dcInstance, 'listEvents');
return queryRef(dcInstance, 'listStaff');
}
listEventsRef.operationName = 'listEvents';
exports.listEventsRef = listEventsRef;
listStaffRef.operationName = 'listStaff';
exports.listStaffRef = listStaffRef;
exports.listEvents = function listEvents(dc) {
return executeQuery(listEventsRef(dc));
exports.listStaff = function listStaff(dc) {
return executeQuery(listStaffRef(dc));
};
const createEventRef = (dcOrVars, vars) => {
@@ -48,3 +64,27 @@ exports.createEventRef = createEventRef;
exports.createEvent = function createEvent(dcOrVars, vars) {
return executeMutation(createEventRef(dcOrVars, vars));
};
const listEventsRef = (dc) => {
const { dc: dcInstance} = validateArgs(connectorConfig, dc, undefined);
dcInstance._useGeneratedSdk();
return queryRef(dcInstance, 'listEvents');
}
listEventsRef.operationName = 'listEvents';
exports.listEventsRef = listEventsRef;
exports.listEvents = function listEvents(dc) {
return executeQuery(listEventsRef(dc));
};
const createStaffRef = (dcOrVars, vars) => {
const { dc: dcInstance, vars: inputVars} = validateArgs(connectorConfig, dcOrVars, vars, true);
dcInstance._useGeneratedSdk();
return mutationRef(dcInstance, 'CreateStaff', inputVars);
}
createStaffRef.operationName = 'CreateStaff';
exports.createStaffRef = createStaffRef;
exports.createStaff = function createStaff(dcOrVars, vars) {
return executeMutation(createStaffRef(dcOrVars, vars));
};

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

@@ -8,6 +8,20 @@ export type Int64String = string;
export type DateString = string;
export enum BackgroundCheckStatus {
PENDING = "PENDING",
CLEARED = "CLEARED",
FAILED = "FAILED",
EXPIRED = "EXPIRED",
};
export enum EmploymentType {
FULL_TIME = "FULL_TIME",
PART_TIME = "PART_TIME",
ON_CALL = "ON_CALL",
CONTRACT = "CONTRACT",
};
export enum EventStatus {
DRAFT = "DRAFT",
ACTIVE = "ACTIVE",
@@ -44,6 +58,22 @@ export interface CreateEventVariables {
assignedStaff?: string | null;
}
export interface CreateStaffData {
staff_insert: Staff_Key;
}
export interface CreateStaffVariables {
employeeName: string;
vendorId?: UUIDString | null;
email?: string | null;
position?: string | null;
employmentType: EmploymentType;
rating?: number | null;
reliabilityScore?: number | null;
backgroundCheckStatus: BackgroundCheckStatus;
certifications?: string | null;
}
export interface Event_Key {
id: UUIDString;
__typename?: 'Event_Key';
@@ -64,17 +94,37 @@ export interface ListEventsData {
} & Event_Key)[];
}
interface ListEventsRef {
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)[];
}
export interface Staff_Key {
id: UUIDString;
__typename?: 'Staff_Key';
}
interface ListStaffRef {
/* Allow users to create refs without passing in DataConnect */
(): QueryRef<ListEventsData, undefined>;
(): QueryRef<ListStaffData, undefined>;
/* Allow users to pass in custom DataConnect instances */
(dc: DataConnect): QueryRef<ListEventsData, undefined>;
(dc: DataConnect): QueryRef<ListStaffData, undefined>;
operationName: string;
}
export const listEventsRef: ListEventsRef;
export const listStaffRef: ListStaffRef;
export function listEvents(): QueryPromise<ListEventsData, undefined>;
export function listEvents(dc: DataConnect): QueryPromise<ListEventsData, undefined>;
export function listStaff(): QueryPromise<ListStaffData, undefined>;
export function listStaff(dc: DataConnect): QueryPromise<ListStaffData, undefined>;
interface CreateEventRef {
/* Allow users to create refs without passing in DataConnect */
@@ -88,3 +138,27 @@ export const createEventRef: CreateEventRef;
export function createEvent(vars: CreateEventVariables): MutationPromise<CreateEventData, CreateEventVariables>;
export function createEvent(dc: DataConnect, vars: CreateEventVariables): MutationPromise<CreateEventData, CreateEventVariables>;
interface ListEventsRef {
/* Allow users to create refs without passing in DataConnect */
(): QueryRef<ListEventsData, undefined>;
/* Allow users to pass in custom DataConnect instances */
(dc: DataConnect): QueryRef<ListEventsData, undefined>;
operationName: string;
}
export const listEventsRef: ListEventsRef;
export function listEvents(): QueryPromise<ListEventsData, undefined>;
export function listEvents(dc: DataConnect): QueryPromise<ListEventsData, undefined>;
interface CreateStaffRef {
/* Allow users to create refs without passing in DataConnect */
(vars: CreateStaffVariables): MutationRef<CreateStaffData, CreateStaffVariables>;
/* Allow users to pass in custom DataConnect instances */
(dc: DataConnect, vars: CreateStaffVariables): MutationRef<CreateStaffData, CreateStaffVariables>;
operationName: string;
}
export const createStaffRef: CreateStaffRef;
export function createStaff(vars: CreateStaffVariables): MutationPromise<CreateStaffData, CreateStaffVariables>;
export function createStaff(dc: DataConnect, vars: CreateStaffVariables): MutationPromise<CreateStaffData, CreateStaffVariables>;

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

@@ -17,9 +17,11 @@ 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)
- [*listEvents*](#listevents)
- [**Mutations**](#mutations)
- [*CreateEvent*](#createevent)
- [*CreateStaff*](#createstaff)
# 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).
@@ -111,6 +113,86 @@ 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):
```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>;
}
```
## listEvents
You can execute the `listEvents` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
@@ -330,3 +412,113 @@ export default function CreateEventComponent() {
}
```
## CreateStaff
You can execute the `CreateStaff` Mutation using the `UseMutationResult` object returned by the following Mutation hook function (which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts)):
```javascript
useCreateStaff(options?: useDataConnectMutationOptions<CreateStaffData, FirebaseError, CreateStaffVariables>): UseDataConnectMutationResult<CreateStaffData, CreateStaffVariables>;
```
You can also pass in a `DataConnect` instance to the Mutation hook function.
```javascript
useCreateStaff(dc: DataConnect, options?: useDataConnectMutationOptions<CreateStaffData, FirebaseError, CreateStaffVariables>): UseDataConnectMutationResult<CreateStaffData, CreateStaffVariables>;
```
### Variables
The `CreateStaff` Mutation requires an argument of type `CreateStaffVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface CreateStaffVariables {
employeeName: string;
vendorId?: UUIDString | null;
email?: string | null;
position?: string | null;
employmentType: EmploymentType;
rating?: number | null;
reliabilityScore?: number | null;
backgroundCheckStatus: BackgroundCheckStatus;
certifications?: string | null;
}
```
### Return Type
Recall that calling the `CreateStaff` 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 `CreateStaff` Mutation is of type `CreateStaffData`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
```javascript
export interface CreateStaffData {
staff_insert: Staff_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 `CreateStaff`'s Mutation hook function
```javascript
import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, CreateStaffVariables } from '@dataconnect/generated';
import { useCreateStaff } from '@dataconnect/generated/react'
export default function CreateStaffComponent() {
// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
const mutation = useCreateStaff();
// You can also pass in a `DataConnect` instance to the Mutation hook function.
const dataConnect = getDataConnect(connectorConfig);
const mutation = useCreateStaff(dataConnect);
// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
const options = {
onSuccess: () => { console.log('Mutation succeeded!'); }
};
const mutation = useCreateStaff(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 = useCreateStaff(dataConnect, options);
// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
// The `useCreateStaff` Mutation requires an argument of type `CreateStaffVariables`:
const createStaffVars: CreateStaffVariables = {
employeeName: ...,
vendorId: ..., // optional
email: ..., // optional
position: ..., // optional
employmentType: ...,
rating: ..., // optional
reliabilityScore: ..., // optional
backgroundCheckStatus: ...,
certifications: ..., // optional
};
mutation.mutate(createStaffVars);
// Variables can be defined inline as well.
mutation.mutate({ employeeName: ..., vendorId: ..., email: ..., position: ..., employmentType: ..., rating: ..., reliabilityScore: ..., backgroundCheckStatus: ..., certifications: ..., });
// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
const options = {
onSuccess: () => { console.log('Mutation succeeded!'); }
};
mutation.mutate(createStaffVars, 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.staff_insert);
}
return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}
```

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

@@ -1,11 +1,11 @@
import { listEventsRef, createEventRef, connectorConfig } from '../../esm/index.esm.js';
import { listStaffRef, createEventRef, listEventsRef, createStaffRef, connectorConfig } from '../../esm/index.esm.js';
import { validateArgs, CallerSdkTypeEnum } from 'firebase/data-connect';
import { useDataConnectQuery, useDataConnectMutation, validateReactArgs } from '@tanstack-query-firebase/react/data-connect';
export function useListEvents(dcOrOptions, options) {
export function useListStaff(dcOrOptions, options) {
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
const ref = listEventsRef(dcInstance);
const ref = listStaffRef(dcInstance);
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
export function useCreateEvent(dcOrOptions, options) {
@@ -15,3 +15,17 @@ export function useCreateEvent(dcOrOptions, options) {
}
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
export function useListEvents(dcOrOptions, options) {
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
const ref = listEventsRef(dcInstance);
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
export function useCreateStaff(dcOrOptions, options) {
const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options);
function refFactory(vars) {
return createStaffRef(dcInstance, vars);
}
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}

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

@@ -1,11 +1,11 @@
const { listEventsRef, createEventRef, connectorConfig } = require('../index.cjs.js');
const { listStaffRef, createEventRef, listEventsRef, createStaffRef, connectorConfig } = require('../index.cjs.js');
const { validateArgs, CallerSdkTypeEnum } = require('firebase/data-connect');
const { useDataConnectQuery, useDataConnectMutation, validateReactArgs } = require('@tanstack-query-firebase/react/data-connect');
exports.useListEvents = function useListEvents(dcOrOptions, options) {
exports.useListStaff = function useListStaff(dcOrOptions, options) {
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
const ref = listEventsRef(dcInstance);
const ref = listStaffRef(dcInstance);
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) {
@@ -15,3 +15,17 @@ exports.useCreateEvent = function useCreateEvent(dcOrOptions, options) {
}
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
exports.useListEvents = function useListEvents(dcOrOptions, options) {
const { dc: dcInstance, options: inputOpts } = validateReactArgs(connectorConfig, dcOrOptions, options);
const ref = listEventsRef(dcInstance);
return useDataConnectQuery(ref, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}
exports.useCreateStaff = function useCreateStaff(dcOrOptions, options) {
const { dc: dcInstance, vars: inputOpts } = validateArgs(connectorConfig, dcOrOptions, options);
function refFactory(vars) {
return createStaffRef(dcInstance, vars);
}
return useDataConnectMutation(refFactory, inputOpts, CallerSdkTypeEnum.GeneratedReact);
}

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

@@ -1,12 +1,18 @@
import { ListEventsData, CreateEventData, CreateEventVariables } from '../';
import { ListStaffData, CreateEventData, CreateEventVariables, ListEventsData, CreateStaffData, CreateStaffVariables } 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 useListEvents(options?: useDataConnectQueryOptions<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;
export function useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;
export function useListStaff(options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
export function useListStaff(dc: DataConnect, options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;
export function useCreateEvent(options?: useDataConnectMutationOptions<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;
export function useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;
export function useListEvents(options?: useDataConnectQueryOptions<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;
export function useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;
export function useCreateStaff(options?: useDataConnectMutationOptions<CreateStaffData, FirebaseError, CreateStaffVariables>): UseDataConnectMutationResult<CreateStaffData, CreateStaffVariables>;
export function useCreateStaff(dc: DataConnect, options?: useDataConnectMutationOptions<CreateStaffData, FirebaseError, CreateStaffVariables>): UseDataConnectMutationResult<CreateStaffData, CreateStaffVariables>;