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

new sdk for front with vendor entity

Browse Source
This commit is contained in:
José Salazar
2025-11-24 12:16:40 -05:00
parent 93f17ce517
commit 0e0d5c647e
18 changed files with 1482 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>;
}
```

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

@@ -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);
}

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

@@ -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);
}

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

@@ -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>;