new sdk of staffs to front
This commit is contained in:
José Salazar
@@ -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>;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user