This README will guide you through the process of using the generated React SDK package for the connector krow-connector. It will also provide examples on how to use your generated SDK to call your Data Connect queries and mutations.

If you're looking for the JavaScript README, you can find it at dataconnect-generated/README.md

NOTE: This README is generated alongside the generated SDK. If you make changes to this file, they will be overwritten when the SDK is regenerated.

You can use this generated SDK by importing from the package @dataconnect/generated/react as shown below. Both CommonJS and ESM imports are supported.

You can also follow the instructions from the Data Connect documentation.

Overview
TanStack Query Firebase & TanStack React Query
- Package Installation
- Configuring TanStack Query
Accessing the connector
- Connecting to the local Emulator
Queries
Mutations

TanStack Query Firebase & TanStack React Query

This SDK provides React hooks generated specific to your application, for the operations found in the connector krow-connector. These hooks are generated using TanStack Query Firebase by our partners at Invertase, a library built on top of TanStack React Query v5.

You do not need to be familiar with Tanstack Query or Tanstack Query Firebase to use this SDK. However, you may find it useful to learn more about them, as they will empower you as a user of this Generated React SDK.

Installing TanStack Query Firebase and TanStack React Query Packages

In order to use the React generated SDK, you must install the TanStack React Query and TanStack Query Firebase packages.

npm i --save @tanstack/react-query @tanstack-query-firebase/react

npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0

You can also follow the installation instructions from the Data Connect documentation, or the TanStack Query Firebase documentation and TanStack React Query documentation.

Configuring TanStack Query

In order to use the React generated SDK in your application, you must wrap your application's component tree in a QueryClientProvider component from TanStack React Query. None of your generated React SDK hooks will work without this provider.

import { QueryClientProvider } from '@tanstack/react-query';

// Create a TanStack Query client instance
const queryClient = new QueryClient()

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <MyApplication />
    </QueryClientProvider>
  )
}

To learn more about QueryClientProvider, see the TanStack React Query documentation and the TanStack Query Firebase documentation.

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.

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

const dataConnect = getDataConnect(connectorConfig);

Connecting to the local Emulator

By default, the connector will connect to the production service.

To connect to the emulator, you can use the following code. You can also follow the emulator instructions from the Data Connect documentation.

import { connectDataConnectEmulator, getDataConnect } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

After it's initialized, you can call your Data Connect queries and mutations using the hooks provided from your generated React SDK.

Queries

The React generated SDK provides Query hook functions that call and return useDataConnectQuery hooks from TanStack Query Firebase.

Calling these hook functions will return a UseQueryResult object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and the most recent data returned by the Query, among other things. To learn more about these hooks and how to use them, see the TanStack Query Firebase documentation.

TanStack React Query caches the results of your Queries, so using the same Query hook function in multiple places in your application allows the entire application to automatically see updates to that Query's data.

Query hooks execute their Queries automatically when called, and periodically refresh, unless you change the queryOptions for the Query. To learn how to stop a Query from automatically executing, including how to make a query "lazy", see the TanStack React Query documentation.

To learn more about TanStack React Query's Queries, see the TanStack React Query documentation.

Using Query Hooks

Here's a general overview of how to use the generated Query hooks in your code:

If the Query has no variables, the Query hook function does not require arguments.
If the Query has any required variables, the Query hook function will require at least one argument: an object that contains all the required variables for the Query.
If the Query has some required and some optional variables, only required variables are necessary in the variables argument object, and optional variables may be provided as well.
If all of the Query's variables are optional, the Query hook function does not require any arguments.
Query hook functions can be called with or without passing in a DataConnect instance as an argument. If no DataConnect argument is passed in, then the generated SDK will call getDataConnect(connectorConfig) behind the scenes for you.
Query hooks functions can be called with or without passing in an options argument of type useDataConnectQueryOptions. To learn more about the options argument, see the TanStack React Query documentation.
- Special case: If the Query has all optional variables and you would like to provide an options argument to the Query hook function without providing any variables, you must pass undefined where you would normally pass the Query's variables, and then may provide the options argument.

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.

listStaff

You can execute the listStaff Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useListStaff(dc: DataConnect, options?: useDataConnectQueryOptions<ListStaffData>): UseDataConnectQueryResult<ListStaffData, undefined>;

You can also pass in a DataConnect instance to the Query hook function.

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. It has the following fields:

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.

Using `listStaff`'s Query hook function

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:

useListEvents(dc: DataConnect, options?: useDataConnectQueryOptions<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;

You can also pass in a DataConnect instance to the Query hook function.

useListEvents(options?: useDataConnectQueryOptions<ListEventsData>): UseDataConnectQueryResult<ListEventsData, undefined>;

Variables

The listEvents Query has no variables.

Return Type

Recall that calling the listEvents 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 access the data returned by a Query, use the UseQueryResult.data field. The data for the listEvents Query is of type ListEventsData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface ListEventsData {
  events: ({
    id: UUIDString;
    eventName: string;
    status: EventStatus;
    date: TimestampString;
    isRapid?: boolean | null;
    isRecurring?: boolean | null;
    isMultiDay?: boolean | null;
    recurrenceType?: RecurrenceType | null;
    recurrenceStartDate?: TimestampString | null;
    recurrenceEndDate?: TimestampString | null;
    scatterDates?: string | null;
    multiDayStartDate?: TimestampString | null;
    multiDayEndDate?: TimestampString | null;
    bufferTimeBefore?: number | null;
    bufferTimeAfter?: number | null;
    conflictDetectionEnabled?: boolean | null;
    detectedConflicts?: string | null;
    businessId: UUIDString;
    businessName?: string | null;
    vendorId?: UUIDString | null;
    vendorName?: string | null;
    hub?: string | null;
    eventLocation?: string | null;
    contractType?: ContractType | null;
    poReference?: string | null;
    shifts?: string | null;
    addons?: string | null;
    total?: number | null;
    clientName?: string | null;
    clientEmail?: string | null;
    clientPhone?: string | null;
    invoiceId?: UUIDString | null;
    notes?: string | null;
    requested?: number | null;
    assignedStaff?: string | null;
  } & Event_Key)[];
}

To learn more about the UseQueryResult object, see the TanStack React Query documentation.

Using `listEvents`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';
import { useListEvents } from '@dataconnect/generated/react'

export default function ListEventsComponent() {
  // 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 = useListEvents();

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useListEvents(dataConnect);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  const query = useListEvents(options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useListEvents(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.events);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

getEventById

You can execute the getEventById Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useGetEventById(dc: DataConnect, vars: GetEventByIdVariables, options?: useDataConnectQueryOptions<GetEventByIdData>): UseDataConnectQueryResult<GetEventByIdData, GetEventByIdVariables>;

You can also pass in a DataConnect instance to the Query hook function.

useGetEventById(vars: GetEventByIdVariables, options?: useDataConnectQueryOptions<GetEventByIdData>): UseDataConnectQueryResult<GetEventByIdData, GetEventByIdVariables>;

Variables

The getEventById Query requires an argument of type GetEventByIdVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface GetEventByIdVariables {
  id: UUIDString;
}

Return Type

Recall that calling the getEventById 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 access the data returned by a Query, use the UseQueryResult.data field. The data for the getEventById Query is of type GetEventByIdData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface GetEventByIdData {
  event?: {
    id: UUIDString;
    eventName: string;
    status: EventStatus;
    date: TimestampString;
    isRapid?: boolean | null;
    isRecurring?: boolean | null;
    isMultiDay?: boolean | null;
    recurrenceType?: RecurrenceType | null;
    recurrenceStartDate?: TimestampString | null;
    recurrenceEndDate?: TimestampString | null;
    scatterDates?: string | null;
    multiDayStartDate?: TimestampString | null;
    multiDayEndDate?: TimestampString | null;
    bufferTimeBefore?: number | null;
    bufferTimeAfter?: number | null;
    conflictDetectionEnabled?: boolean | null;
    detectedConflicts?: string | null;
    businessId: UUIDString;
    businessName?: string | null;
    vendorId?: UUIDString | null;
    vendorName?: string | null;
    hub?: string | null;
    eventLocation?: string | null;
    contractType?: ContractType | null;
    poReference?: string | null;
    shifts?: string | null;
    addons?: string | null;
    total?: number | null;
    clientName?: string | null;
    clientEmail?: string | null;
    clientPhone?: string | null;
    invoiceId?: UUIDString | null;
    notes?: string | null;
    requested?: number | null;
    assignedStaff?: string | null;
  } & Event_Key;
}

To learn more about the UseQueryResult object, see the TanStack React Query documentation.

Using `getEventById`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, GetEventByIdVariables } from '@dataconnect/generated';
import { useGetEventById } from '@dataconnect/generated/react'

export default function GetEventByIdComponent() {
  // The `useGetEventById` Query hook requires an argument of type `GetEventByIdVariables`:
  const getEventByIdVars: GetEventByIdVariables = {
    id: ..., 
  };

  // 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 = useGetEventById(getEventByIdVars);
  // Variables can be defined inline as well.
  const query = useGetEventById({ id: ..., });

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useGetEventById(dataConnect, getEventByIdVars);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  const query = useGetEventById(getEventByIdVars, options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useGetEventById(dataConnect, getEventByIdVars, 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.event);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

filterEvents

You can execute the filterEvents Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useFilterEvents(dc: DataConnect, vars?: FilterEventsVariables, options?: useDataConnectQueryOptions<FilterEventsData>): UseDataConnectQueryResult<FilterEventsData, FilterEventsVariables>;

You can also pass in a DataConnect instance to the Query hook function.

useFilterEvents(vars?: FilterEventsVariables, options?: useDataConnectQueryOptions<FilterEventsData>): UseDataConnectQueryResult<FilterEventsData, FilterEventsVariables>;

Variables

The filterEvents Query has an optional argument of type FilterEventsVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface FilterEventsVariables {
  status?: EventStatus | null;
  businessId?: UUIDString | null;
  vendorId?: UUIDString | null;
  isRecurring?: boolean | null;
  isRapid?: boolean | null;
  isMultiDay?: boolean | null;
  recurrenceType?: RecurrenceType | null;
  date?: TimestampString | null;
  hub?: string | null;
  eventLocation?: string | null;
  contractType?: ContractType | null;
  clientEmail?: string | null;
}

Return Type

Recall that calling the filterEvents 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 access the data returned by a Query, use the UseQueryResult.data field. The data for the filterEvents Query is of type FilterEventsData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface FilterEventsData {
  events: ({
    id: UUIDString;
    eventName: string;
    status: EventStatus;
    date: TimestampString;
    isRapid?: boolean | null;
    isRecurring?: boolean | null;
    isMultiDay?: boolean | null;
    recurrenceType?: RecurrenceType | null;
    recurrenceStartDate?: TimestampString | null;
    recurrenceEndDate?: TimestampString | null;
    scatterDates?: string | null;
    multiDayStartDate?: TimestampString | null;
    multiDayEndDate?: TimestampString | null;
    bufferTimeBefore?: number | null;
    bufferTimeAfter?: number | null;
    conflictDetectionEnabled?: boolean | null;
    detectedConflicts?: string | null;
    businessId: UUIDString;
    businessName?: string | null;
    vendorId?: UUIDString | null;
    vendorName?: string | null;
    hub?: string | null;
    eventLocation?: string | null;
    contractType?: ContractType | null;
    poReference?: string | null;
    shifts?: string | null;
    addons?: string | null;
    total?: number | null;
    clientName?: string | null;
    clientEmail?: string | null;
    clientPhone?: string | null;
    invoiceId?: UUIDString | null;
    notes?: string | null;
    requested?: number | null;
    assignedStaff?: string | null;
  } & Event_Key)[];
}

To learn more about the UseQueryResult object, see the TanStack React Query documentation.

Using `filterEvents`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, FilterEventsVariables } from '@dataconnect/generated';
import { useFilterEvents } from '@dataconnect/generated/react'

export default function FilterEventsComponent() {
  // The `useFilterEvents` Query hook has an optional argument of type `FilterEventsVariables`:
  const filterEventsVars: FilterEventsVariables = {
    status: ..., // optional
    businessId: ..., // optional
    vendorId: ..., // optional
    isRecurring: ..., // optional
    isRapid: ..., // optional
    isMultiDay: ..., // optional
    recurrenceType: ..., // optional
    date: ..., // optional
    hub: ..., // optional
    eventLocation: ..., // optional
    contractType: ..., // optional
    clientEmail: ..., // optional
  };

  // 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 = useFilterEvents(filterEventsVars);
  // Variables can be defined inline as well.
  const query = useFilterEvents({ status: ..., businessId: ..., vendorId: ..., isRecurring: ..., isRapid: ..., isMultiDay: ..., recurrenceType: ..., date: ..., hub: ..., eventLocation: ..., contractType: ..., clientEmail: ..., });
  // Since all variables are optional for this Query, you can omit the `FilterEventsVariables` argument.
  // (as long as you don't want to provide any `options`!)
  const query = useFilterEvents();

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useFilterEvents(dataConnect, filterEventsVars);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  const query = useFilterEvents(filterEventsVars, options);
  // If you'd like to provide options without providing any variables, you must
  // pass `undefined` where you would normally pass the variables.
  const query = useFilterEvents(undefined, options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useFilterEvents(dataConnect, filterEventsVars /** or undefined */, 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.events);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

listVendor

You can execute the listVendor Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useListVendor(dc: DataConnect, options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;

You can also pass in a DataConnect instance to the Query hook function.

useListVendor(options?: useDataConnectQueryOptions<ListVendorData>): UseDataConnectQueryResult<ListVendorData, undefined>;

Variables

The listVendor Query has no variables.

Return Type

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 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. It has the following fields:

export interface ListVendorData {
  vendors: ({
    id: UUIDString;
    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.

Using `listVendor`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';
import { useListVendor } from '@dataconnect/generated/react'

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 = useListVendor();

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useListVendor(dataConnect);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  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 = useListVendor(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.vendors);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

getVendorById

You can execute the getVendorById Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useGetVendorById(dc: DataConnect, vars: GetVendorByIdVariables, options?: useDataConnectQueryOptions<GetVendorByIdData>): UseDataConnectQueryResult<GetVendorByIdData, GetVendorByIdVariables>;

You can also pass in a DataConnect instance to the Query hook function.

useGetVendorById(vars: GetVendorByIdVariables, options?: useDataConnectQueryOptions<GetVendorByIdData>): UseDataConnectQueryResult<GetVendorByIdData, GetVendorByIdVariables>;

Variables

The getVendorById Query requires an argument of type GetVendorByIdVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface GetVendorByIdVariables {
  id: UUIDString;
}

Return Type

Recall that calling the getVendorById 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 access the data returned by a Query, use the UseQueryResult.data field. The data for the getVendorById Query is of type GetVendorByIdData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface GetVendorByIdData {
  vendor?: {
    id: UUIDString;
    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.

Using `getVendorById`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, GetVendorByIdVariables } from '@dataconnect/generated';
import { useGetVendorById } from '@dataconnect/generated/react'

export default function GetVendorByIdComponent() {
  // The `useGetVendorById` Query hook requires an argument of type `GetVendorByIdVariables`:
  const getVendorByIdVars: GetVendorByIdVariables = {
    id: ..., 
  };

  // 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 = useGetVendorById(getVendorByIdVars);
  // Variables can be defined inline as well.
  const query = useGetVendorById({ id: ..., });

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useGetVendorById(dataConnect, getVendorByIdVars);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  const query = useGetVendorById(getVendorByIdVars, options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useGetVendorById(dataConnect, getVendorByIdVars, 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.vendor);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

filterVendors

You can execute the filterVendors Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useFilterVendors(dc: DataConnect, vars?: FilterVendorsVariables, options?: useDataConnectQueryOptions<FilterVendorsData>): UseDataConnectQueryResult<FilterVendorsData, FilterVendorsVariables>;

You can also pass in a DataConnect instance to the Query hook function.

useFilterVendors(vars?: FilterVendorsVariables, options?: useDataConnectQueryOptions<FilterVendorsData>): UseDataConnectQueryResult<FilterVendorsData, FilterVendorsVariables>;

Variables

The filterVendors Query has an optional argument of type FilterVendorsVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface FilterVendorsVariables {
  region?: VendorRegion | null;
  approvalStatus?: VendorApprovalStatus | null;
  isActive?: boolean | null;
  vendorNumber?: string | null;
  primaryContactEmail?: string | null;
  legalName?: string | null;
  platformType?: VendorPlatformType | null;
}

Return Type

Recall that calling the filterVendors 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 access the data returned by a Query, use the UseQueryResult.data field. The data for the filterVendors Query is of type FilterVendorsData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface FilterVendorsData {
  vendors: ({
    id: UUIDString;
    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.

Using `filterVendors`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, FilterVendorsVariables } from '@dataconnect/generated';
import { useFilterVendors } from '@dataconnect/generated/react'

export default function FilterVendorsComponent() {
  // The `useFilterVendors` Query hook has an optional argument of type `FilterVendorsVariables`:
  const filterVendorsVars: FilterVendorsVariables = {
    region: ..., // optional
    approvalStatus: ..., // optional
    isActive: ..., // optional
    vendorNumber: ..., // optional
    primaryContactEmail: ..., // optional
    legalName: ..., // optional
    platformType: ..., // optional
  };

  // 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 = useFilterVendors(filterVendorsVars);
  // Variables can be defined inline as well.
  const query = useFilterVendors({ region: ..., approvalStatus: ..., isActive: ..., vendorNumber: ..., primaryContactEmail: ..., legalName: ..., platformType: ..., });
  // Since all variables are optional for this Query, you can omit the `FilterVendorsVariables` argument.
  // (as long as you don't want to provide any `options`!)
  const query = useFilterVendors();

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useFilterVendors(dataConnect, filterVendorsVars);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  const query = useFilterVendors(filterVendorsVars, options);
  // If you'd like to provide options without providing any variables, you must
  // pass `undefined` where you would normally pass the variables.
  const query = useFilterVendors(undefined, options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useFilterVendors(dataConnect, filterVendorsVars /** or undefined */, 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.vendors);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

listVendorDefaultSettings

You can execute the listVendorDefaultSettings Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useListVendorDefaultSettings(dc: DataConnect, options?: useDataConnectQueryOptions<ListVendorDefaultSettingsData>): UseDataConnectQueryResult<ListVendorDefaultSettingsData, undefined>;

You can also pass in a DataConnect instance to the Query hook function.

useListVendorDefaultSettings(options?: useDataConnectQueryOptions<ListVendorDefaultSettingsData>): UseDataConnectQueryResult<ListVendorDefaultSettingsData, undefined>;

Variables

The listVendorDefaultSettings Query has no variables.

Return Type

Recall that calling the listVendorDefaultSettings 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 access the data returned by a Query, use the UseQueryResult.data field. The data for the listVendorDefaultSettings Query is of type ListVendorDefaultSettingsData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface ListVendorDefaultSettingsData {
  vendorDefaultSettings: ({
    id: UUIDString;
    vendorName: string;
    defaultMarkupPercentage: number;
    defaultVendorFeePercentage: number;
  } & VendorDefaultSetting_Key)[];
}

To learn more about the UseQueryResult object, see the TanStack React Query documentation.

Using `listVendorDefaultSettings`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';
import { useListVendorDefaultSettings } from '@dataconnect/generated/react'

export default function ListVendorDefaultSettingsComponent() {
  // 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 = useListVendorDefaultSettings();

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useListVendorDefaultSettings(dataConnect);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  const query = useListVendorDefaultSettings(options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useListVendorDefaultSettings(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.vendorDefaultSettings);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

getVendorDefaultSettingById

You can execute the getVendorDefaultSettingById Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useGetVendorDefaultSettingById(dc: DataConnect, vars: GetVendorDefaultSettingByIdVariables, options?: useDataConnectQueryOptions<GetVendorDefaultSettingByIdData>): UseDataConnectQueryResult<GetVendorDefaultSettingByIdData, GetVendorDefaultSettingByIdVariables>;

You can also pass in a DataConnect instance to the Query hook function.

useGetVendorDefaultSettingById(vars: GetVendorDefaultSettingByIdVariables, options?: useDataConnectQueryOptions<GetVendorDefaultSettingByIdData>): UseDataConnectQueryResult<GetVendorDefaultSettingByIdData, GetVendorDefaultSettingByIdVariables>;

Variables

The getVendorDefaultSettingById Query requires an argument of type GetVendorDefaultSettingByIdVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface GetVendorDefaultSettingByIdVariables {
  id: UUIDString;
}

Return Type

Recall that calling the getVendorDefaultSettingById 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 access the data returned by a Query, use the UseQueryResult.data field. The data for the getVendorDefaultSettingById Query is of type GetVendorDefaultSettingByIdData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface GetVendorDefaultSettingByIdData {
  vendorDefaultSetting?: {
    id: UUIDString;
    vendorName: string;
    defaultMarkupPercentage: number;
    defaultVendorFeePercentage: number;
  } & VendorDefaultSetting_Key;
}

To learn more about the UseQueryResult object, see the TanStack React Query documentation.

Using `getVendorDefaultSettingById`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, GetVendorDefaultSettingByIdVariables } from '@dataconnect/generated';
import { useGetVendorDefaultSettingById } from '@dataconnect/generated/react'

export default function GetVendorDefaultSettingByIdComponent() {
  // The `useGetVendorDefaultSettingById` Query hook requires an argument of type `GetVendorDefaultSettingByIdVariables`:
  const getVendorDefaultSettingByIdVars: GetVendorDefaultSettingByIdVariables = {
    id: ..., 
  };

  // 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 = useGetVendorDefaultSettingById(getVendorDefaultSettingByIdVars);
  // Variables can be defined inline as well.
  const query = useGetVendorDefaultSettingById({ id: ..., });

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useGetVendorDefaultSettingById(dataConnect, getVendorDefaultSettingByIdVars);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  const query = useGetVendorDefaultSettingById(getVendorDefaultSettingByIdVars, options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useGetVendorDefaultSettingById(dataConnect, getVendorDefaultSettingByIdVars, 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.vendorDefaultSetting);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

filterVendorDefaultSettings

You can execute the filterVendorDefaultSettings Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useFilterVendorDefaultSettings(dc: DataConnect, vars?: FilterVendorDefaultSettingsVariables, options?: useDataConnectQueryOptions<FilterVendorDefaultSettingsData>): UseDataConnectQueryResult<FilterVendorDefaultSettingsData, FilterVendorDefaultSettingsVariables>;

You can also pass in a DataConnect instance to the Query hook function.

useFilterVendorDefaultSettings(vars?: FilterVendorDefaultSettingsVariables, options?: useDataConnectQueryOptions<FilterVendorDefaultSettingsData>): UseDataConnectQueryResult<FilterVendorDefaultSettingsData, FilterVendorDefaultSettingsVariables>;

Variables

The filterVendorDefaultSettings Query has an optional argument of type FilterVendorDefaultSettingsVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface FilterVendorDefaultSettingsVariables {
  vendorName?: string | null;
  defaultMarkupPercentage?: number | null;
  defaultVendorFeePercentage?: number | null;
}

Return Type

Recall that calling the filterVendorDefaultSettings 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 access the data returned by a Query, use the UseQueryResult.data field. The data for the filterVendorDefaultSettings Query is of type FilterVendorDefaultSettingsData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface FilterVendorDefaultSettingsData {
  vendorDefaultSettings: ({
    id: UUIDString;
    vendorName: string;
    defaultMarkupPercentage: number;
    defaultVendorFeePercentage: number;
  } & VendorDefaultSetting_Key)[];
}

To learn more about the UseQueryResult object, see the TanStack React Query documentation.

Using `filterVendorDefaultSettings`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, FilterVendorDefaultSettingsVariables } from '@dataconnect/generated';
import { useFilterVendorDefaultSettings } from '@dataconnect/generated/react'

export default function FilterVendorDefaultSettingsComponent() {
  // The `useFilterVendorDefaultSettings` Query hook has an optional argument of type `FilterVendorDefaultSettingsVariables`:
  const filterVendorDefaultSettingsVars: FilterVendorDefaultSettingsVariables = {
    vendorName: ..., // optional
    defaultMarkupPercentage: ..., // optional
    defaultVendorFeePercentage: ..., // optional
  };

  // 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 = useFilterVendorDefaultSettings(filterVendorDefaultSettingsVars);
  // Variables can be defined inline as well.
  const query = useFilterVendorDefaultSettings({ vendorName: ..., defaultMarkupPercentage: ..., defaultVendorFeePercentage: ..., });
  // Since all variables are optional for this Query, you can omit the `FilterVendorDefaultSettingsVariables` argument.
  // (as long as you don't want to provide any `options`!)
  const query = useFilterVendorDefaultSettings();

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useFilterVendorDefaultSettings(dataConnect, filterVendorDefaultSettingsVars);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  const query = useFilterVendorDefaultSettings(filterVendorDefaultSettingsVars, options);
  // If you'd like to provide options without providing any variables, you must
  // pass `undefined` where you would normally pass the variables.
  const query = useFilterVendorDefaultSettings(undefined, options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useFilterVendorDefaultSettings(dataConnect, filterVendorDefaultSettingsVars /** or undefined */, 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.vendorDefaultSettings);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

listVendorRate

You can execute the listVendorRate Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useListVendorRate(dc: DataConnect, options?: useDataConnectQueryOptions<ListVendorRateData>): UseDataConnectQueryResult<ListVendorRateData, undefined>;

You can also pass in a DataConnect instance to the Query hook function.

useListVendorRate(options?: useDataConnectQueryOptions<ListVendorRateData>): UseDataConnectQueryResult<ListVendorRateData, undefined>;

Variables

The listVendorRate Query has no variables.

Return Type

Recall that calling the listVendorRate 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 access the data returned by a Query, use the UseQueryResult.data field. The data for the listVendorRate Query is of type ListVendorRateData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface ListVendorRateData {
  vendorRates: ({
    id: UUIDString;
    vendorName: string;
    category: VendorRateCategory;
    roleName: string;
    employeeWage: number;
    markupPercentage?: number | null;
    vendorFeePercentage?: number | null;
    clientRate: number;
  } & VendorRate_Key)[];
}

To learn more about the UseQueryResult object, see the TanStack React Query documentation.

Using `listVendorRate`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig } from '@dataconnect/generated';
import { useListVendorRate } from '@dataconnect/generated/react'

export default function ListVendorRateComponent() {
  // 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 = useListVendorRate();

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useListVendorRate(dataConnect);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  const query = useListVendorRate(options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useListVendorRate(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.vendorRates);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

getVendorRateById

You can execute the getVendorRateById Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useGetVendorRateById(dc: DataConnect, vars: GetVendorRateByIdVariables, options?: useDataConnectQueryOptions<GetVendorRateByIdData>): UseDataConnectQueryResult<GetVendorRateByIdData, GetVendorRateByIdVariables>;

You can also pass in a DataConnect instance to the Query hook function.

useGetVendorRateById(vars: GetVendorRateByIdVariables, options?: useDataConnectQueryOptions<GetVendorRateByIdData>): UseDataConnectQueryResult<GetVendorRateByIdData, GetVendorRateByIdVariables>;

Variables

The getVendorRateById Query requires an argument of type GetVendorRateByIdVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface GetVendorRateByIdVariables {
  id: UUIDString;
}

Return Type

Recall that calling the getVendorRateById 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 access the data returned by a Query, use the UseQueryResult.data field. The data for the getVendorRateById Query is of type GetVendorRateByIdData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface GetVendorRateByIdData {
  vendorRate?: {
    id: UUIDString;
    vendorName: string;
    category: VendorRateCategory;
    roleName: string;
    employeeWage: number;
    markupPercentage?: number | null;
    vendorFeePercentage?: number | null;
    clientRate: number;
    createdDate?: TimestampString | null;
    updatedDate?: TimestampString | null;
    createdBy?: string | null;
  } & VendorRate_Key;
}

To learn more about the UseQueryResult object, see the TanStack React Query documentation.

Using `getVendorRateById`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, GetVendorRateByIdVariables } from '@dataconnect/generated';
import { useGetVendorRateById } from '@dataconnect/generated/react'

export default function GetVendorRateByIdComponent() {
  // The `useGetVendorRateById` Query hook requires an argument of type `GetVendorRateByIdVariables`:
  const getVendorRateByIdVars: GetVendorRateByIdVariables = {
    id: ..., 
  };

  // 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 = useGetVendorRateById(getVendorRateByIdVars);
  // Variables can be defined inline as well.
  const query = useGetVendorRateById({ id: ..., });

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useGetVendorRateById(dataConnect, getVendorRateByIdVars);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  const query = useGetVendorRateById(getVendorRateByIdVars, options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useGetVendorRateById(dataConnect, getVendorRateByIdVars, 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.vendorRate);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

filterVendorRates

You can execute the filterVendorRates Query using the following Query hook function, which is defined in dataconnect-generated/react/index.d.ts:

useFilterVendorRates(dc: DataConnect, vars?: FilterVendorRatesVariables, options?: useDataConnectQueryOptions<FilterVendorRatesData>): UseDataConnectQueryResult<FilterVendorRatesData, FilterVendorRatesVariables>;

You can also pass in a DataConnect instance to the Query hook function.

useFilterVendorRates(vars?: FilterVendorRatesVariables, options?: useDataConnectQueryOptions<FilterVendorRatesData>): UseDataConnectQueryResult<FilterVendorRatesData, FilterVendorRatesVariables>;

Variables

The filterVendorRates Query has an optional argument of type FilterVendorRatesVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface FilterVendorRatesVariables {
  vendorName?: string | null;
  category?: VendorRateCategory | null;
  roleName?: string | null;
  minClientRate?: number | null;
  maxClientRate?: number | null;
}

Return Type

Recall that calling the filterVendorRates 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 access the data returned by a Query, use the UseQueryResult.data field. The data for the filterVendorRates Query is of type FilterVendorRatesData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface FilterVendorRatesData {
  vendorRates: ({
    id: UUIDString;
    vendorName: string;
    category: VendorRateCategory;
    roleName: string;
    employeeWage: number;
    markupPercentage?: number | null;
    vendorFeePercentage?: number | null;
    clientRate: number;
  } & VendorRate_Key)[];
}

To learn more about the UseQueryResult object, see the TanStack React Query documentation.

Using `filterVendorRates`'s Query hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, FilterVendorRatesVariables } from '@dataconnect/generated';
import { useFilterVendorRates } from '@dataconnect/generated/react'

export default function FilterVendorRatesComponent() {
  // The `useFilterVendorRates` Query hook has an optional argument of type `FilterVendorRatesVariables`:
  const filterVendorRatesVars: FilterVendorRatesVariables = {
    vendorName: ..., // optional
    category: ..., // optional
    roleName: ..., // optional
    minClientRate: ..., // optional
    maxClientRate: ..., // optional
  };

  // 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 = useFilterVendorRates(filterVendorRatesVars);
  // Variables can be defined inline as well.
  const query = useFilterVendorRates({ vendorName: ..., category: ..., roleName: ..., minClientRate: ..., maxClientRate: ..., });
  // Since all variables are optional for this Query, you can omit the `FilterVendorRatesVariables` argument.
  // (as long as you don't want to provide any `options`!)
  const query = useFilterVendorRates();

  // You can also pass in a `DataConnect` instance to the Query hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const query = useFilterVendorRates(dataConnect, filterVendorRatesVars);

  // You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
  const options = { staleTime: 5 * 1000 };
  const query = useFilterVendorRates(filterVendorRatesVars, options);
  // If you'd like to provide options without providing any variables, you must
  // pass `undefined` where you would normally pass the variables.
  const query = useFilterVendorRates(undefined, options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useFilterVendorRates(dataConnect, filterVendorRatesVars /** or undefined */, 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.vendorRates);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

Mutations

The React generated SDK provides Mutations hook functions that call and return useDataConnectMutation hooks from TanStack Query Firebase.

Calling these hook functions will return a UseMutationResult object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, and the most recent data returned by the Mutation, among other things. To learn more about these hooks and how to use them, see the TanStack Query Firebase documentation.

Mutation hooks do not execute their Mutations automatically when called. Rather, after calling the Mutation hook function and getting a UseMutationResult object, you must call the UseMutationResult.mutate() function to execute the Mutation.

To learn more about TanStack React Query's Mutations, see the TanStack React Query documentation.

Using Mutation Hooks

Here's a general overview of how to use the generated Mutation hooks in your code:

Mutation hook functions are not called with the arguments to the Mutation. Instead, arguments are passed to UseMutationResult.mutate().
If the Mutation has no variables, the mutate() function does not require arguments.
If the Mutation has any required variables, the mutate() function will require at least one argument: an object that contains all the required variables for the Mutation.
If the Mutation has some required and some optional variables, only required variables are necessary in the variables argument object, and optional variables may be provided as well.
If all of the Mutation's variables are optional, the Mutation hook function does not require any arguments.
Mutation hook functions can be called with or without passing in a DataConnect instance as an argument. If no DataConnect argument is passed in, then the generated SDK will call getDataConnect(connectorConfig) behind the scenes for you.
Mutation hooks also accept an options argument of type useDataConnectMutationOptions. To learn more about the options argument, see the TanStack React Query documentation.
- UseMutationResult.mutate() also accepts an options argument of type useDataConnectMutationOptions.
- Special case: If the Mutation has no arguments (or all optional arguments and you wish to provide none), and you want to pass options to UseMutationResult.mutate(), you must pass undefined where you would normally pass the Mutation's arguments, and then may provide the options argument.

Below are examples of how to use the krow-connector connector's generated Mutation hook functions to execute each Mutation. You can also follow the examples from the Data Connect documentation.

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):

useCreateVendor(options?: useDataConnectMutationOptions<CreateVendorData, FirebaseError, CreateVendorVariables>): UseDataConnectMutationResult<CreateVendorData, CreateVendorVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

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. It has the following fields:

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. It has the following fields:

export interface CreateVendorData {
  vendor_insert: Vendor_Key;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `CreateVendor`'s Mutation hook function

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

UpdateVendor

You can execute the UpdateVendor Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts):

useUpdateVendor(options?: useDataConnectMutationOptions<UpdateVendorData, FirebaseError, UpdateVendorVariables>): UseDataConnectMutationResult<UpdateVendorData, UpdateVendorVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

useUpdateVendor(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateVendorData, FirebaseError, UpdateVendorVariables>): UseDataConnectMutationResult<UpdateVendorData, UpdateVendorVariables>;

Variables

The UpdateVendor Mutation requires an argument of type UpdateVendorVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface UpdateVendorVariables {
  id: UUIDString;
  vendorNumber?: string | null;
  legalName?: string | null;
  region?: VendorRegion | null;
  platformType?: VendorPlatformType | null;
  primaryContactEmail?: string | null;
  approvalStatus?: VendorApprovalStatus | null;
  isActive?: boolean | null;
}

Return Type

Recall that calling the UpdateVendor 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 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 UpdateVendor Mutation is of type UpdateVendorData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface UpdateVendorData {
  vendor_update?: Vendor_Key | null;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `UpdateVendor`'s Mutation hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, UpdateVendorVariables } from '@dataconnect/generated';
import { useUpdateVendor } from '@dataconnect/generated/react'

export default function UpdateVendorComponent() {
  // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
  const mutation = useUpdateVendor();

  // You can also pass in a `DataConnect` instance to the Mutation hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const mutation = useUpdateVendor(dataConnect);

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useUpdateVendor(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 = useUpdateVendor(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useUpdateVendor` Mutation requires an argument of type `UpdateVendorVariables`:
  const updateVendorVars: UpdateVendorVariables = {
    id: ..., 
    vendorNumber: ..., // optional
    legalName: ..., // optional
    region: ..., // optional
    platformType: ..., // optional
    primaryContactEmail: ..., // optional
    approvalStatus: ..., // optional
    isActive: ..., // optional
  };
  mutation.mutate(updateVendorVars);
  // Variables can be defined inline as well.
  mutation.mutate({ id: ..., 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(updateVendorVars, 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_update);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

DeleteVendor

You can execute the DeleteVendor Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts):

useDeleteVendor(options?: useDataConnectMutationOptions<DeleteVendorData, FirebaseError, DeleteVendorVariables>): UseDataConnectMutationResult<DeleteVendorData, DeleteVendorVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

useDeleteVendor(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteVendorData, FirebaseError, DeleteVendorVariables>): UseDataConnectMutationResult<DeleteVendorData, DeleteVendorVariables>;

Variables

The DeleteVendor Mutation requires an argument of type DeleteVendorVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface DeleteVendorVariables {
  id: UUIDString;
}

Return Type

Recall that calling the DeleteVendor 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 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 DeleteVendor Mutation is of type DeleteVendorData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface DeleteVendorData {
  vendor_delete?: Vendor_Key | null;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `DeleteVendor`'s Mutation hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, DeleteVendorVariables } from '@dataconnect/generated';
import { useDeleteVendor } from '@dataconnect/generated/react'

export default function DeleteVendorComponent() {
  // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
  const mutation = useDeleteVendor();

  // You can also pass in a `DataConnect` instance to the Mutation hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const mutation = useDeleteVendor(dataConnect);

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useDeleteVendor(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 = useDeleteVendor(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useDeleteVendor` Mutation requires an argument of type `DeleteVendorVariables`:
  const deleteVendorVars: DeleteVendorVariables = {
    id: ..., 
  };
  mutation.mutate(deleteVendorVars);
  // Variables can be defined inline as well.
  mutation.mutate({ id: ..., });

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(deleteVendorVars, 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_delete);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

CreateVendorRate

You can execute the CreateVendorRate Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts):

useCreateVendorRate(options?: useDataConnectMutationOptions<CreateVendorRateData, FirebaseError, CreateVendorRateVariables>): UseDataConnectMutationResult<CreateVendorRateData, CreateVendorRateVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

useCreateVendorRate(dc: DataConnect, options?: useDataConnectMutationOptions<CreateVendorRateData, FirebaseError, CreateVendorRateVariables>): UseDataConnectMutationResult<CreateVendorRateData, CreateVendorRateVariables>;

Variables

The CreateVendorRate Mutation requires an argument of type CreateVendorRateVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface CreateVendorRateVariables {
  vendorName: string;
  category: VendorRateCategory;
  roleName: string;
  employeeWage: number;
  markupPercentage?: number | null;
  vendorFeePercentage?: number | null;
  clientRate: number;
}

Return Type

Recall that calling the CreateVendorRate 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 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 CreateVendorRate Mutation is of type CreateVendorRateData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface CreateVendorRateData {
  vendorRate_insert: VendorRate_Key;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `CreateVendorRate`'s Mutation hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, CreateVendorRateVariables } from '@dataconnect/generated';
import { useCreateVendorRate } from '@dataconnect/generated/react'

export default function CreateVendorRateComponent() {
  // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
  const mutation = useCreateVendorRate();

  // You can also pass in a `DataConnect` instance to the Mutation hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const mutation = useCreateVendorRate(dataConnect);

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useCreateVendorRate(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 = useCreateVendorRate(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useCreateVendorRate` Mutation requires an argument of type `CreateVendorRateVariables`:
  const createVendorRateVars: CreateVendorRateVariables = {
    vendorName: ..., 
    category: ..., 
    roleName: ..., 
    employeeWage: ..., 
    markupPercentage: ..., // optional
    vendorFeePercentage: ..., // optional
    clientRate: ..., 
  };
  mutation.mutate(createVendorRateVars);
  // Variables can be defined inline as well.
  mutation.mutate({ vendorName: ..., category: ..., roleName: ..., employeeWage: ..., markupPercentage: ..., vendorFeePercentage: ..., clientRate: ..., });

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(createVendorRateVars, 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.vendorRate_insert);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpdateVendorRate

You can execute the UpdateVendorRate Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts):

useUpdateVendorRate(options?: useDataConnectMutationOptions<UpdateVendorRateData, FirebaseError, UpdateVendorRateVariables>): UseDataConnectMutationResult<UpdateVendorRateData, UpdateVendorRateVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

useUpdateVendorRate(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateVendorRateData, FirebaseError, UpdateVendorRateVariables>): UseDataConnectMutationResult<UpdateVendorRateData, UpdateVendorRateVariables>;

Variables

The UpdateVendorRate Mutation requires an argument of type UpdateVendorRateVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface UpdateVendorRateVariables {
  id: UUIDString;
  vendorName?: string | null;
  category?: VendorRateCategory | null;
  roleName?: string | null;
  employeeWage?: number | null;
  markupPercentage?: number | null;
  vendorFeePercentage?: number | null;
  clientRate?: number | null;
}

Return Type

Recall that calling the UpdateVendorRate 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 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 UpdateVendorRate Mutation is of type UpdateVendorRateData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface UpdateVendorRateData {
  vendorRate_update?: VendorRate_Key | null;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `UpdateVendorRate`'s Mutation hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, UpdateVendorRateVariables } from '@dataconnect/generated';
import { useUpdateVendorRate } from '@dataconnect/generated/react'

export default function UpdateVendorRateComponent() {
  // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
  const mutation = useUpdateVendorRate();

  // You can also pass in a `DataConnect` instance to the Mutation hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const mutation = useUpdateVendorRate(dataConnect);

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useUpdateVendorRate(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 = useUpdateVendorRate(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useUpdateVendorRate` Mutation requires an argument of type `UpdateVendorRateVariables`:
  const updateVendorRateVars: UpdateVendorRateVariables = {
    id: ..., 
    vendorName: ..., // optional
    category: ..., // optional
    roleName: ..., // optional
    employeeWage: ..., // optional
    markupPercentage: ..., // optional
    vendorFeePercentage: ..., // optional
    clientRate: ..., // optional
  };
  mutation.mutate(updateVendorRateVars);
  // Variables can be defined inline as well.
  mutation.mutate({ id: ..., vendorName: ..., category: ..., roleName: ..., employeeWage: ..., markupPercentage: ..., vendorFeePercentage: ..., clientRate: ..., });

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(updateVendorRateVars, 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.vendorRate_update);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

DeleteVendorRate

You can execute the DeleteVendorRate Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts):

useDeleteVendorRate(options?: useDataConnectMutationOptions<DeleteVendorRateData, FirebaseError, DeleteVendorRateVariables>): UseDataConnectMutationResult<DeleteVendorRateData, DeleteVendorRateVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

useDeleteVendorRate(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteVendorRateData, FirebaseError, DeleteVendorRateVariables>): UseDataConnectMutationResult<DeleteVendorRateData, DeleteVendorRateVariables>;

Variables

The DeleteVendorRate Mutation requires an argument of type DeleteVendorRateVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface DeleteVendorRateVariables {
  id: UUIDString;
}

Return Type

Recall that calling the DeleteVendorRate 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 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 DeleteVendorRate Mutation is of type DeleteVendorRateData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface DeleteVendorRateData {
  vendorRate_delete?: VendorRate_Key | null;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `DeleteVendorRate`'s Mutation hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, DeleteVendorRateVariables } from '@dataconnect/generated';
import { useDeleteVendorRate } from '@dataconnect/generated/react'

export default function DeleteVendorRateComponent() {
  // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
  const mutation = useDeleteVendorRate();

  // You can also pass in a `DataConnect` instance to the Mutation hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const mutation = useDeleteVendorRate(dataConnect);

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useDeleteVendorRate(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 = useDeleteVendorRate(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useDeleteVendorRate` Mutation requires an argument of type `DeleteVendorRateVariables`:
  const deleteVendorRateVars: DeleteVendorRateVariables = {
    id: ..., 
  };
  mutation.mutate(deleteVendorRateVars);
  // Variables can be defined inline as well.
  mutation.mutate({ id: ..., });

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(deleteVendorRateVars, 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.vendorRate_delete);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

CreateEvent

You can execute the CreateEvent Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts):

useCreateEvent(options?: useDataConnectMutationOptions<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

useCreateEvent(dc: DataConnect, options?: useDataConnectMutationOptions<CreateEventData, FirebaseError, CreateEventVariables>): UseDataConnectMutationResult<CreateEventData, CreateEventVariables>;

Variables

The CreateEvent Mutation requires an argument of type CreateEventVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface CreateEventVariables {
  eventName: string;
  isRapid?: boolean | null;
  isRecurring?: boolean | null;
  isMultiDay?: boolean | null;
  recurrenceType?: RecurrenceType | null;
  recurrenceStartDate?: TimestampString | null;
  recurrenceEndDate?: TimestampString | null;
  scatterDates?: string | null;
  multiDayStartDate?: TimestampString | null;
  multiDayEndDate?: TimestampString | null;
  bufferTimeBefore?: number | null;
  bufferTimeAfter?: number | null;
  conflictDetectionEnabled?: boolean | null;
  detectedConflicts?: string | null;
  businessId: UUIDString;
  businessName?: string | null;
  vendorId?: UUIDString | null;
  vendorName?: string | null;
  hub?: string | null;
  eventLocation?: string | null;
  contractType?: ContractType | null;
  poReference?: string | null;
  status: EventStatus;
  date: TimestampString;
  shifts?: string | null;
  addons?: string | null;
  total?: number | null;
  clientName?: string | null;
  clientEmail?: string | null;
  clientPhone?: string | null;
  invoiceId?: UUIDString | null;
  notes?: string | null;
  requested?: number | null;
  assignedStaff?: string | null;
}

Return Type

Recall that calling the CreateEvent 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 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 CreateEvent Mutation is of type CreateEventData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface CreateEventData {
  event_insert: Event_Key;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `CreateEvent`'s Mutation hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, CreateEventVariables } from '@dataconnect/generated';
import { useCreateEvent } from '@dataconnect/generated/react'

export default function CreateEventComponent() {
  // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
  const mutation = useCreateEvent();

  // You can also pass in a `DataConnect` instance to the Mutation hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const mutation = useCreateEvent(dataConnect);

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useCreateEvent(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 = useCreateEvent(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useCreateEvent` Mutation requires an argument of type `CreateEventVariables`:
  const createEventVars: CreateEventVariables = {
    eventName: ..., 
    isRapid: ..., // optional
    isRecurring: ..., // optional
    isMultiDay: ..., // optional
    recurrenceType: ..., // optional
    recurrenceStartDate: ..., // optional
    recurrenceEndDate: ..., // optional
    scatterDates: ..., // optional
    multiDayStartDate: ..., // optional
    multiDayEndDate: ..., // optional
    bufferTimeBefore: ..., // optional
    bufferTimeAfter: ..., // optional
    conflictDetectionEnabled: ..., // optional
    detectedConflicts: ..., // optional
    businessId: ..., 
    businessName: ..., // optional
    vendorId: ..., // optional
    vendorName: ..., // optional
    hub: ..., // optional
    eventLocation: ..., // optional
    contractType: ..., // optional
    poReference: ..., // optional
    status: ..., 
    date: ..., 
    shifts: ..., // optional
    addons: ..., // optional
    total: ..., // optional
    clientName: ..., // optional
    clientEmail: ..., // optional
    clientPhone: ..., // optional
    invoiceId: ..., // optional
    notes: ..., // optional
    requested: ..., // optional
    assignedStaff: ..., // optional
  };
  mutation.mutate(createEventVars);
  // Variables can be defined inline as well.
  mutation.mutate({ eventName: ..., isRapid: ..., isRecurring: ..., isMultiDay: ..., recurrenceType: ..., recurrenceStartDate: ..., recurrenceEndDate: ..., scatterDates: ..., multiDayStartDate: ..., multiDayEndDate: ..., bufferTimeBefore: ..., bufferTimeAfter: ..., conflictDetectionEnabled: ..., detectedConflicts: ..., businessId: ..., businessName: ..., vendorId: ..., vendorName: ..., hub: ..., eventLocation: ..., contractType: ..., poReference: ..., status: ..., date: ..., shifts: ..., addons: ..., total: ..., clientName: ..., clientEmail: ..., clientPhone: ..., invoiceId: ..., notes: ..., requested: ..., assignedStaff: ..., });

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(createEventVars, 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.event_insert);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpdateEvent

You can execute the UpdateEvent Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts):

useUpdateEvent(options?: useDataConnectMutationOptions<UpdateEventData, FirebaseError, UpdateEventVariables>): UseDataConnectMutationResult<UpdateEventData, UpdateEventVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

useUpdateEvent(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateEventData, FirebaseError, UpdateEventVariables>): UseDataConnectMutationResult<UpdateEventData, UpdateEventVariables>;

Variables

The UpdateEvent Mutation requires an argument of type UpdateEventVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface UpdateEventVariables {
  id: UUIDString;
  eventName?: string | null;
  isRapid?: boolean | null;
  isRecurring?: boolean | null;
  isMultiDay?: boolean | null;
  recurrenceType?: RecurrenceType | null;
  recurrenceStartDate?: TimestampString | null;
  recurrenceEndDate?: TimestampString | null;
  scatterDates?: string | null;
  multiDayStartDate?: TimestampString | null;
  multiDayEndDate?: TimestampString | null;
  bufferTimeBefore?: number | null;
  bufferTimeAfter?: number | null;
  conflictDetectionEnabled?: boolean | null;
  detectedConflicts?: string | null;
  businessId?: UUIDString | null;
  businessName?: string | null;
  vendorId?: UUIDString | null;
  vendorName?: string | null;
  hub?: string | null;
  eventLocation?: string | null;
  contractType?: ContractType | null;
  poReference?: string | null;
  status?: EventStatus | null;
  date?: TimestampString | null;
  shifts?: string | null;
  addons?: string | null;
  total?: number | null;
  clientName?: string | null;
  clientEmail?: string | null;
  clientPhone?: string | null;
  invoiceId?: UUIDString | null;
  notes?: string | null;
  requested?: number | null;
  assignedStaff?: string | null;
}

Return Type

Recall that calling the UpdateEvent 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 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 UpdateEvent Mutation is of type UpdateEventData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface UpdateEventData {
  event_update?: Event_Key | null;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `UpdateEvent`'s Mutation hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, UpdateEventVariables } from '@dataconnect/generated';
import { useUpdateEvent } from '@dataconnect/generated/react'

export default function UpdateEventComponent() {
  // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
  const mutation = useUpdateEvent();

  // You can also pass in a `DataConnect` instance to the Mutation hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const mutation = useUpdateEvent(dataConnect);

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useUpdateEvent(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 = useUpdateEvent(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useUpdateEvent` Mutation requires an argument of type `UpdateEventVariables`:
  const updateEventVars: UpdateEventVariables = {
    id: ..., 
    eventName: ..., // optional
    isRapid: ..., // optional
    isRecurring: ..., // optional
    isMultiDay: ..., // optional
    recurrenceType: ..., // optional
    recurrenceStartDate: ..., // optional
    recurrenceEndDate: ..., // optional
    scatterDates: ..., // optional
    multiDayStartDate: ..., // optional
    multiDayEndDate: ..., // optional
    bufferTimeBefore: ..., // optional
    bufferTimeAfter: ..., // optional
    conflictDetectionEnabled: ..., // optional
    detectedConflicts: ..., // optional
    businessId: ..., // optional
    businessName: ..., // optional
    vendorId: ..., // optional
    vendorName: ..., // optional
    hub: ..., // optional
    eventLocation: ..., // optional
    contractType: ..., // optional
    poReference: ..., // optional
    status: ..., // optional
    date: ..., // optional
    shifts: ..., // optional
    addons: ..., // optional
    total: ..., // optional
    clientName: ..., // optional
    clientEmail: ..., // optional
    clientPhone: ..., // optional
    invoiceId: ..., // optional
    notes: ..., // optional
    requested: ..., // optional
    assignedStaff: ..., // optional
  };
  mutation.mutate(updateEventVars);
  // Variables can be defined inline as well.
  mutation.mutate({ id: ..., eventName: ..., isRapid: ..., isRecurring: ..., isMultiDay: ..., recurrenceType: ..., recurrenceStartDate: ..., recurrenceEndDate: ..., scatterDates: ..., multiDayStartDate: ..., multiDayEndDate: ..., bufferTimeBefore: ..., bufferTimeAfter: ..., conflictDetectionEnabled: ..., detectedConflicts: ..., businessId: ..., businessName: ..., vendorId: ..., vendorName: ..., hub: ..., eventLocation: ..., contractType: ..., poReference: ..., status: ..., date: ..., shifts: ..., addons: ..., total: ..., clientName: ..., clientEmail: ..., clientPhone: ..., invoiceId: ..., notes: ..., requested: ..., assignedStaff: ..., });

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(updateEventVars, 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.event_update);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

DeleteEvent

You can execute the DeleteEvent Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts):

useDeleteEvent(options?: useDataConnectMutationOptions<DeleteEventData, FirebaseError, DeleteEventVariables>): UseDataConnectMutationResult<DeleteEventData, DeleteEventVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

useDeleteEvent(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteEventData, FirebaseError, DeleteEventVariables>): UseDataConnectMutationResult<DeleteEventData, DeleteEventVariables>;

Variables

The DeleteEvent Mutation requires an argument of type DeleteEventVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface DeleteEventVariables {
  id: UUIDString;
}

Return Type

Recall that calling the DeleteEvent 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 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 DeleteEvent Mutation is of type DeleteEventData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface DeleteEventData {
  event_delete?: Event_Key | null;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `DeleteEvent`'s Mutation hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, DeleteEventVariables } from '@dataconnect/generated';
import { useDeleteEvent } from '@dataconnect/generated/react'

export default function DeleteEventComponent() {
  // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
  const mutation = useDeleteEvent();

  // You can also pass in a `DataConnect` instance to the Mutation hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const mutation = useDeleteEvent(dataConnect);

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useDeleteEvent(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 = useDeleteEvent(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useDeleteEvent` Mutation requires an argument of type `DeleteEventVariables`:
  const deleteEventVars: DeleteEventVariables = {
    id: ..., 
  };
  mutation.mutate(deleteEventVars);
  // Variables can be defined inline as well.
  mutation.mutate({ id: ..., });

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(deleteEventVars, 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.event_delete);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

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):

useCreateStaff(options?: useDataConnectMutationOptions<CreateStaffData, FirebaseError, CreateStaffVariables>): UseDataConnectMutationResult<CreateStaffData, CreateStaffVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

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. It has the following fields:

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 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. It has the following fields:

export interface CreateStaffData {
  staff_insert: Staff_Key;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `CreateStaff`'s Mutation hook function

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

CreateVendorDefaultSetting

You can execute the CreateVendorDefaultSetting Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts):

useCreateVendorDefaultSetting(options?: useDataConnectMutationOptions<CreateVendorDefaultSettingData, FirebaseError, CreateVendorDefaultSettingVariables>): UseDataConnectMutationResult<CreateVendorDefaultSettingData, CreateVendorDefaultSettingVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

useCreateVendorDefaultSetting(dc: DataConnect, options?: useDataConnectMutationOptions<CreateVendorDefaultSettingData, FirebaseError, CreateVendorDefaultSettingVariables>): UseDataConnectMutationResult<CreateVendorDefaultSettingData, CreateVendorDefaultSettingVariables>;

Variables

The CreateVendorDefaultSetting Mutation requires an argument of type CreateVendorDefaultSettingVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface CreateVendorDefaultSettingVariables {
  vendorName: string;
  defaultMarkupPercentage: number;
  defaultVendorFeePercentage: number;
}

Return Type

Recall that calling the CreateVendorDefaultSetting 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 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 CreateVendorDefaultSetting Mutation is of type CreateVendorDefaultSettingData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface CreateVendorDefaultSettingData {
  vendorDefaultSetting_insert: VendorDefaultSetting_Key;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `CreateVendorDefaultSetting`'s Mutation hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, CreateVendorDefaultSettingVariables } from '@dataconnect/generated';
import { useCreateVendorDefaultSetting } from '@dataconnect/generated/react'

export default function CreateVendorDefaultSettingComponent() {
  // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
  const mutation = useCreateVendorDefaultSetting();

  // You can also pass in a `DataConnect` instance to the Mutation hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const mutation = useCreateVendorDefaultSetting(dataConnect);

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useCreateVendorDefaultSetting(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 = useCreateVendorDefaultSetting(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useCreateVendorDefaultSetting` Mutation requires an argument of type `CreateVendorDefaultSettingVariables`:
  const createVendorDefaultSettingVars: CreateVendorDefaultSettingVariables = {
    vendorName: ..., 
    defaultMarkupPercentage: ..., 
    defaultVendorFeePercentage: ..., 
  };
  mutation.mutate(createVendorDefaultSettingVars);
  // Variables can be defined inline as well.
  mutation.mutate({ vendorName: ..., defaultMarkupPercentage: ..., defaultVendorFeePercentage: ..., });

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(createVendorDefaultSettingVars, 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.vendorDefaultSetting_insert);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpdateVendorDefaultSetting

You can execute the UpdateVendorDefaultSetting Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts):

useUpdateVendorDefaultSetting(options?: useDataConnectMutationOptions<UpdateVendorDefaultSettingData, FirebaseError, UpdateVendorDefaultSettingVariables>): UseDataConnectMutationResult<UpdateVendorDefaultSettingData, UpdateVendorDefaultSettingVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

useUpdateVendorDefaultSetting(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateVendorDefaultSettingData, FirebaseError, UpdateVendorDefaultSettingVariables>): UseDataConnectMutationResult<UpdateVendorDefaultSettingData, UpdateVendorDefaultSettingVariables>;

Variables

The UpdateVendorDefaultSetting Mutation requires an argument of type UpdateVendorDefaultSettingVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface UpdateVendorDefaultSettingVariables {
  id: UUIDString;
  vendorName?: string | null;
  defaultMarkupPercentage?: number | null;
  defaultVendorFeePercentage?: number | null;
}

Return Type

Recall that calling the UpdateVendorDefaultSetting 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 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 UpdateVendorDefaultSetting Mutation is of type UpdateVendorDefaultSettingData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface UpdateVendorDefaultSettingData {
  vendorDefaultSetting_update?: VendorDefaultSetting_Key | null;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `UpdateVendorDefaultSetting`'s Mutation hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, UpdateVendorDefaultSettingVariables } from '@dataconnect/generated';
import { useUpdateVendorDefaultSetting } from '@dataconnect/generated/react'

export default function UpdateVendorDefaultSettingComponent() {
  // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
  const mutation = useUpdateVendorDefaultSetting();

  // You can also pass in a `DataConnect` instance to the Mutation hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const mutation = useUpdateVendorDefaultSetting(dataConnect);

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useUpdateVendorDefaultSetting(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 = useUpdateVendorDefaultSetting(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useUpdateVendorDefaultSetting` Mutation requires an argument of type `UpdateVendorDefaultSettingVariables`:
  const updateVendorDefaultSettingVars: UpdateVendorDefaultSettingVariables = {
    id: ..., 
    vendorName: ..., // optional
    defaultMarkupPercentage: ..., // optional
    defaultVendorFeePercentage: ..., // optional
  };
  mutation.mutate(updateVendorDefaultSettingVars);
  // Variables can be defined inline as well.
  mutation.mutate({ id: ..., vendorName: ..., defaultMarkupPercentage: ..., defaultVendorFeePercentage: ..., });

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(updateVendorDefaultSettingVars, 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.vendorDefaultSetting_update);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

DeleteVendorDefaultSetting

You can execute the DeleteVendorDefaultSetting Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts):

useDeleteVendorDefaultSetting(options?: useDataConnectMutationOptions<DeleteVendorDefaultSettingData, FirebaseError, DeleteVendorDefaultSettingVariables>): UseDataConnectMutationResult<DeleteVendorDefaultSettingData, DeleteVendorDefaultSettingVariables>;

You can also pass in a DataConnect instance to the Mutation hook function.

useDeleteVendorDefaultSetting(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteVendorDefaultSettingData, FirebaseError, DeleteVendorDefaultSettingVariables>): UseDataConnectMutationResult<DeleteVendorDefaultSettingData, DeleteVendorDefaultSettingVariables>;

Variables

The DeleteVendorDefaultSetting Mutation requires an argument of type DeleteVendorDefaultSettingVariables, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface DeleteVendorDefaultSettingVariables {
  id: UUIDString;
}

Return Type

Recall that calling the DeleteVendorDefaultSetting 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 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 DeleteVendorDefaultSetting Mutation is of type DeleteVendorDefaultSettingData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface DeleteVendorDefaultSettingData {
  vendorDefaultSetting_delete?: VendorDefaultSetting_Key | null;
}

To learn more about the UseMutationResult object, see the TanStack React Query documentation.

Using `DeleteVendorDefaultSetting`'s Mutation hook function

import { getDataConnect } from 'firebase/data-connect';
import { connectorConfig, DeleteVendorDefaultSettingVariables } from '@dataconnect/generated';
import { useDeleteVendorDefaultSetting } from '@dataconnect/generated/react'

export default function DeleteVendorDefaultSettingComponent() {
  // Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
  const mutation = useDeleteVendorDefaultSetting();

  // You can also pass in a `DataConnect` instance to the Mutation hook function.
  const dataConnect = getDataConnect(connectorConfig);
  const mutation = useDeleteVendorDefaultSetting(dataConnect);

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useDeleteVendorDefaultSetting(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 = useDeleteVendorDefaultSetting(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useDeleteVendorDefaultSetting` Mutation requires an argument of type `DeleteVendorDefaultSettingVariables`:
  const deleteVendorDefaultSettingVars: DeleteVendorDefaultSettingVariables = {
    id: ..., 
  };
  mutation.mutate(deleteVendorDefaultSettingVars);
  // Variables can be defined inline as well.
  mutation.mutate({ id: ..., });

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(deleteVendorDefaultSettingVars, 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.vendorDefaultSetting_delete);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

README.md

Generated React README

Table of Contents

TanStack Query Firebase & TanStack React Query

Installing TanStack Query Firebase and TanStack React Query Packages

Configuring TanStack Query

Accessing the connector

Connecting to the local Emulator

Queries

Using Query Hooks

listStaff

Variables

Return Type

Using listStaff's Query hook function

listEvents

Variables

Return Type

Using listEvents's Query hook function

getEventById

Variables

Return Type

Using getEventById's Query hook function

filterEvents

Variables

Return Type

Using filterEvents's Query hook function

listVendor

Variables

Return Type

Using listVendor's Query hook function

getVendorById

Variables

Return Type

Using getVendorById's Query hook function

filterVendors

Variables

Return Type

Using filterVendors's Query hook function

listVendorDefaultSettings

Variables

Return Type

Using listVendorDefaultSettings's Query hook function

getVendorDefaultSettingById

Variables

Return Type

Using getVendorDefaultSettingById's Query hook function

filterVendorDefaultSettings

Variables

Return Type

Using filterVendorDefaultSettings's Query hook function

listVendorRate

Variables

Return Type

Using listVendorRate's Query hook function

getVendorRateById

Variables

Return Type

Using getVendorRateById's Query hook function

filterVendorRates

Variables

Return Type

Using filterVendorRates's Query hook function

Mutations

Using Mutation Hooks

CreateVendor

Variables

Return Type

Using CreateVendor's Mutation hook function

UpdateVendor

Variables

Return Type

Using UpdateVendor's Mutation hook function

DeleteVendor

Variables

Return Type

Using DeleteVendor's Mutation hook function

CreateVendorRate

Variables

Return Type

Using CreateVendorRate's Mutation hook function

Using `listStaff`'s Query hook function

Using `listEvents`'s Query hook function

Using `getEventById`'s Query hook function

Using `filterEvents`'s Query hook function

Using `listVendor`'s Query hook function

Using `getVendorById`'s Query hook function

Using `filterVendors`'s Query hook function

Using `listVendorDefaultSettings`'s Query hook function

Using `getVendorDefaultSettingById`'s Query hook function

Using `filterVendorDefaultSettings`'s Query hook function

Using `listVendorRate`'s Query hook function

Using `getVendorRateById`'s Query hook function

Using `filterVendorRates`'s Query hook function

Using `CreateVendor`'s Mutation hook function

Using `UpdateVendor`'s Mutation hook function

Using `DeleteVendor`'s Mutation hook function

Using `CreateVendorRate`'s Mutation hook function

Using `UpdateVendorRate`'s Mutation hook function

Using `DeleteVendorRate`'s Mutation hook function

Using `CreateEvent`'s Mutation hook function

Using `UpdateEvent`'s Mutation hook function

Using `DeleteEvent`'s Mutation hook function

Using `CreateStaff`'s Mutation hook function

Using `CreateVendorDefaultSetting`'s Mutation hook function

Using `UpdateVendorDefaultSetting`'s Mutation hook function

Using `DeleteVendorDefaultSetting`'s Mutation hook function