Code Commits Issues Pulls Cloud Agent CI/CD

main

copilot/add-firebase copilot/change-app-name-to-jcrguru copilot/create-zip-file copilot/create-zip-file-again copilot/merge-any-updates main master

md 159 KB

View source Raw

Generated React README

This README will guide you through the process of using the generated React SDK package for the connector example. 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 example. 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. bash npm i --save @tanstack/react-query @tanstack-query-firebase/react bash 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 example.

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 example connector's generated Query hook functions to execute each Query. You can also follow the examples from the Data Connect documentation.

GetCategory

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

useGetCategory(dc: DataConnect, vars: GetCategoryVariables, options?: useDataConnectQueryOptions<GetCategoryData>): UseDataConnectQueryResult<GetCategoryData, GetCategoryVariables>;

You can also pass in a DataConnect instance to the Query hook function. javascript useGetCategory(vars: GetCategoryVariables, options?: useDataConnectQueryOptions<GetCategoryData>): UseDataConnectQueryResult<GetCategoryData, GetCategoryVariables>;

Variables

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

export interface GetCategoryVariables {
  id: UUIDString;
}

Return Type

Recall that calling the GetCategory 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 GetCategory Query is of type GetCategoryData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface GetCategoryData { category?: { name: string; }; }

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

Using `GetCategory`'s Query hook function

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

export default function GetCategoryComponent() {
  // The `useGetCategory` Query hook requires an argument of type `GetCategoryVariables`:
  const getCategoryVars: GetCategoryVariables = {
    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 = useGetCategory(getCategoryVars);
  // Variables can be defined inline as well.
  const query = useGetCategory({ id: ..., });

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

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

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

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

useListCategories(dc: DataConnect, options?: useDataConnectQueryOptions<ListCategoriesData>): UseDataConnectQueryResult<ListCategoriesData, undefined>;

You can also pass in a DataConnect instance to the Query hook function. javascript useListCategories(options?: useDataConnectQueryOptions<ListCategoriesData>): UseDataConnectQueryResult<ListCategoriesData, undefined>;

Variables

The ListCategories Query has no variables.

Return Type

Recall that calling the ListCategories 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 ListCategories Query is of type ListCategoriesData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface ListCategoriesData { categories: ({ name: string; })[]; }

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

Using `ListCategories`'s Query hook function

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

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

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

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

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

GetDevice

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

useGetDevice(dc: DataConnect, vars: GetDeviceVariables, options?: useDataConnectQueryOptions<GetDeviceData>): UseDataConnectQueryResult<GetDeviceData, GetDeviceVariables>;

You can also pass in a DataConnect instance to the Query hook function. javascript useGetDevice(vars: GetDeviceVariables, options?: useDataConnectQueryOptions<GetDeviceData>): UseDataConnectQueryResult<GetDeviceData, GetDeviceVariables>;

Variables

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

export interface GetDeviceVariables {
  id: UUIDString;
}

Return Type

Recall that calling the GetDevice 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 GetDevice Query is of type GetDeviceData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface GetDeviceData { device?: { modelName: string; }; }

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

Using `GetDevice`'s Query hook function

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

export default function GetDeviceComponent() {
  // The `useGetDevice` Query hook requires an argument of type `GetDeviceVariables`:
  const getDeviceVars: GetDeviceVariables = {
    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 = useGetDevice(getDeviceVars);
  // Variables can be defined inline as well.
  const query = useGetDevice({ id: ..., });

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

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

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

ListDevices

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

useListDevices(dc: DataConnect, options?: useDataConnectQueryOptions<ListDevicesData>): UseDataConnectQueryResult<ListDevicesData, undefined>;

You can also pass in a DataConnect instance to the Query hook function. javascript useListDevices(options?: useDataConnectQueryOptions<ListDevicesData>): UseDataConnectQueryResult<ListDevicesData, undefined>;

Variables

The ListDevices Query has no variables.

Return Type

Recall that calling the ListDevices 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 ListDevices Query is of type ListDevicesData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface ListDevicesData { devices: ({ modelName: string; })[]; }

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

Using `ListDevices`'s Query hook function

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

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

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

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

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

GetGuide

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

useGetGuide(dc: DataConnect, vars: GetGuideVariables, options?: useDataConnectQueryOptions<GetGuideData>): UseDataConnectQueryResult<GetGuideData, GetGuideVariables>;

You can also pass in a DataConnect instance to the Query hook function. javascript useGetGuide(vars: GetGuideVariables, options?: useDataConnectQueryOptions<GetGuideData>): UseDataConnectQueryResult<GetGuideData, GetGuideVariables>;

Variables

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

export interface GetGuideVariables {
  id: UUIDString;
}

Return Type

Recall that calling the GetGuide 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 GetGuide Query is of type GetGuideData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface GetGuideData { guide?: { title: string; }; }

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

Using `GetGuide`'s Query hook function

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

export default function GetGuideComponent() {
  // The `useGetGuide` Query hook requires an argument of type `GetGuideVariables`:
  const getGuideVars: GetGuideVariables = {
    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 = useGetGuide(getGuideVars);
  // Variables can be defined inline as well.
  const query = useGetGuide({ id: ..., });

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

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

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

ListGuides

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

useListGuides(dc: DataConnect, options?: useDataConnectQueryOptions<ListGuidesData>): UseDataConnectQueryResult<ListGuidesData, undefined>;

You can also pass in a DataConnect instance to the Query hook function. javascript useListGuides(options?: useDataConnectQueryOptions<ListGuidesData>): UseDataConnectQueryResult<ListGuidesData, undefined>;

Variables

The ListGuides Query has no variables.

Return Type

Recall that calling the ListGuides 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 ListGuides Query is of type ListGuidesData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface ListGuidesData { guides: ({ title: string; })[]; }

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

Using `ListGuides`'s Query hook function

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

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

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

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

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

GetPart

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

useGetPart(dc: DataConnect, vars: GetPartVariables, options?: useDataConnectQueryOptions<GetPartData>): UseDataConnectQueryResult<GetPartData, GetPartVariables>;

You can also pass in a DataConnect instance to the Query hook function. javascript useGetPart(vars: GetPartVariables, options?: useDataConnectQueryOptions<GetPartData>): UseDataConnectQueryResult<GetPartData, GetPartVariables>;

Variables

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

export interface GetPartVariables {
  id: UUIDString;
}

Return Type

Recall that calling the GetPart 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 GetPart Query is of type GetPartData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface GetPartData { part?: { partName: string; }; }

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

Using `GetPart`'s Query hook function

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

export default function GetPartComponent() {
  // The `useGetPart` Query hook requires an argument of type `GetPartVariables`:
  const getPartVars: GetPartVariables = {
    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 = useGetPart(getPartVars);
  // Variables can be defined inline as well.
  const query = useGetPart({ id: ..., });

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

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

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

ListParts

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

useListParts(dc: DataConnect, options?: useDataConnectQueryOptions<ListPartsData>): UseDataConnectQueryResult<ListPartsData, undefined>;

You can also pass in a DataConnect instance to the Query hook function. javascript useListParts(options?: useDataConnectQueryOptions<ListPartsData>): UseDataConnectQueryResult<ListPartsData, undefined>;

Variables

The ListParts Query has no variables.

Return Type

Recall that calling the ListParts 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 ListParts Query is of type ListPartsData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface ListPartsData { parts: ({ partName: string; })[]; }

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

Using `ListParts`'s Query hook function

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

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

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

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

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

GetStep

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

useGetStep(dc: DataConnect, vars: GetStepVariables, options?: useDataConnectQueryOptions<GetStepData>): UseDataConnectQueryResult<GetStepData, GetStepVariables>;

You can also pass in a DataConnect instance to the Query hook function. javascript useGetStep(vars: GetStepVariables, options?: useDataConnectQueryOptions<GetStepData>): UseDataConnectQueryResult<GetStepData, GetStepVariables>;

Variables

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

export interface GetStepVariables {
  id: UUIDString;
}

Return Type

Recall that calling the GetStep 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 GetStep Query is of type GetStepData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface GetStepData { step?: { instructionText: string; }; }

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

Using `GetStep`'s Query hook function

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

export default function GetStepComponent() {
  // The `useGetStep` Query hook requires an argument of type `GetStepVariables`:
  const getStepVars: GetStepVariables = {
    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 = useGetStep(getStepVars);
  // Variables can be defined inline as well.
  const query = useGetStep({ id: ..., });

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

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

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

ListSteps

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

useListSteps(dc: DataConnect, options?: useDataConnectQueryOptions<ListStepsData>): UseDataConnectQueryResult<ListStepsData, undefined>;

You can also pass in a DataConnect instance to the Query hook function. javascript useListSteps(options?: useDataConnectQueryOptions<ListStepsData>): UseDataConnectQueryResult<ListStepsData, undefined>;

Variables

The ListSteps Query has no variables.

Return Type

Recall that calling the ListSteps 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 ListSteps Query is of type ListStepsData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface ListStepsData { steps: ({ instructionText: string; })[]; }

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

Using `ListSteps`'s Query hook function

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

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

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

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

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

GetMyBookmarks

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

useGetMyBookmarks(dc: DataConnect, options?: useDataConnectQueryOptions<GetMyBookmarksData>): UseDataConnectQueryResult<GetMyBookmarksData, undefined>;

You can also pass in a DataConnect instance to the Query hook function. javascript useGetMyBookmarks(options?: useDataConnectQueryOptions<GetMyBookmarksData>): UseDataConnectQueryResult<GetMyBookmarksData, undefined>;

Variables

The GetMyBookmarks Query has no variables.

Return Type

Recall that calling the GetMyBookmarks 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 GetMyBookmarks Query is of type GetMyBookmarksData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface GetMyBookmarksData { userBookmarks: ({ guide: { title: string; }; })[]; }

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

Using `GetMyBookmarks`'s Query hook function

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

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

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

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

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

GetBookmark

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

useGetBookmark(dc: DataConnect, vars: GetBookmarkVariables, options?: useDataConnectQueryOptions<GetBookmarkData>): UseDataConnectQueryResult<GetBookmarkData, GetBookmarkVariables>;

You can also pass in a DataConnect instance to the Query hook function. javascript useGetBookmark(vars: GetBookmarkVariables, options?: useDataConnectQueryOptions<GetBookmarkData>): UseDataConnectQueryResult<GetBookmarkData, GetBookmarkVariables>;

Variables

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

export interface GetBookmarkVariables {
  id: UUIDString;
}

Return Type

Recall that calling the GetBookmark 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 GetBookmark Query is of type GetBookmarkData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface GetBookmarkData { userBookmark?: { userId: string; }; }

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

Using `GetBookmark`'s Query hook function

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

export default function GetBookmarkComponent() {
  // The `useGetBookmark` Query hook requires an argument of type `GetBookmarkVariables`:
  const getBookmarkVars: GetBookmarkVariables = {
    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 = useGetBookmark(getBookmarkVars);
  // Variables can be defined inline as well.
  const query = useGetBookmark({ id: ..., });

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

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

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useGetBookmark(dataConnect, getBookmarkVars, 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.userBookmark);
  }
  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 example connector's generated Mutation hook functions to execute each Mutation. You can also follow the examples from the Data Connect documentation.

CreateCategory

You can execute the CreateCategory Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useCreateCategory(options?: useDataConnectMutationOptions<CreateCategoryData, FirebaseError, void>): UseDataConnectMutationResult<CreateCategoryData, undefined>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useCreateCategory(dc: DataConnect, options?: useDataConnectMutationOptions<CreateCategoryData, FirebaseError, void>): UseDataConnectMutationResult<CreateCategoryData, undefined>;

Variables

The CreateCategory Mutation has no variables.

Return Type

Recall that calling the CreateCategory 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 CreateCategory Mutation is of type CreateCategoryData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface CreateCategoryData { category_insert: Category_Key; }

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

Using `CreateCategory`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  mutation.mutate();

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  // Since this Mutation accepts no variables, you must pass `undefined` where you would normally pass the variables.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(undefined, 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.category_insert);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpsertCategory

You can execute the UpsertCategory Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpsertCategory(options?: useDataConnectMutationOptions<UpsertCategoryData, FirebaseError, UpsertCategoryVariables>): UseDataConnectMutationResult<UpsertCategoryData, UpsertCategoryVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpsertCategory(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertCategoryData, FirebaseError, UpsertCategoryVariables>): UseDataConnectMutationResult<UpsertCategoryData, UpsertCategoryVariables>;

Variables

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

export interface UpsertCategoryVariables {
  id: UUIDString;
}

Return Type

Recall that calling the UpsertCategory 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 UpsertCategory Mutation is of type UpsertCategoryData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpsertCategoryData { category_upsert: Category_Key; }

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

Using `UpsertCategory`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useUpsertCategory` Mutation requires an argument of type `UpsertCategoryVariables`:
  const upsertCategoryVars: UpsertCategoryVariables = {
    id: ..., 
  };
  mutation.mutate(upsertCategoryVars);
  // 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(upsertCategoryVars, 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.category_upsert);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

DeleteCategory

You can execute the DeleteCategory Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useDeleteCategory(options?: useDataConnectMutationOptions<DeleteCategoryData, FirebaseError, DeleteCategoryVariables>): UseDataConnectMutationResult<DeleteCategoryData, DeleteCategoryVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useDeleteCategory(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteCategoryData, FirebaseError, DeleteCategoryVariables>): UseDataConnectMutationResult<DeleteCategoryData, DeleteCategoryVariables>;

Variables

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

export interface DeleteCategoryVariables {
  id: UUIDString;
}

Return Type

Recall that calling the DeleteCategory 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 DeleteCategory Mutation is of type DeleteCategoryData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface DeleteCategoryData { category_delete?: Category_Key | null; }

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

Using `DeleteCategory`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useDeleteCategory` Mutation requires an argument of type `DeleteCategoryVariables`:
  const deleteCategoryVars: DeleteCategoryVariables = {
    id: ..., 
  };
  mutation.mutate(deleteCategoryVars);
  // 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(deleteCategoryVars, 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.category_delete);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpdateCategory

You can execute the UpdateCategory Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpdateCategory(options?: useDataConnectMutationOptions<UpdateCategoryData, FirebaseError, UpdateCategoryVariables>): UseDataConnectMutationResult<UpdateCategoryData, UpdateCategoryVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpdateCategory(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateCategoryData, FirebaseError, UpdateCategoryVariables>): UseDataConnectMutationResult<UpdateCategoryData, UpdateCategoryVariables>;

Variables

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

export interface UpdateCategoryVariables {
  id: UUIDString;
  name: string;
}

Return Type

Recall that calling the UpdateCategory 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 UpdateCategory Mutation is of type UpdateCategoryData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpdateCategoryData { category_update?: Category_Key | null; }

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

Using `UpdateCategory`'s Mutation hook function

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

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

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

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

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

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

CreateDevice

You can execute the CreateDevice Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useCreateDevice(options?: useDataConnectMutationOptions<CreateDeviceData, FirebaseError, void>): UseDataConnectMutationResult<CreateDeviceData, undefined>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useCreateDevice(dc: DataConnect, options?: useDataConnectMutationOptions<CreateDeviceData, FirebaseError, void>): UseDataConnectMutationResult<CreateDeviceData, undefined>;

Variables

The CreateDevice Mutation has no variables.

Return Type

Recall that calling the CreateDevice 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 CreateDevice Mutation is of type CreateDeviceData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface CreateDeviceData { device_insert: Device_Key; }

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

Using `CreateDevice`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  mutation.mutate();

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  // Since this Mutation accepts no variables, you must pass `undefined` where you would normally pass the variables.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(undefined, 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.device_insert);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpsertDevice

You can execute the UpsertDevice Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpsertDevice(options?: useDataConnectMutationOptions<UpsertDeviceData, FirebaseError, UpsertDeviceVariables>): UseDataConnectMutationResult<UpsertDeviceData, UpsertDeviceVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpsertDevice(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertDeviceData, FirebaseError, UpsertDeviceVariables>): UseDataConnectMutationResult<UpsertDeviceData, UpsertDeviceVariables>;

Variables

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

export interface UpsertDeviceVariables {
  id: UUIDString;
}

Return Type

Recall that calling the UpsertDevice 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 UpsertDevice Mutation is of type UpsertDeviceData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpsertDeviceData { device_upsert: Device_Key; }

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

Using `UpsertDevice`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useUpsertDevice` Mutation requires an argument of type `UpsertDeviceVariables`:
  const upsertDeviceVars: UpsertDeviceVariables = {
    id: ..., 
  };
  mutation.mutate(upsertDeviceVars);
  // 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(upsertDeviceVars, 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.device_upsert);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

DeleteDevice

You can execute the DeleteDevice Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useDeleteDevice(options?: useDataConnectMutationOptions<DeleteDeviceData, FirebaseError, DeleteDeviceVariables>): UseDataConnectMutationResult<DeleteDeviceData, DeleteDeviceVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useDeleteDevice(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteDeviceData, FirebaseError, DeleteDeviceVariables>): UseDataConnectMutationResult<DeleteDeviceData, DeleteDeviceVariables>;

Variables

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

export interface DeleteDeviceVariables {
  id: UUIDString;
}

Return Type

Recall that calling the DeleteDevice 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 DeleteDevice Mutation is of type DeleteDeviceData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface DeleteDeviceData { device_delete?: Device_Key | null; }

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

Using `DeleteDevice`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useDeleteDevice` Mutation requires an argument of type `DeleteDeviceVariables`:
  const deleteDeviceVars: DeleteDeviceVariables = {
    id: ..., 
  };
  mutation.mutate(deleteDeviceVars);
  // 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(deleteDeviceVars, 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.device_delete);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpdateDevice

You can execute the UpdateDevice Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpdateDevice(options?: useDataConnectMutationOptions<UpdateDeviceData, FirebaseError, UpdateDeviceVariables>): UseDataConnectMutationResult<UpdateDeviceData, UpdateDeviceVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpdateDevice(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateDeviceData, FirebaseError, UpdateDeviceVariables>): UseDataConnectMutationResult<UpdateDeviceData, UpdateDeviceVariables>;

Variables

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

export interface UpdateDeviceVariables {
  id: UUIDString;
  modelName: string;
}

Return Type

Recall that calling the UpdateDevice 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 UpdateDevice Mutation is of type UpdateDeviceData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpdateDeviceData { device_update?: Device_Key | null; }

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

Using `UpdateDevice`'s Mutation hook function

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

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

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

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

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

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

CreateGuide

You can execute the CreateGuide Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useCreateGuide(options?: useDataConnectMutationOptions<CreateGuideData, FirebaseError, CreateGuideVariables>): UseDataConnectMutationResult<CreateGuideData, CreateGuideVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useCreateGuide(dc: DataConnect, options?: useDataConnectMutationOptions<CreateGuideData, FirebaseError, CreateGuideVariables>): UseDataConnectMutationResult<CreateGuideData, CreateGuideVariables>;

Variables

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

export interface CreateGuideVariables {
  title: string;
  difficulty: string;
  time: number;
}

Return Type

Recall that calling the CreateGuide 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 CreateGuide Mutation is of type CreateGuideData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface CreateGuideData { guide_insert: Guide_Key; }

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

Using `CreateGuide`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useCreateGuide` Mutation requires an argument of type `CreateGuideVariables`:
  const createGuideVars: CreateGuideVariables = {
    title: ..., 
    difficulty: ..., 
    time: ..., 
  };
  mutation.mutate(createGuideVars);
  // Variables can be defined inline as well.
  mutation.mutate({ title: ..., difficulty: ..., time: ..., });

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

UpsertGuide

You can execute the UpsertGuide Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpsertGuide(options?: useDataConnectMutationOptions<UpsertGuideData, FirebaseError, UpsertGuideVariables>): UseDataConnectMutationResult<UpsertGuideData, UpsertGuideVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpsertGuide(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertGuideData, FirebaseError, UpsertGuideVariables>): UseDataConnectMutationResult<UpsertGuideData, UpsertGuideVariables>;

Variables

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

export interface UpsertGuideVariables {
  id: UUIDString;
  title: string;
  difficulty: string;
  time: number;
}

Return Type

Recall that calling the UpsertGuide 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 UpsertGuide Mutation is of type UpsertGuideData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpsertGuideData { guide_upsert: Guide_Key; }

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

Using `UpsertGuide`'s Mutation hook function

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

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

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

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

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

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

DeleteGuide

You can execute the DeleteGuide Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useDeleteGuide(options?: useDataConnectMutationOptions<DeleteGuideData, FirebaseError, DeleteGuideVariables>): UseDataConnectMutationResult<DeleteGuideData, DeleteGuideVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useDeleteGuide(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteGuideData, FirebaseError, DeleteGuideVariables>): UseDataConnectMutationResult<DeleteGuideData, DeleteGuideVariables>;

Variables

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

export interface DeleteGuideVariables {
  id: UUIDString;
}

Return Type

Recall that calling the DeleteGuide 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 DeleteGuide Mutation is of type DeleteGuideData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface DeleteGuideData { guide_delete?: Guide_Key | null; }

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

Using `DeleteGuide`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useDeleteGuide` Mutation requires an argument of type `DeleteGuideVariables`:
  const deleteGuideVars: DeleteGuideVariables = {
    id: ..., 
  };
  mutation.mutate(deleteGuideVars);
  // 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(deleteGuideVars, 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.guide_delete);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpdateGuide

You can execute the UpdateGuide Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpdateGuide(options?: useDataConnectMutationOptions<UpdateGuideData, FirebaseError, UpdateGuideVariables>): UseDataConnectMutationResult<UpdateGuideData, UpdateGuideVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpdateGuide(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateGuideData, FirebaseError, UpdateGuideVariables>): UseDataConnectMutationResult<UpdateGuideData, UpdateGuideVariables>;

Variables

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

export interface UpdateGuideVariables {
  id: UUIDString;
  time: number;
}

Return Type

Recall that calling the UpdateGuide 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 UpdateGuide Mutation is of type UpdateGuideData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpdateGuideData { guide_update?: Guide_Key | null; }

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

Using `UpdateGuide`'s Mutation hook function

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

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

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

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

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

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

CreatePart

You can execute the CreatePart Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useCreatePart(options?: useDataConnectMutationOptions<CreatePartData, FirebaseError, CreatePartVariables>): UseDataConnectMutationResult<CreatePartData, CreatePartVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useCreatePart(dc: DataConnect, options?: useDataConnectMutationOptions<CreatePartData, FirebaseError, CreatePartVariables>): UseDataConnectMutationResult<CreatePartData, CreatePartVariables>;

Variables

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

export interface CreatePartVariables {
  name: string;
  type: string;
  devId: UUIDString;
}

Return Type

Recall that calling the CreatePart 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 CreatePart Mutation is of type CreatePartData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface CreatePartData { part_insert: Part_Key; }

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

Using `CreatePart`'s Mutation hook function

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

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

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

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

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

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

UpsertPart

You can execute the UpsertPart Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpsertPart(options?: useDataConnectMutationOptions<UpsertPartData, FirebaseError, UpsertPartVariables>): UseDataConnectMutationResult<UpsertPartData, UpsertPartVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpsertPart(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertPartData, FirebaseError, UpsertPartVariables>): UseDataConnectMutationResult<UpsertPartData, UpsertPartVariables>;

Variables

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

export interface UpsertPartVariables {
  id: UUIDString;
  name: string;
  type: string;
  devId: UUIDString;
}

Return Type

Recall that calling the UpsertPart 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 UpsertPart Mutation is of type UpsertPartData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpsertPartData { part_upsert: Part_Key; }

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

Using `UpsertPart`'s Mutation hook function

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

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

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

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

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

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

DeletePart

You can execute the DeletePart Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useDeletePart(options?: useDataConnectMutationOptions<DeletePartData, FirebaseError, DeletePartVariables>): UseDataConnectMutationResult<DeletePartData, DeletePartVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useDeletePart(dc: DataConnect, options?: useDataConnectMutationOptions<DeletePartData, FirebaseError, DeletePartVariables>): UseDataConnectMutationResult<DeletePartData, DeletePartVariables>;

Variables

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

export interface DeletePartVariables {
  id: UUIDString;
}

Return Type

Recall that calling the DeletePart 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 DeletePart Mutation is of type DeletePartData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface DeletePartData { part_delete?: Part_Key | null; }

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

Using `DeletePart`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useDeletePart` Mutation requires an argument of type `DeletePartVariables`:
  const deletePartVars: DeletePartVariables = {
    id: ..., 
  };
  mutation.mutate(deletePartVars);
  // 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(deletePartVars, 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.part_delete);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpdatePart

You can execute the UpdatePart Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpdatePart(options?: useDataConnectMutationOptions<UpdatePartData, FirebaseError, UpdatePartVariables>): UseDataConnectMutationResult<UpdatePartData, UpdatePartVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpdatePart(dc: DataConnect, options?: useDataConnectMutationOptions<UpdatePartData, FirebaseError, UpdatePartVariables>): UseDataConnectMutationResult<UpdatePartData, UpdatePartVariables>;

Variables

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

export interface UpdatePartVariables {
  id: UUIDString;
  notes: string;
}

Return Type

Recall that calling the UpdatePart 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 UpdatePart Mutation is of type UpdatePartData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpdatePartData { part_update?: Part_Key | null; }

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

Using `UpdatePart`'s Mutation hook function

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

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

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

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

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

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

CreateStep

You can execute the CreateStep Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useCreateStep(options?: useDataConnectMutationOptions<CreateStepData, FirebaseError, CreateStepVariables>): UseDataConnectMutationResult<CreateStepData, CreateStepVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useCreateStep(dc: DataConnect, options?: useDataConnectMutationOptions<CreateStepData, FirebaseError, CreateStepVariables>): UseDataConnectMutationResult<CreateStepData, CreateStepVariables>;

Variables

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

export interface CreateStepVariables {
  order: number;
  text: string;
  guideId: UUIDString;
}

Return Type

Recall that calling the CreateStep 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 CreateStep Mutation is of type CreateStepData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface CreateStepData { step_insert: Step_Key; }

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

Using `CreateStep`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useCreateStep` Mutation requires an argument of type `CreateStepVariables`:
  const createStepVars: CreateStepVariables = {
    order: ..., 
    text: ..., 
    guideId: ..., 
  };
  mutation.mutate(createStepVars);
  // Variables can be defined inline as well.
  mutation.mutate({ order: ..., text: ..., guideId: ..., });

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

UpsertStep

You can execute the UpsertStep Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpsertStep(options?: useDataConnectMutationOptions<UpsertStepData, FirebaseError, UpsertStepVariables>): UseDataConnectMutationResult<UpsertStepData, UpsertStepVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpsertStep(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertStepData, FirebaseError, UpsertStepVariables>): UseDataConnectMutationResult<UpsertStepData, UpsertStepVariables>;

Variables

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

export interface UpsertStepVariables {
  id: UUIDString;
  order: number;
  text: string;
  guideId: UUIDString;
}

Return Type

Recall that calling the UpsertStep 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 UpsertStep Mutation is of type UpsertStepData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpsertStepData { step_upsert: Step_Key; }

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

Using `UpsertStep`'s Mutation hook function

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

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

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

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

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

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

DeleteStep

You can execute the DeleteStep Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useDeleteStep(options?: useDataConnectMutationOptions<DeleteStepData, FirebaseError, DeleteStepVariables>): UseDataConnectMutationResult<DeleteStepData, DeleteStepVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useDeleteStep(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteStepData, FirebaseError, DeleteStepVariables>): UseDataConnectMutationResult<DeleteStepData, DeleteStepVariables>;

Variables

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

export interface DeleteStepVariables {
  id: UUIDString;
}

Return Type

Recall that calling the DeleteStep 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 DeleteStep Mutation is of type DeleteStepData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface DeleteStepData { step_delete?: Step_Key | null; }

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

Using `DeleteStep`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useDeleteStep` Mutation requires an argument of type `DeleteStepVariables`:
  const deleteStepVars: DeleteStepVariables = {
    id: ..., 
  };
  mutation.mutate(deleteStepVars);
  // 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(deleteStepVars, 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.step_delete);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpdateStep

You can execute the UpdateStep Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpdateStep(options?: useDataConnectMutationOptions<UpdateStepData, FirebaseError, UpdateStepVariables>): UseDataConnectMutationResult<UpdateStepData, UpdateStepVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpdateStep(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateStepData, FirebaseError, UpdateStepVariables>): UseDataConnectMutationResult<UpdateStepData, UpdateStepVariables>;

Variables

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

export interface UpdateStepVariables {
  id: UUIDString;
  text: string;
}

Return Type

Recall that calling the UpdateStep 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 UpdateStep Mutation is of type UpdateStepData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpdateStepData { step_update?: Step_Key | null; }

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

Using `UpdateStep`'s Mutation hook function

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

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

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

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

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

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

CreateBookmark

You can execute the CreateBookmark Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useCreateBookmark(options?: useDataConnectMutationOptions<CreateBookmarkData, FirebaseError, CreateBookmarkVariables>): UseDataConnectMutationResult<CreateBookmarkData, CreateBookmarkVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useCreateBookmark(dc: DataConnect, options?: useDataConnectMutationOptions<CreateBookmarkData, FirebaseError, CreateBookmarkVariables>): UseDataConnectMutationResult<CreateBookmarkData, CreateBookmarkVariables>;

Variables

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

export interface CreateBookmarkVariables {
  guideId: UUIDString;
}

Return Type

Recall that calling the CreateBookmark 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 CreateBookmark Mutation is of type CreateBookmarkData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface CreateBookmarkData { userBookmark_insert: UserBookmark_Key; }

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

Using `CreateBookmark`'s Mutation hook function

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

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

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

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

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

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

UpsertBookmark

You can execute the UpsertBookmark Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpsertBookmark(options?: useDataConnectMutationOptions<UpsertBookmarkData, FirebaseError, UpsertBookmarkVariables>): UseDataConnectMutationResult<UpsertBookmarkData, UpsertBookmarkVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpsertBookmark(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertBookmarkData, FirebaseError, UpsertBookmarkVariables>): UseDataConnectMutationResult<UpsertBookmarkData, UpsertBookmarkVariables>;

Variables

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

export interface UpsertBookmarkVariables {
  id: UUIDString;
  guideId: UUIDString;
}

Return Type

Recall that calling the UpsertBookmark 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 UpsertBookmark Mutation is of type UpsertBookmarkData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpsertBookmarkData { userBookmark_upsert: UserBookmark_Key; }

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

Using `UpsertBookmark`'s Mutation hook function

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

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

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

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

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

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

DeleteBookmark

You can execute the DeleteBookmark Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useDeleteBookmark(options?: useDataConnectMutationOptions<DeleteBookmarkData, FirebaseError, DeleteBookmarkVariables>): UseDataConnectMutationResult<DeleteBookmarkData, DeleteBookmarkVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useDeleteBookmark(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteBookmarkData, FirebaseError, DeleteBookmarkVariables>): UseDataConnectMutationResult<DeleteBookmarkData, DeleteBookmarkVariables>;

Variables

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

export interface DeleteBookmarkVariables {
  id: UUIDString;
}

Return Type

Recall that calling the DeleteBookmark 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 DeleteBookmark Mutation is of type DeleteBookmarkData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface DeleteBookmarkData { userBookmark_delete?: UserBookmark_Key | null; }

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

Using `DeleteBookmark`'s Mutation hook function

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

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

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

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

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useDeleteBookmark` Mutation requires an argument of type `DeleteBookmarkVariables`:
  const deleteBookmarkVars: DeleteBookmarkVariables = {
    id: ..., 
  };
  mutation.mutate(deleteBookmarkVars);
  // 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(deleteBookmarkVars, 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.userBookmark_delete);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpdateBookmark

You can execute the UpdateBookmark Mutation using the UseMutationResult object returned by the following Mutation hook function (which is defined in dataconnect-generated/react/index.d.ts): javascript useUpdateBookmark(options?: useDataConnectMutationOptions<UpdateBookmarkData, FirebaseError, UpdateBookmarkVariables>): UseDataConnectMutationResult<UpdateBookmarkData, UpdateBookmarkVariables>; You can also pass in a DataConnect instance to the Mutation hook function. javascript useUpdateBookmark(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateBookmarkData, FirebaseError, UpdateBookmarkVariables>): UseDataConnectMutationResult<UpdateBookmarkData, UpdateBookmarkVariables>;

Variables

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

export interface UpdateBookmarkVariables {
  id: UUIDString;
  guideId: UUIDString;
}

Return Type

Recall that calling the UpdateBookmark 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 UpdateBookmark Mutation is of type UpdateBookmarkData, which is defined in dataconnect-generated/index.d.ts. It has the following fields: javascript export interface UpdateBookmarkData { userBookmark_update?: UserBookmark_Key | null; }

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

Using `UpdateBookmark`'s Mutation hook function

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

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

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

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

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

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

#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

#GetCategory

#Variables

#Return Type

#Using GetCategory's Query hook function

#ListCategories

#Variables

#Return Type

#Using ListCategories's Query hook function

#GetDevice

#Variables

#Return Type

#Using GetDevice's Query hook function

#ListDevices

#Variables

#Return Type

#Using ListDevices's Query hook function

#GetGuide

#Variables

#Return Type

#Using GetGuide's Query hook function

#ListGuides

#Variables

#Return Type

#Using ListGuides's Query hook function

#GetPart

#Variables

#Return Type

#Using GetPart's Query hook function

#ListParts

#Variables

#Return Type

#Using ListParts's Query hook function

#GetStep

#Variables

#Return Type

#Using GetStep's Query hook function

#ListSteps

#Variables

#Return Type

#Using ListSteps's Query hook function

#GetMyBookmarks

#Variables

#Return Type

#Using GetMyBookmarks's Query hook function

#GetBookmark

#Variables

#Return Type

#Using GetBookmark's Query hook function

#Mutations

#Using Mutation Hooks

#CreateCategory

#Variables

#Return Type

#Using CreateCategory's Mutation hook function

#UpsertCategory

#Variables

#Return Type

#Using UpsertCategory's Mutation hook function

#DeleteCategory

#Variables

#Return Type

#Using DeleteCategory's Mutation hook function

#UpdateCategory

#Variables

#Return Type

#Using UpdateCategory's Mutation hook function

#CreateDevice

#Variables

#Return Type

#Using CreateDevice's Mutation hook function

#UpsertDevice

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

GetCategory

Variables

Return Type

Using `GetCategory`'s Query hook function

ListCategories

Variables

Return Type

Using `ListCategories`'s Query hook function

GetDevice

Variables

Return Type

Using `GetDevice`'s Query hook function

ListDevices

Variables

Return Type

Using `ListDevices`'s Query hook function

GetGuide

Variables

Return Type

Using `GetGuide`'s Query hook function

ListGuides

Variables

Return Type

Using `ListGuides`'s Query hook function

GetPart

Variables

Return Type

Using `GetPart`'s Query hook function

ListParts

Variables

Return Type

Using `ListParts`'s Query hook function

GetStep

Variables

Return Type

Using `GetStep`'s Query hook function

ListSteps

Variables

Return Type

Using `ListSteps`'s Query hook function

GetMyBookmarks

Variables

Return Type

Using `GetMyBookmarks`'s Query hook function

GetBookmark

Variables

Return Type

Using `GetBookmark`'s Query hook function

Mutations

Using Mutation Hooks

CreateCategory

Variables

Return Type

Using `CreateCategory`'s Mutation hook function

UpsertCategory

Variables

Return Type

Using `UpsertCategory`'s Mutation hook function

DeleteCategory

Variables

Return Type

Using `DeleteCategory`'s Mutation hook function

UpdateCategory

Variables

Return Type

Using `UpdateCategory`'s Mutation hook function

CreateDevice

Variables

Return Type

Using `CreateDevice`'s Mutation hook function

UpsertDevice