new sdk for front with vendor entity

2025-11-24 12:16:40 -05:00
parent 93f17ce517
commit 0e0d5c647e
18 changed files with 1482 additions and 204 deletions
--- a/internal-api-harness/src/dataconnect-generated/react/README.md
+++ b/internal-api-harness/src/dataconnect-generated/react/README.md
@@ -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>;
+}
+```
+