README.md · jhustle44/jcr-guide-pro

Code Commits Issues Pulls Cloud Agent CI/CD

master

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 3,382 lines 159 KB

Rendered Raw

1	# Generated React README
2	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.
3
4	If you're looking for the `JavaScript README`, you can find it at [`dataconnect-generated/README.md`](../README.md)
5
6	*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.*
7
8	You can use this generated SDK by importing from the package `@dataconnect/generated/react` as shown below. Both CommonJS and ESM imports are supported.
9
10	You can also follow the instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#react).
11
12	# Table of Contents
13	- [Overview](#generated-react-readme)
14	- [TanStack Query Firebase & TanStack React Query](#tanstack-query-firebase-tanstack-react-query)
15	- [Package Installation](#installing-tanstack-query-firebase-and-tanstack-react-query-packages)
16	- [Configuring TanStack Query](#configuring-tanstack-query)
17	- [Accessing the connector](#accessing-the-connector)
18	- [Connecting to the local Emulator](#connecting-to-the-local-emulator)
19	- [Queries](#queries)
20	- [GetCategory](#getcategory)
21	- [ListCategories](#listcategories)
22	- [GetDevice](#getdevice)
23	- [ListDevices](#listdevices)
24	- [GetGuide](#getguide)
25	- [ListGuides](#listguides)
26	- [GetPart](#getpart)
27	- [ListParts](#listparts)
28	- [GetStep](#getstep)
29	- [ListSteps](#liststeps)
30	- [GetMyBookmarks](#getmybookmarks)
31	- [GetBookmark](#getbookmark)
32	- [Mutations](#mutations)
33	- [CreateCategory](#createcategory)
34	- [UpsertCategory](#upsertcategory)
35	- [DeleteCategory](#deletecategory)
36	- [UpdateCategory](#updatecategory)
37	- [CreateDevice](#createdevice)
38	- [UpsertDevice](#upsertdevice)
39	- [DeleteDevice](#deletedevice)
40	- [UpdateDevice](#updatedevice)
41	- [CreateGuide](#createguide)
42	- [UpsertGuide](#upsertguide)
43	- [DeleteGuide](#deleteguide)
44	- [UpdateGuide](#updateguide)
45	- [CreatePart](#createpart)
46	- [UpsertPart](#upsertpart)
47	- [DeletePart](#deletepart)
48	- [UpdatePart](#updatepart)
49	- [CreateStep](#createstep)
50	- [UpsertStep](#upsertstep)
51	- [DeleteStep](#deletestep)
52	- [UpdateStep](#updatestep)
53	- [CreateBookmark](#createbookmark)
54	- [UpsertBookmark](#upsertbookmark)
55	- [DeleteBookmark](#deletebookmark)
56	- [UpdateBookmark](#updatebookmark)
57
58	# TanStack Query Firebase & TanStack React Query
59	This SDK provides [React](https://react.dev/) hooks generated specific to your application, for the operations found in the connector `example`. These hooks are generated using [TanStack Query Firebase](https://react-query-firebase.invertase.dev/) by our partners at Invertase, a library built on top of [TanStack React Query v5](https://tanstack.com/query/v5/docs/framework/react/overview).
60
61	*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.
62
63	## Installing TanStack Query Firebase and TanStack React Query Packages
64	In order to use the React generated SDK, you must install the `TanStack React Query` and `TanStack Query Firebase` packages.
65	```bash
66	npm i --save @tanstack/react-query @tanstack-query-firebase/react
67	```
68	```bash
69	npm i --save firebase@latest # Note: React has a peer dependency on ^11.3.0
70	```
71
72	You can also follow the installation instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#tanstack-install), or the [TanStack Query Firebase documentation](https://react-query-firebase.invertase.dev/react) and [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/installation).
73
74	## Configuring TanStack Query
75	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.
76
77	```javascript
78	import { QueryClientProvider } from '@tanstack/react-query';
79
80	// Create a TanStack Query client instance
81	const queryClient = new QueryClient()
82
83	function App() {
84	return (
85	// Provide the client to your App
86	<QueryClientProvider client={queryClient}>
87	<MyApplication />
88	</QueryClientProvider>
89	)
90	}
91	```
92
93	To learn more about `QueryClientProvider`, see the [TanStack React Query documentation](https://tanstack.com/query/latest/docs/framework/react/quick-start) and the [TanStack Query Firebase documentation](https://invertase.docs.page/tanstack-query-firebase/react#usage).
94
95	# Accessing the connector
96	A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector `example`.
97
98	You can find more information about connectors in the [Data Connect documentation](https://firebase.google.com/docs/data-connect#how-does).
99
100	```javascript
101	import { getDataConnect } from 'firebase/data-connect';
102	import { connectorConfig } from '@dataconnect/generated';
103
104	const dataConnect = getDataConnect(connectorConfig);
105	```
106
107	## Connecting to the local Emulator
108	By default, the connector will connect to the production service.
109
110	To connect to the emulator, you can use the following code.
111	You can also follow the emulator instructions from the [Data Connect documentation](https://firebase.google.com/docs/data-connect/web-sdk#emulator-react-angular).
112
113	```javascript
114	import { connectDataConnectEmulator, getDataConnect } from 'firebase/data-connect';
115	import { connectorConfig } from '@dataconnect/generated';
116
117	const dataConnect = getDataConnect(connectorConfig);
118	connectDataConnectEmulator(dataConnect, 'localhost', 9399);
119	```
120
121	After it's initialized, you can call your Data Connect [queries](#queries) and [mutations](#mutations) using the hooks provided from your generated React SDK.
122
123	# Queries
124
125	The React generated SDK provides Query hook functions that call and return [`useDataConnectQuery`](https://react-query-firebase.invertase.dev/react/data-connect/querying) hooks from TanStack Query Firebase.
126
127	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](https://react-query-firebase.invertase.dev/react/data-connect/querying).
128
129	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.
130
131	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](https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries).
132
133	To learn more about TanStack React Query's Queries, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/queries).
134
135	## Using Query Hooks
136	Here's a general overview of how to use the generated Query hooks in your code:
137
138	- If the Query has no variables, the Query hook function does not require arguments.
139	- 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.
140	- 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.
141	- If all of the Query's variables are optional, the Query hook function does not require any arguments.
142	- 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.
143	- 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](https://tanstack.com/query/v5/docs/framework/react/guides/query-options).
144	- *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.
145
146	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](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular).
147
148	## GetCategory
149	You can execute the `GetCategory` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
150
151	```javascript
152	useGetCategory(dc: DataConnect, vars: GetCategoryVariables, options?: useDataConnectQueryOptions<GetCategoryData>): UseDataConnectQueryResult<GetCategoryData, GetCategoryVariables>;
153	```
154	You can also pass in a `DataConnect` instance to the Query hook function.
155	```javascript
156	useGetCategory(vars: GetCategoryVariables, options?: useDataConnectQueryOptions<GetCategoryData>): UseDataConnectQueryResult<GetCategoryData, GetCategoryVariables>;
157	```
158
159	### Variables
160	The `GetCategory` Query requires an argument of type `GetCategoryVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
161
162	```javascript
163	export interface GetCategoryVariables {
164	id: UUIDString;
165	}
166	```
167	### Return Type
168	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.
169
170	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.
171
172	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](../index.d.ts). It has the following fields:
173	```javascript
174	export interface GetCategoryData {
175	category?: {
176	name: string;
177	};
178	}
179	```
180
181	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
182
183	### Using `GetCategory`'s Query hook function
184
185	```javascript
186	import { getDataConnect } from 'firebase/data-connect';
187	import { connectorConfig, GetCategoryVariables } from '@dataconnect/generated';
188	import { useGetCategory } from '@dataconnect/generated/react'
189
190	export default function GetCategoryComponent() {
191	// The `useGetCategory` Query hook requires an argument of type `GetCategoryVariables`:
192	const getCategoryVars: GetCategoryVariables = {
193	id: ...,
194	};
195
196	// You don't have to do anything to "execute" the Query.
197	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
198	const query = useGetCategory(getCategoryVars);
199	// Variables can be defined inline as well.
200	const query = useGetCategory({ id: ..., });
201
202	// You can also pass in a `DataConnect` instance to the Query hook function.
203	const dataConnect = getDataConnect(connectorConfig);
204	const query = useGetCategory(dataConnect, getCategoryVars);
205
206	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
207	const options = { staleTime: 5 * 1000 };
208	const query = useGetCategory(getCategoryVars, options);
209
210	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
211	const dataConnect = getDataConnect(connectorConfig);
212	const options = { staleTime: 5 * 1000 };
213	const query = useGetCategory(dataConnect, getCategoryVars, options);
214
215	// Then, you can render your component dynamically based on the status of the Query.
216	if (query.isPending) {
217	return <div>Loading...</div>;
218	}
219
220	if (query.isError) {
221	return <div>Error: {query.error.message}</div>;
222	}
223
224	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
225	if (query.isSuccess) {
226	console.log(query.data.category);
227	}
228	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
229	}
230	```
231
232	## ListCategories
233	You can execute the `ListCategories` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
234
235	```javascript
236	useListCategories(dc: DataConnect, options?: useDataConnectQueryOptions<ListCategoriesData>): UseDataConnectQueryResult<ListCategoriesData, undefined>;
237	```
238	You can also pass in a `DataConnect` instance to the Query hook function.
239	```javascript
240	useListCategories(options?: useDataConnectQueryOptions<ListCategoriesData>): UseDataConnectQueryResult<ListCategoriesData, undefined>;
241	```
242
243	### Variables
244	The `ListCategories` Query has no variables.
245	### Return Type
246	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.
247
248	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.
249
250	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](../index.d.ts). It has the following fields:
251	```javascript
252	export interface ListCategoriesData {
253	categories: ({
254	name: string;
255	})[];
256	}
257	```
258
259	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
260
261	### Using `ListCategories`'s Query hook function
262
263	```javascript
264	import { getDataConnect } from 'firebase/data-connect';
265	import { connectorConfig } from '@dataconnect/generated';
266	import { useListCategories } from '@dataconnect/generated/react'
267
268	export default function ListCategoriesComponent() {
269	// You don't have to do anything to "execute" the Query.
270	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
271	const query = useListCategories();
272
273	// You can also pass in a `DataConnect` instance to the Query hook function.
274	const dataConnect = getDataConnect(connectorConfig);
275	const query = useListCategories(dataConnect);
276
277	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
278	const options = { staleTime: 5 * 1000 };
279	const query = useListCategories(options);
280
281	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
282	const dataConnect = getDataConnect(connectorConfig);
283	const options = { staleTime: 5 * 1000 };
284	const query = useListCategories(dataConnect, options);
285
286	// Then, you can render your component dynamically based on the status of the Query.
287	if (query.isPending) {
288	return <div>Loading...</div>;
289	}
290
291	if (query.isError) {
292	return <div>Error: {query.error.message}</div>;
293	}
294
295	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
296	if (query.isSuccess) {
297	console.log(query.data.categories);
298	}
299	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
300	}
301	```
302
303	## GetDevice
304	You can execute the `GetDevice` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
305
306	```javascript
307	useGetDevice(dc: DataConnect, vars: GetDeviceVariables, options?: useDataConnectQueryOptions<GetDeviceData>): UseDataConnectQueryResult<GetDeviceData, GetDeviceVariables>;
308	```
309	You can also pass in a `DataConnect` instance to the Query hook function.
310	```javascript
311	useGetDevice(vars: GetDeviceVariables, options?: useDataConnectQueryOptions<GetDeviceData>): UseDataConnectQueryResult<GetDeviceData, GetDeviceVariables>;
312	```
313
314	### Variables
315	The `GetDevice` Query requires an argument of type `GetDeviceVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
316
317	```javascript
318	export interface GetDeviceVariables {
319	id: UUIDString;
320	}
321	```
322	### Return Type
323	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.
324
325	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.
326
327	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](../index.d.ts). It has the following fields:
328	```javascript
329	export interface GetDeviceData {
330	device?: {
331	modelName: string;
332	};
333	}
334	```
335
336	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
337
338	### Using `GetDevice`'s Query hook function
339
340	```javascript
341	import { getDataConnect } from 'firebase/data-connect';
342	import { connectorConfig, GetDeviceVariables } from '@dataconnect/generated';
343	import { useGetDevice } from '@dataconnect/generated/react'
344
345	export default function GetDeviceComponent() {
346	// The `useGetDevice` Query hook requires an argument of type `GetDeviceVariables`:
347	const getDeviceVars: GetDeviceVariables = {
348	id: ...,
349	};
350
351	// You don't have to do anything to "execute" the Query.
352	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
353	const query = useGetDevice(getDeviceVars);
354	// Variables can be defined inline as well.
355	const query = useGetDevice({ id: ..., });
356
357	// You can also pass in a `DataConnect` instance to the Query hook function.
358	const dataConnect = getDataConnect(connectorConfig);
359	const query = useGetDevice(dataConnect, getDeviceVars);
360
361	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
362	const options = { staleTime: 5 * 1000 };
363	const query = useGetDevice(getDeviceVars, options);
364
365	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
366	const dataConnect = getDataConnect(connectorConfig);
367	const options = { staleTime: 5 * 1000 };
368	const query = useGetDevice(dataConnect, getDeviceVars, options);
369
370	// Then, you can render your component dynamically based on the status of the Query.
371	if (query.isPending) {
372	return <div>Loading...</div>;
373	}
374
375	if (query.isError) {
376	return <div>Error: {query.error.message}</div>;
377	}
378
379	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
380	if (query.isSuccess) {
381	console.log(query.data.device);
382	}
383	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
384	}
385	```
386
387	## ListDevices
388	You can execute the `ListDevices` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
389
390	```javascript
391	useListDevices(dc: DataConnect, options?: useDataConnectQueryOptions<ListDevicesData>): UseDataConnectQueryResult<ListDevicesData, undefined>;
392	```
393	You can also pass in a `DataConnect` instance to the Query hook function.
394	```javascript
395	useListDevices(options?: useDataConnectQueryOptions<ListDevicesData>): UseDataConnectQueryResult<ListDevicesData, undefined>;
396	```
397
398	### Variables
399	The `ListDevices` Query has no variables.
400	### Return Type
401	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.
402
403	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.
404
405	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](../index.d.ts). It has the following fields:
406	```javascript
407	export interface ListDevicesData {
408	devices: ({
409	modelName: string;
410	})[];
411	}
412	```
413
414	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
415
416	### Using `ListDevices`'s Query hook function
417
418	```javascript
419	import { getDataConnect } from 'firebase/data-connect';
420	import { connectorConfig } from '@dataconnect/generated';
421	import { useListDevices } from '@dataconnect/generated/react'
422
423	export default function ListDevicesComponent() {
424	// You don't have to do anything to "execute" the Query.
425	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
426	const query = useListDevices();
427
428	// You can also pass in a `DataConnect` instance to the Query hook function.
429	const dataConnect = getDataConnect(connectorConfig);
430	const query = useListDevices(dataConnect);
431
432	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
433	const options = { staleTime: 5 * 1000 };
434	const query = useListDevices(options);
435
436	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
437	const dataConnect = getDataConnect(connectorConfig);
438	const options = { staleTime: 5 * 1000 };
439	const query = useListDevices(dataConnect, options);
440
441	// Then, you can render your component dynamically based on the status of the Query.
442	if (query.isPending) {
443	return <div>Loading...</div>;
444	}
445
446	if (query.isError) {
447	return <div>Error: {query.error.message}</div>;
448	}
449
450	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
451	if (query.isSuccess) {
452	console.log(query.data.devices);
453	}
454	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
455	}
456	```
457
458	## GetGuide
459	You can execute the `GetGuide` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
460
461	```javascript
462	useGetGuide(dc: DataConnect, vars: GetGuideVariables, options?: useDataConnectQueryOptions<GetGuideData>): UseDataConnectQueryResult<GetGuideData, GetGuideVariables>;
463	```
464	You can also pass in a `DataConnect` instance to the Query hook function.
465	```javascript
466	useGetGuide(vars: GetGuideVariables, options?: useDataConnectQueryOptions<GetGuideData>): UseDataConnectQueryResult<GetGuideData, GetGuideVariables>;
467	```
468
469	### Variables
470	The `GetGuide` Query requires an argument of type `GetGuideVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
471
472	```javascript
473	export interface GetGuideVariables {
474	id: UUIDString;
475	}
476	```
477	### Return Type
478	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.
479
480	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.
481
482	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](../index.d.ts). It has the following fields:
483	```javascript
484	export interface GetGuideData {
485	guide?: {
486	title: string;
487	};
488	}
489	```
490
491	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
492
493	### Using `GetGuide`'s Query hook function
494
495	```javascript
496	import { getDataConnect } from 'firebase/data-connect';
497	import { connectorConfig, GetGuideVariables } from '@dataconnect/generated';
498	import { useGetGuide } from '@dataconnect/generated/react'
499
500	export default function GetGuideComponent() {
501	// The `useGetGuide` Query hook requires an argument of type `GetGuideVariables`:
502	const getGuideVars: GetGuideVariables = {
503	id: ...,
504	};
505
506	// You don't have to do anything to "execute" the Query.
507	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
508	const query = useGetGuide(getGuideVars);
509	// Variables can be defined inline as well.
510	const query = useGetGuide({ id: ..., });
511
512	// You can also pass in a `DataConnect` instance to the Query hook function.
513	const dataConnect = getDataConnect(connectorConfig);
514	const query = useGetGuide(dataConnect, getGuideVars);
515
516	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
517	const options = { staleTime: 5 * 1000 };
518	const query = useGetGuide(getGuideVars, options);
519
520	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
521	const dataConnect = getDataConnect(connectorConfig);
522	const options = { staleTime: 5 * 1000 };
523	const query = useGetGuide(dataConnect, getGuideVars, options);
524
525	// Then, you can render your component dynamically based on the status of the Query.
526	if (query.isPending) {
527	return <div>Loading...</div>;
528	}
529
530	if (query.isError) {
531	return <div>Error: {query.error.message}</div>;
532	}
533
534	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
535	if (query.isSuccess) {
536	console.log(query.data.guide);
537	}
538	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
539	}
540	```
541
542	## ListGuides
543	You can execute the `ListGuides` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
544
545	```javascript
546	useListGuides(dc: DataConnect, options?: useDataConnectQueryOptions<ListGuidesData>): UseDataConnectQueryResult<ListGuidesData, undefined>;
547	```
548	You can also pass in a `DataConnect` instance to the Query hook function.
549	```javascript
550	useListGuides(options?: useDataConnectQueryOptions<ListGuidesData>): UseDataConnectQueryResult<ListGuidesData, undefined>;
551	```
552
553	### Variables
554	The `ListGuides` Query has no variables.
555	### Return Type
556	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.
557
558	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.
559
560	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](../index.d.ts). It has the following fields:
561	```javascript
562	export interface ListGuidesData {
563	guides: ({
564	title: string;
565	})[];
566	}
567	```
568
569	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
570
571	### Using `ListGuides`'s Query hook function
572
573	```javascript
574	import { getDataConnect } from 'firebase/data-connect';
575	import { connectorConfig } from '@dataconnect/generated';
576	import { useListGuides } from '@dataconnect/generated/react'
577
578	export default function ListGuidesComponent() {
579	// You don't have to do anything to "execute" the Query.
580	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
581	const query = useListGuides();
582
583	// You can also pass in a `DataConnect` instance to the Query hook function.
584	const dataConnect = getDataConnect(connectorConfig);
585	const query = useListGuides(dataConnect);
586
587	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
588	const options = { staleTime: 5 * 1000 };
589	const query = useListGuides(options);
590
591	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
592	const dataConnect = getDataConnect(connectorConfig);
593	const options = { staleTime: 5 * 1000 };
594	const query = useListGuides(dataConnect, options);
595
596	// Then, you can render your component dynamically based on the status of the Query.
597	if (query.isPending) {
598	return <div>Loading...</div>;
599	}
600
601	if (query.isError) {
602	return <div>Error: {query.error.message}</div>;
603	}
604
605	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
606	if (query.isSuccess) {
607	console.log(query.data.guides);
608	}
609	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
610	}
611	```
612
613	## GetPart
614	You can execute the `GetPart` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
615
616	```javascript
617	useGetPart(dc: DataConnect, vars: GetPartVariables, options?: useDataConnectQueryOptions<GetPartData>): UseDataConnectQueryResult<GetPartData, GetPartVariables>;
618	```
619	You can also pass in a `DataConnect` instance to the Query hook function.
620	```javascript
621	useGetPart(vars: GetPartVariables, options?: useDataConnectQueryOptions<GetPartData>): UseDataConnectQueryResult<GetPartData, GetPartVariables>;
622	```
623
624	### Variables
625	The `GetPart` Query requires an argument of type `GetPartVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
626
627	```javascript
628	export interface GetPartVariables {
629	id: UUIDString;
630	}
631	```
632	### Return Type
633	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.
634
635	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.
636
637	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](../index.d.ts). It has the following fields:
638	```javascript
639	export interface GetPartData {
640	part?: {
641	partName: string;
642	};
643	}
644	```
645
646	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
647
648	### Using `GetPart`'s Query hook function
649
650	```javascript
651	import { getDataConnect } from 'firebase/data-connect';
652	import { connectorConfig, GetPartVariables } from '@dataconnect/generated';
653	import { useGetPart } from '@dataconnect/generated/react'
654
655	export default function GetPartComponent() {
656	// The `useGetPart` Query hook requires an argument of type `GetPartVariables`:
657	const getPartVars: GetPartVariables = {
658	id: ...,
659	};
660
661	// You don't have to do anything to "execute" the Query.
662	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
663	const query = useGetPart(getPartVars);
664	// Variables can be defined inline as well.
665	const query = useGetPart({ id: ..., });
666
667	// You can also pass in a `DataConnect` instance to the Query hook function.
668	const dataConnect = getDataConnect(connectorConfig);
669	const query = useGetPart(dataConnect, getPartVars);
670
671	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
672	const options = { staleTime: 5 * 1000 };
673	const query = useGetPart(getPartVars, options);
674
675	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
676	const dataConnect = getDataConnect(connectorConfig);
677	const options = { staleTime: 5 * 1000 };
678	const query = useGetPart(dataConnect, getPartVars, options);
679
680	// Then, you can render your component dynamically based on the status of the Query.
681	if (query.isPending) {
682	return <div>Loading...</div>;
683	}
684
685	if (query.isError) {
686	return <div>Error: {query.error.message}</div>;
687	}
688
689	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
690	if (query.isSuccess) {
691	console.log(query.data.part);
692	}
693	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
694	}
695	```
696
697	## ListParts
698	You can execute the `ListParts` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
699
700	```javascript
701	useListParts(dc: DataConnect, options?: useDataConnectQueryOptions<ListPartsData>): UseDataConnectQueryResult<ListPartsData, undefined>;
702	```
703	You can also pass in a `DataConnect` instance to the Query hook function.
704	```javascript
705	useListParts(options?: useDataConnectQueryOptions<ListPartsData>): UseDataConnectQueryResult<ListPartsData, undefined>;
706	```
707
708	### Variables
709	The `ListParts` Query has no variables.
710	### Return Type
711	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.
712
713	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.
714
715	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](../index.d.ts). It has the following fields:
716	```javascript
717	export interface ListPartsData {
718	parts: ({
719	partName: string;
720	})[];
721	}
722	```
723
724	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
725
726	### Using `ListParts`'s Query hook function
727
728	```javascript
729	import { getDataConnect } from 'firebase/data-connect';
730	import { connectorConfig } from '@dataconnect/generated';
731	import { useListParts } from '@dataconnect/generated/react'
732
733	export default function ListPartsComponent() {
734	// You don't have to do anything to "execute" the Query.
735	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
736	const query = useListParts();
737
738	// You can also pass in a `DataConnect` instance to the Query hook function.
739	const dataConnect = getDataConnect(connectorConfig);
740	const query = useListParts(dataConnect);
741
742	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
743	const options = { staleTime: 5 * 1000 };
744	const query = useListParts(options);
745
746	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
747	const dataConnect = getDataConnect(connectorConfig);
748	const options = { staleTime: 5 * 1000 };
749	const query = useListParts(dataConnect, options);
750
751	// Then, you can render your component dynamically based on the status of the Query.
752	if (query.isPending) {
753	return <div>Loading...</div>;
754	}
755
756	if (query.isError) {
757	return <div>Error: {query.error.message}</div>;
758	}
759
760	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
761	if (query.isSuccess) {
762	console.log(query.data.parts);
763	}
764	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
765	}
766	```
767
768	## GetStep
769	You can execute the `GetStep` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
770
771	```javascript
772	useGetStep(dc: DataConnect, vars: GetStepVariables, options?: useDataConnectQueryOptions<GetStepData>): UseDataConnectQueryResult<GetStepData, GetStepVariables>;
773	```
774	You can also pass in a `DataConnect` instance to the Query hook function.
775	```javascript
776	useGetStep(vars: GetStepVariables, options?: useDataConnectQueryOptions<GetStepData>): UseDataConnectQueryResult<GetStepData, GetStepVariables>;
777	```
778
779	### Variables
780	The `GetStep` Query requires an argument of type `GetStepVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
781
782	```javascript
783	export interface GetStepVariables {
784	id: UUIDString;
785	}
786	```
787	### Return Type
788	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.
789
790	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.
791
792	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](../index.d.ts). It has the following fields:
793	```javascript
794	export interface GetStepData {
795	step?: {
796	instructionText: string;
797	};
798	}
799	```
800
801	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
802
803	### Using `GetStep`'s Query hook function
804
805	```javascript
806	import { getDataConnect } from 'firebase/data-connect';
807	import { connectorConfig, GetStepVariables } from '@dataconnect/generated';
808	import { useGetStep } from '@dataconnect/generated/react'
809
810	export default function GetStepComponent() {
811	// The `useGetStep` Query hook requires an argument of type `GetStepVariables`:
812	const getStepVars: GetStepVariables = {
813	id: ...,
814	};
815
816	// You don't have to do anything to "execute" the Query.
817	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
818	const query = useGetStep(getStepVars);
819	// Variables can be defined inline as well.
820	const query = useGetStep({ id: ..., });
821
822	// You can also pass in a `DataConnect` instance to the Query hook function.
823	const dataConnect = getDataConnect(connectorConfig);
824	const query = useGetStep(dataConnect, getStepVars);
825
826	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
827	const options = { staleTime: 5 * 1000 };
828	const query = useGetStep(getStepVars, options);
829
830	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
831	const dataConnect = getDataConnect(connectorConfig);
832	const options = { staleTime: 5 * 1000 };
833	const query = useGetStep(dataConnect, getStepVars, options);
834
835	// Then, you can render your component dynamically based on the status of the Query.
836	if (query.isPending) {
837	return <div>Loading...</div>;
838	}
839
840	if (query.isError) {
841	return <div>Error: {query.error.message}</div>;
842	}
843
844	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
845	if (query.isSuccess) {
846	console.log(query.data.step);
847	}
848	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
849	}
850	```
851
852	## ListSteps
853	You can execute the `ListSteps` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
854
855	```javascript
856	useListSteps(dc: DataConnect, options?: useDataConnectQueryOptions<ListStepsData>): UseDataConnectQueryResult<ListStepsData, undefined>;
857	```
858	You can also pass in a `DataConnect` instance to the Query hook function.
859	```javascript
860	useListSteps(options?: useDataConnectQueryOptions<ListStepsData>): UseDataConnectQueryResult<ListStepsData, undefined>;
861	```
862
863	### Variables
864	The `ListSteps` Query has no variables.
865	### Return Type
866	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.
867
868	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.
869
870	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](../index.d.ts). It has the following fields:
871	```javascript
872	export interface ListStepsData {
873	steps: ({
874	instructionText: string;
875	})[];
876	}
877	```
878
879	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
880
881	### Using `ListSteps`'s Query hook function
882
883	```javascript
884	import { getDataConnect } from 'firebase/data-connect';
885	import { connectorConfig } from '@dataconnect/generated';
886	import { useListSteps } from '@dataconnect/generated/react'
887
888	export default function ListStepsComponent() {
889	// You don't have to do anything to "execute" the Query.
890	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
891	const query = useListSteps();
892
893	// You can also pass in a `DataConnect` instance to the Query hook function.
894	const dataConnect = getDataConnect(connectorConfig);
895	const query = useListSteps(dataConnect);
896
897	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
898	const options = { staleTime: 5 * 1000 };
899	const query = useListSteps(options);
900
901	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
902	const dataConnect = getDataConnect(connectorConfig);
903	const options = { staleTime: 5 * 1000 };
904	const query = useListSteps(dataConnect, options);
905
906	// Then, you can render your component dynamically based on the status of the Query.
907	if (query.isPending) {
908	return <div>Loading...</div>;
909	}
910
911	if (query.isError) {
912	return <div>Error: {query.error.message}</div>;
913	}
914
915	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
916	if (query.isSuccess) {
917	console.log(query.data.steps);
918	}
919	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
920	}
921	```
922
923	## GetMyBookmarks
924	You can execute the `GetMyBookmarks` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
925
926	```javascript
927	useGetMyBookmarks(dc: DataConnect, options?: useDataConnectQueryOptions<GetMyBookmarksData>): UseDataConnectQueryResult<GetMyBookmarksData, undefined>;
928	```
929	You can also pass in a `DataConnect` instance to the Query hook function.
930	```javascript
931	useGetMyBookmarks(options?: useDataConnectQueryOptions<GetMyBookmarksData>): UseDataConnectQueryResult<GetMyBookmarksData, undefined>;
932	```
933
934	### Variables
935	The `GetMyBookmarks` Query has no variables.
936	### Return Type
937	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.
938
939	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.
940
941	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](../index.d.ts). It has the following fields:
942	```javascript
943	export interface GetMyBookmarksData {
944	userBookmarks: ({
945	guide: {
946	title: string;
947	};
948	})[];
949	}
950	```
951
952	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
953
954	### Using `GetMyBookmarks`'s Query hook function
955
956	```javascript
957	import { getDataConnect } from 'firebase/data-connect';
958	import { connectorConfig } from '@dataconnect/generated';
959	import { useGetMyBookmarks } from '@dataconnect/generated/react'
960
961	export default function GetMyBookmarksComponent() {
962	// You don't have to do anything to "execute" the Query.
963	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
964	const query = useGetMyBookmarks();
965
966	// You can also pass in a `DataConnect` instance to the Query hook function.
967	const dataConnect = getDataConnect(connectorConfig);
968	const query = useGetMyBookmarks(dataConnect);
969
970	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
971	const options = { staleTime: 5 * 1000 };
972	const query = useGetMyBookmarks(options);
973
974	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
975	const dataConnect = getDataConnect(connectorConfig);
976	const options = { staleTime: 5 * 1000 };
977	const query = useGetMyBookmarks(dataConnect, options);
978
979	// Then, you can render your component dynamically based on the status of the Query.
980	if (query.isPending) {
981	return <div>Loading...</div>;
982	}
983
984	if (query.isError) {
985	return <div>Error: {query.error.message}</div>;
986	}
987
988	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
989	if (query.isSuccess) {
990	console.log(query.data.userBookmarks);
991	}
992	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
993	}
994	```
995
996	## GetBookmark
997	You can execute the `GetBookmark` Query using the following Query hook function, which is defined in [dataconnect-generated/react/index.d.ts](./index.d.ts):
998
999	```javascript
1000	useGetBookmark(dc: DataConnect, vars: GetBookmarkVariables, options?: useDataConnectQueryOptions<GetBookmarkData>): UseDataConnectQueryResult<GetBookmarkData, GetBookmarkVariables>;
1001	```
1002	You can also pass in a `DataConnect` instance to the Query hook function.
1003	```javascript
1004	useGetBookmark(vars: GetBookmarkVariables, options?: useDataConnectQueryOptions<GetBookmarkData>): UseDataConnectQueryResult<GetBookmarkData, GetBookmarkVariables>;
1005	```
1006
1007	### Variables
1008	The `GetBookmark` Query requires an argument of type `GetBookmarkVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
1009
1010	```javascript
1011	export interface GetBookmarkVariables {
1012	id: UUIDString;
1013	}
1014	```
1015	### Return Type
1016	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.
1017
1018	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.
1019
1020	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](../index.d.ts). It has the following fields:
1021	```javascript
1022	export interface GetBookmarkData {
1023	userBookmark?: {
1024	userId: string;
1025	};
1026	}
1027	```
1028
1029	To learn more about the `UseQueryResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useQuery).
1030
1031	### Using `GetBookmark`'s Query hook function
1032
1033	```javascript
1034	import { getDataConnect } from 'firebase/data-connect';
1035	import { connectorConfig, GetBookmarkVariables } from '@dataconnect/generated';
1036	import { useGetBookmark } from '@dataconnect/generated/react'
1037
1038	export default function GetBookmarkComponent() {
1039	// The `useGetBookmark` Query hook requires an argument of type `GetBookmarkVariables`:
1040	const getBookmarkVars: GetBookmarkVariables = {
1041	id: ...,
1042	};
1043
1044	// You don't have to do anything to "execute" the Query.
1045	// Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
1046	const query = useGetBookmark(getBookmarkVars);
1047	// Variables can be defined inline as well.
1048	const query = useGetBookmark({ id: ..., });
1049
1050	// You can also pass in a `DataConnect` instance to the Query hook function.
1051	const dataConnect = getDataConnect(connectorConfig);
1052	const query = useGetBookmark(dataConnect, getBookmarkVars);
1053
1054	// You can also pass in a `useDataConnectQueryOptions` object to the Query hook function.
1055	const options = { staleTime: 5 * 1000 };
1056	const query = useGetBookmark(getBookmarkVars, options);
1057
1058	// You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
1059	const dataConnect = getDataConnect(connectorConfig);
1060	const options = { staleTime: 5 * 1000 };
1061	const query = useGetBookmark(dataConnect, getBookmarkVars, options);
1062
1063	// Then, you can render your component dynamically based on the status of the Query.
1064	if (query.isPending) {
1065	return <div>Loading...</div>;
1066	}
1067
1068	if (query.isError) {
1069	return <div>Error: {query.error.message}</div>;
1070	}
1071
1072	// If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
1073	if (query.isSuccess) {
1074	console.log(query.data.userBookmark);
1075	}
1076	return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
1077	}
1078	```
1079
1080	# Mutations
1081
1082	The React generated SDK provides Mutations hook functions that call and return [`useDataConnectMutation`](https://react-query-firebase.invertase.dev/react/data-connect/mutations) hooks from TanStack Query Firebase.
1083
1084	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](https://react-query-firebase.invertase.dev/react/data-connect/mutations).
1085
1086	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.
1087
1088	To learn more about TanStack React Query's Mutations, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/mutations).
1089
1090	## Using Mutation Hooks
1091	Here's a general overview of how to use the generated Mutation hooks in your code:
1092
1093	- Mutation hook functions are not called with the arguments to the Mutation. Instead, arguments are passed to `UseMutationResult.mutate()`.
1094	- If the Mutation has no variables, the `mutate()` function does not require arguments.
1095	- 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.
1096	- 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.
1097	- If all of the Mutation's variables are optional, the Mutation hook function does not require any arguments.
1098	- 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.
1099	- Mutation hooks also accept an `options` argument of type `useDataConnectMutationOptions`. To learn more about the `options` argument, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/guides/mutations#mutation-side-effects).
1100	- `UseMutationResult.mutate()` also accepts an `options` argument of type `useDataConnectMutationOptions`.
1101	- *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.
1102
1103	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](https://firebase.google.com/docs/data-connect/web-sdk#operations-react-angular).
1104
1105	## CreateCategory
1106	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](./index.d.ts)):
1107	```javascript
1108	useCreateCategory(options?: useDataConnectMutationOptions<CreateCategoryData, FirebaseError, void>): UseDataConnectMutationResult<CreateCategoryData, undefined>;
1109	```
1110	You can also pass in a `DataConnect` instance to the Mutation hook function.
1111	```javascript
1112	useCreateCategory(dc: DataConnect, options?: useDataConnectMutationOptions<CreateCategoryData, FirebaseError, void>): UseDataConnectMutationResult<CreateCategoryData, undefined>;
1113	```
1114
1115	### Variables
1116	The `CreateCategory` Mutation has no variables.
1117	### Return Type
1118	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.
1119
1120	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.
1121
1122	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
1123
1124	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](../index.d.ts). It has the following fields:
1125	```javascript
1126	export interface CreateCategoryData {
1127	category_insert: Category_Key;
1128	}
1129	```
1130
1131	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
1132
1133	### Using `CreateCategory`'s Mutation hook function
1134
1135	```javascript
1136	import { getDataConnect } from 'firebase/data-connect';
1137	import { connectorConfig } from '@dataconnect/generated';
1138	import { useCreateCategory } from '@dataconnect/generated/react'
1139
1140	export default function CreateCategoryComponent() {
1141	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
1142	const mutation = useCreateCategory();
1143
1144	// You can also pass in a `DataConnect` instance to the Mutation hook function.
1145	const dataConnect = getDataConnect(connectorConfig);
1146	const mutation = useCreateCategory(dataConnect);
1147
1148	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
1149	const options = {
1150	onSuccess: () => { console.log('Mutation succeeded!'); }
1151	};
1152	const mutation = useCreateCategory(options);
1153
1154	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
1155	const dataConnect = getDataConnect(connectorConfig);
1156	const options = {
1157	onSuccess: () => { console.log('Mutation succeeded!'); }
1158	};
1159	const mutation = useCreateCategory(dataConnect, options);
1160
1161	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
1162	mutation.mutate();
1163
1164	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
1165	// Since this Mutation accepts no variables, you must pass `undefined` where you would normally pass the variables.
1166	const options = {
1167	onSuccess: () => { console.log('Mutation succeeded!'); }
1168	};
1169	mutation.mutate(undefined, options);
1170
1171	// Then, you can render your component dynamically based on the status of the Mutation.
1172	if (mutation.isPending) {
1173	return <div>Loading...</div>;
1174	}
1175
1176	if (mutation.isError) {
1177	return <div>Error: {mutation.error.message}</div>;
1178	}
1179
1180	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
1181	if (mutation.isSuccess) {
1182	console.log(mutation.data.category_insert);
1183	}
1184	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
1185	}
1186	```
1187
1188	## UpsertCategory
1189	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](./index.d.ts)):
1190	```javascript
1191	useUpsertCategory(options?: useDataConnectMutationOptions<UpsertCategoryData, FirebaseError, UpsertCategoryVariables>): UseDataConnectMutationResult<UpsertCategoryData, UpsertCategoryVariables>;
1192	```
1193	You can also pass in a `DataConnect` instance to the Mutation hook function.
1194	```javascript
1195	useUpsertCategory(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertCategoryData, FirebaseError, UpsertCategoryVariables>): UseDataConnectMutationResult<UpsertCategoryData, UpsertCategoryVariables>;
1196	```
1197
1198	### Variables
1199	The `UpsertCategory` Mutation requires an argument of type `UpsertCategoryVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
1200
1201	```javascript
1202	export interface UpsertCategoryVariables {
1203	id: UUIDString;
1204	}
1205	```
1206	### Return Type
1207	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.
1208
1209	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.
1210
1211	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
1212
1213	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](../index.d.ts). It has the following fields:
1214	```javascript
1215	export interface UpsertCategoryData {
1216	category_upsert: Category_Key;
1217	}
1218	```
1219
1220	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
1221
1222	### Using `UpsertCategory`'s Mutation hook function
1223
1224	```javascript
1225	import { getDataConnect } from 'firebase/data-connect';
1226	import { connectorConfig, UpsertCategoryVariables } from '@dataconnect/generated';
1227	import { useUpsertCategory } from '@dataconnect/generated/react'
1228
1229	export default function UpsertCategoryComponent() {
1230	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
1231	const mutation = useUpsertCategory();
1232
1233	// You can also pass in a `DataConnect` instance to the Mutation hook function.
1234	const dataConnect = getDataConnect(connectorConfig);
1235	const mutation = useUpsertCategory(dataConnect);
1236
1237	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
1238	const options = {
1239	onSuccess: () => { console.log('Mutation succeeded!'); }
1240	};
1241	const mutation = useUpsertCategory(options);
1242
1243	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
1244	const dataConnect = getDataConnect(connectorConfig);
1245	const options = {
1246	onSuccess: () => { console.log('Mutation succeeded!'); }
1247	};
1248	const mutation = useUpsertCategory(dataConnect, options);
1249
1250	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
1251	// The `useUpsertCategory` Mutation requires an argument of type `UpsertCategoryVariables`:
1252	const upsertCategoryVars: UpsertCategoryVariables = {
1253	id: ...,
1254	};
1255	mutation.mutate(upsertCategoryVars);
1256	// Variables can be defined inline as well.
1257	mutation.mutate({ id: ..., });
1258
1259	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
1260	const options = {
1261	onSuccess: () => { console.log('Mutation succeeded!'); }
1262	};
1263	mutation.mutate(upsertCategoryVars, options);
1264
1265	// Then, you can render your component dynamically based on the status of the Mutation.
1266	if (mutation.isPending) {
1267	return <div>Loading...</div>;
1268	}
1269
1270	if (mutation.isError) {
1271	return <div>Error: {mutation.error.message}</div>;
1272	}
1273
1274	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
1275	if (mutation.isSuccess) {
1276	console.log(mutation.data.category_upsert);
1277	}
1278	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
1279	}
1280	```
1281
1282	## DeleteCategory
1283	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](./index.d.ts)):
1284	```javascript
1285	useDeleteCategory(options?: useDataConnectMutationOptions<DeleteCategoryData, FirebaseError, DeleteCategoryVariables>): UseDataConnectMutationResult<DeleteCategoryData, DeleteCategoryVariables>;
1286	```
1287	You can also pass in a `DataConnect` instance to the Mutation hook function.
1288	```javascript
1289	useDeleteCategory(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteCategoryData, FirebaseError, DeleteCategoryVariables>): UseDataConnectMutationResult<DeleteCategoryData, DeleteCategoryVariables>;
1290	```
1291
1292	### Variables
1293	The `DeleteCategory` Mutation requires an argument of type `DeleteCategoryVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
1294
1295	```javascript
1296	export interface DeleteCategoryVariables {
1297	id: UUIDString;
1298	}
1299	```
1300	### Return Type
1301	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.
1302
1303	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.
1304
1305	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
1306
1307	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](../index.d.ts). It has the following fields:
1308	```javascript
1309	export interface DeleteCategoryData {
1310	category_delete?: Category_Key \| null;
1311	}
1312	```
1313
1314	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
1315
1316	### Using `DeleteCategory`'s Mutation hook function
1317
1318	```javascript
1319	import { getDataConnect } from 'firebase/data-connect';
1320	import { connectorConfig, DeleteCategoryVariables } from '@dataconnect/generated';
1321	import { useDeleteCategory } from '@dataconnect/generated/react'
1322
1323	export default function DeleteCategoryComponent() {
1324	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
1325	const mutation = useDeleteCategory();
1326
1327	// You can also pass in a `DataConnect` instance to the Mutation hook function.
1328	const dataConnect = getDataConnect(connectorConfig);
1329	const mutation = useDeleteCategory(dataConnect);
1330
1331	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
1332	const options = {
1333	onSuccess: () => { console.log('Mutation succeeded!'); }
1334	};
1335	const mutation = useDeleteCategory(options);
1336
1337	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
1338	const dataConnect = getDataConnect(connectorConfig);
1339	const options = {
1340	onSuccess: () => { console.log('Mutation succeeded!'); }
1341	};
1342	const mutation = useDeleteCategory(dataConnect, options);
1343
1344	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
1345	// The `useDeleteCategory` Mutation requires an argument of type `DeleteCategoryVariables`:
1346	const deleteCategoryVars: DeleteCategoryVariables = {
1347	id: ...,
1348	};
1349	mutation.mutate(deleteCategoryVars);
1350	// Variables can be defined inline as well.
1351	mutation.mutate({ id: ..., });
1352
1353	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
1354	const options = {
1355	onSuccess: () => { console.log('Mutation succeeded!'); }
1356	};
1357	mutation.mutate(deleteCategoryVars, options);
1358
1359	// Then, you can render your component dynamically based on the status of the Mutation.
1360	if (mutation.isPending) {
1361	return <div>Loading...</div>;
1362	}
1363
1364	if (mutation.isError) {
1365	return <div>Error: {mutation.error.message}</div>;
1366	}
1367
1368	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
1369	if (mutation.isSuccess) {
1370	console.log(mutation.data.category_delete);
1371	}
1372	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
1373	}
1374	```
1375
1376	## UpdateCategory
1377	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](./index.d.ts)):
1378	```javascript
1379	useUpdateCategory(options?: useDataConnectMutationOptions<UpdateCategoryData, FirebaseError, UpdateCategoryVariables>): UseDataConnectMutationResult<UpdateCategoryData, UpdateCategoryVariables>;
1380	```
1381	You can also pass in a `DataConnect` instance to the Mutation hook function.
1382	```javascript
1383	useUpdateCategory(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateCategoryData, FirebaseError, UpdateCategoryVariables>): UseDataConnectMutationResult<UpdateCategoryData, UpdateCategoryVariables>;
1384	```
1385
1386	### Variables
1387	The `UpdateCategory` Mutation requires an argument of type `UpdateCategoryVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
1388
1389	```javascript
1390	export interface UpdateCategoryVariables {
1391	id: UUIDString;
1392	name: string;
1393	}
1394	```
1395	### Return Type
1396	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.
1397
1398	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.
1399
1400	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
1401
1402	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](../index.d.ts). It has the following fields:
1403	```javascript
1404	export interface UpdateCategoryData {
1405	category_update?: Category_Key \| null;
1406	}
1407	```
1408
1409	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
1410
1411	### Using `UpdateCategory`'s Mutation hook function
1412
1413	```javascript
1414	import { getDataConnect } from 'firebase/data-connect';
1415	import { connectorConfig, UpdateCategoryVariables } from '@dataconnect/generated';
1416	import { useUpdateCategory } from '@dataconnect/generated/react'
1417
1418	export default function UpdateCategoryComponent() {
1419	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
1420	const mutation = useUpdateCategory();
1421
1422	// You can also pass in a `DataConnect` instance to the Mutation hook function.
1423	const dataConnect = getDataConnect(connectorConfig);
1424	const mutation = useUpdateCategory(dataConnect);
1425
1426	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
1427	const options = {
1428	onSuccess: () => { console.log('Mutation succeeded!'); }
1429	};
1430	const mutation = useUpdateCategory(options);
1431
1432	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
1433	const dataConnect = getDataConnect(connectorConfig);
1434	const options = {
1435	onSuccess: () => { console.log('Mutation succeeded!'); }
1436	};
1437	const mutation = useUpdateCategory(dataConnect, options);
1438
1439	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
1440	// The `useUpdateCategory` Mutation requires an argument of type `UpdateCategoryVariables`:
1441	const updateCategoryVars: UpdateCategoryVariables = {
1442	id: ...,
1443	name: ...,
1444	};
1445	mutation.mutate(updateCategoryVars);
1446	// Variables can be defined inline as well.
1447	mutation.mutate({ id: ..., name: ..., });
1448
1449	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
1450	const options = {
1451	onSuccess: () => { console.log('Mutation succeeded!'); }
1452	};
1453	mutation.mutate(updateCategoryVars, options);
1454
1455	// Then, you can render your component dynamically based on the status of the Mutation.
1456	if (mutation.isPending) {
1457	return <div>Loading...</div>;
1458	}
1459
1460	if (mutation.isError) {
1461	return <div>Error: {mutation.error.message}</div>;
1462	}
1463
1464	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
1465	if (mutation.isSuccess) {
1466	console.log(mutation.data.category_update);
1467	}
1468	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
1469	}
1470	```
1471
1472	## CreateDevice
1473	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](./index.d.ts)):
1474	```javascript
1475	useCreateDevice(options?: useDataConnectMutationOptions<CreateDeviceData, FirebaseError, void>): UseDataConnectMutationResult<CreateDeviceData, undefined>;
1476	```
1477	You can also pass in a `DataConnect` instance to the Mutation hook function.
1478	```javascript
1479	useCreateDevice(dc: DataConnect, options?: useDataConnectMutationOptions<CreateDeviceData, FirebaseError, void>): UseDataConnectMutationResult<CreateDeviceData, undefined>;
1480	```
1481
1482	### Variables
1483	The `CreateDevice` Mutation has no variables.
1484	### Return Type
1485	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.
1486
1487	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.
1488
1489	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
1490
1491	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](../index.d.ts). It has the following fields:
1492	```javascript
1493	export interface CreateDeviceData {
1494	device_insert: Device_Key;
1495	}
1496	```
1497
1498	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
1499
1500	### Using `CreateDevice`'s Mutation hook function
1501
1502	```javascript
1503	import { getDataConnect } from 'firebase/data-connect';
1504	import { connectorConfig } from '@dataconnect/generated';
1505	import { useCreateDevice } from '@dataconnect/generated/react'
1506
1507	export default function CreateDeviceComponent() {
1508	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
1509	const mutation = useCreateDevice();
1510
1511	// You can also pass in a `DataConnect` instance to the Mutation hook function.
1512	const dataConnect = getDataConnect(connectorConfig);
1513	const mutation = useCreateDevice(dataConnect);
1514
1515	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
1516	const options = {
1517	onSuccess: () => { console.log('Mutation succeeded!'); }
1518	};
1519	const mutation = useCreateDevice(options);
1520
1521	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
1522	const dataConnect = getDataConnect(connectorConfig);
1523	const options = {
1524	onSuccess: () => { console.log('Mutation succeeded!'); }
1525	};
1526	const mutation = useCreateDevice(dataConnect, options);
1527
1528	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
1529	mutation.mutate();
1530
1531	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
1532	// Since this Mutation accepts no variables, you must pass `undefined` where you would normally pass the variables.
1533	const options = {
1534	onSuccess: () => { console.log('Mutation succeeded!'); }
1535	};
1536	mutation.mutate(undefined, options);
1537
1538	// Then, you can render your component dynamically based on the status of the Mutation.
1539	if (mutation.isPending) {
1540	return <div>Loading...</div>;
1541	}
1542
1543	if (mutation.isError) {
1544	return <div>Error: {mutation.error.message}</div>;
1545	}
1546
1547	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
1548	if (mutation.isSuccess) {
1549	console.log(mutation.data.device_insert);
1550	}
1551	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
1552	}
1553	```
1554
1555	## UpsertDevice
1556	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](./index.d.ts)):
1557	```javascript
1558	useUpsertDevice(options?: useDataConnectMutationOptions<UpsertDeviceData, FirebaseError, UpsertDeviceVariables>): UseDataConnectMutationResult<UpsertDeviceData, UpsertDeviceVariables>;
1559	```
1560	You can also pass in a `DataConnect` instance to the Mutation hook function.
1561	```javascript
1562	useUpsertDevice(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertDeviceData, FirebaseError, UpsertDeviceVariables>): UseDataConnectMutationResult<UpsertDeviceData, UpsertDeviceVariables>;
1563	```
1564
1565	### Variables
1566	The `UpsertDevice` Mutation requires an argument of type `UpsertDeviceVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
1567
1568	```javascript
1569	export interface UpsertDeviceVariables {
1570	id: UUIDString;
1571	}
1572	```
1573	### Return Type
1574	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.
1575
1576	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.
1577
1578	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
1579
1580	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](../index.d.ts). It has the following fields:
1581	```javascript
1582	export interface UpsertDeviceData {
1583	device_upsert: Device_Key;
1584	}
1585	```
1586
1587	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
1588
1589	### Using `UpsertDevice`'s Mutation hook function
1590
1591	```javascript
1592	import { getDataConnect } from 'firebase/data-connect';
1593	import { connectorConfig, UpsertDeviceVariables } from '@dataconnect/generated';
1594	import { useUpsertDevice } from '@dataconnect/generated/react'
1595
1596	export default function UpsertDeviceComponent() {
1597	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
1598	const mutation = useUpsertDevice();
1599
1600	// You can also pass in a `DataConnect` instance to the Mutation hook function.
1601	const dataConnect = getDataConnect(connectorConfig);
1602	const mutation = useUpsertDevice(dataConnect);
1603
1604	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
1605	const options = {
1606	onSuccess: () => { console.log('Mutation succeeded!'); }
1607	};
1608	const mutation = useUpsertDevice(options);
1609
1610	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
1611	const dataConnect = getDataConnect(connectorConfig);
1612	const options = {
1613	onSuccess: () => { console.log('Mutation succeeded!'); }
1614	};
1615	const mutation = useUpsertDevice(dataConnect, options);
1616
1617	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
1618	// The `useUpsertDevice` Mutation requires an argument of type `UpsertDeviceVariables`:
1619	const upsertDeviceVars: UpsertDeviceVariables = {
1620	id: ...,
1621	};
1622	mutation.mutate(upsertDeviceVars);
1623	// Variables can be defined inline as well.
1624	mutation.mutate({ id: ..., });
1625
1626	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
1627	const options = {
1628	onSuccess: () => { console.log('Mutation succeeded!'); }
1629	};
1630	mutation.mutate(upsertDeviceVars, options);
1631
1632	// Then, you can render your component dynamically based on the status of the Mutation.
1633	if (mutation.isPending) {
1634	return <div>Loading...</div>;
1635	}
1636
1637	if (mutation.isError) {
1638	return <div>Error: {mutation.error.message}</div>;
1639	}
1640
1641	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
1642	if (mutation.isSuccess) {
1643	console.log(mutation.data.device_upsert);
1644	}
1645	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
1646	}
1647	```
1648
1649	## DeleteDevice
1650	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](./index.d.ts)):
1651	```javascript
1652	useDeleteDevice(options?: useDataConnectMutationOptions<DeleteDeviceData, FirebaseError, DeleteDeviceVariables>): UseDataConnectMutationResult<DeleteDeviceData, DeleteDeviceVariables>;
1653	```
1654	You can also pass in a `DataConnect` instance to the Mutation hook function.
1655	```javascript
1656	useDeleteDevice(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteDeviceData, FirebaseError, DeleteDeviceVariables>): UseDataConnectMutationResult<DeleteDeviceData, DeleteDeviceVariables>;
1657	```
1658
1659	### Variables
1660	The `DeleteDevice` Mutation requires an argument of type `DeleteDeviceVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
1661
1662	```javascript
1663	export interface DeleteDeviceVariables {
1664	id: UUIDString;
1665	}
1666	```
1667	### Return Type
1668	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.
1669
1670	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.
1671
1672	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
1673
1674	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](../index.d.ts). It has the following fields:
1675	```javascript
1676	export interface DeleteDeviceData {
1677	device_delete?: Device_Key \| null;
1678	}
1679	```
1680
1681	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
1682
1683	### Using `DeleteDevice`'s Mutation hook function
1684
1685	```javascript
1686	import { getDataConnect } from 'firebase/data-connect';
1687	import { connectorConfig, DeleteDeviceVariables } from '@dataconnect/generated';
1688	import { useDeleteDevice } from '@dataconnect/generated/react'
1689
1690	export default function DeleteDeviceComponent() {
1691	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
1692	const mutation = useDeleteDevice();
1693
1694	// You can also pass in a `DataConnect` instance to the Mutation hook function.
1695	const dataConnect = getDataConnect(connectorConfig);
1696	const mutation = useDeleteDevice(dataConnect);
1697
1698	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
1699	const options = {
1700	onSuccess: () => { console.log('Mutation succeeded!'); }
1701	};
1702	const mutation = useDeleteDevice(options);
1703
1704	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
1705	const dataConnect = getDataConnect(connectorConfig);
1706	const options = {
1707	onSuccess: () => { console.log('Mutation succeeded!'); }
1708	};
1709	const mutation = useDeleteDevice(dataConnect, options);
1710
1711	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
1712	// The `useDeleteDevice` Mutation requires an argument of type `DeleteDeviceVariables`:
1713	const deleteDeviceVars: DeleteDeviceVariables = {
1714	id: ...,
1715	};
1716	mutation.mutate(deleteDeviceVars);
1717	// Variables can be defined inline as well.
1718	mutation.mutate({ id: ..., });
1719
1720	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
1721	const options = {
1722	onSuccess: () => { console.log('Mutation succeeded!'); }
1723	};
1724	mutation.mutate(deleteDeviceVars, options);
1725
1726	// Then, you can render your component dynamically based on the status of the Mutation.
1727	if (mutation.isPending) {
1728	return <div>Loading...</div>;
1729	}
1730
1731	if (mutation.isError) {
1732	return <div>Error: {mutation.error.message}</div>;
1733	}
1734
1735	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
1736	if (mutation.isSuccess) {
1737	console.log(mutation.data.device_delete);
1738	}
1739	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
1740	}
1741	```
1742
1743	## UpdateDevice
1744	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](./index.d.ts)):
1745	```javascript
1746	useUpdateDevice(options?: useDataConnectMutationOptions<UpdateDeviceData, FirebaseError, UpdateDeviceVariables>): UseDataConnectMutationResult<UpdateDeviceData, UpdateDeviceVariables>;
1747	```
1748	You can also pass in a `DataConnect` instance to the Mutation hook function.
1749	```javascript
1750	useUpdateDevice(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateDeviceData, FirebaseError, UpdateDeviceVariables>): UseDataConnectMutationResult<UpdateDeviceData, UpdateDeviceVariables>;
1751	```
1752
1753	### Variables
1754	The `UpdateDevice` Mutation requires an argument of type `UpdateDeviceVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
1755
1756	```javascript
1757	export interface UpdateDeviceVariables {
1758	id: UUIDString;
1759	modelName: string;
1760	}
1761	```
1762	### Return Type
1763	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.
1764
1765	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.
1766
1767	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
1768
1769	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](../index.d.ts). It has the following fields:
1770	```javascript
1771	export interface UpdateDeviceData {
1772	device_update?: Device_Key \| null;
1773	}
1774	```
1775
1776	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
1777
1778	### Using `UpdateDevice`'s Mutation hook function
1779
1780	```javascript
1781	import { getDataConnect } from 'firebase/data-connect';
1782	import { connectorConfig, UpdateDeviceVariables } from '@dataconnect/generated';
1783	import { useUpdateDevice } from '@dataconnect/generated/react'
1784
1785	export default function UpdateDeviceComponent() {
1786	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
1787	const mutation = useUpdateDevice();
1788
1789	// You can also pass in a `DataConnect` instance to the Mutation hook function.
1790	const dataConnect = getDataConnect(connectorConfig);
1791	const mutation = useUpdateDevice(dataConnect);
1792
1793	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
1794	const options = {
1795	onSuccess: () => { console.log('Mutation succeeded!'); }
1796	};
1797	const mutation = useUpdateDevice(options);
1798
1799	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
1800	const dataConnect = getDataConnect(connectorConfig);
1801	const options = {
1802	onSuccess: () => { console.log('Mutation succeeded!'); }
1803	};
1804	const mutation = useUpdateDevice(dataConnect, options);
1805
1806	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
1807	// The `useUpdateDevice` Mutation requires an argument of type `UpdateDeviceVariables`:
1808	const updateDeviceVars: UpdateDeviceVariables = {
1809	id: ...,
1810	modelName: ...,
1811	};
1812	mutation.mutate(updateDeviceVars);
1813	// Variables can be defined inline as well.
1814	mutation.mutate({ id: ..., modelName: ..., });
1815
1816	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
1817	const options = {
1818	onSuccess: () => { console.log('Mutation succeeded!'); }
1819	};
1820	mutation.mutate(updateDeviceVars, options);
1821
1822	// Then, you can render your component dynamically based on the status of the Mutation.
1823	if (mutation.isPending) {
1824	return <div>Loading...</div>;
1825	}
1826
1827	if (mutation.isError) {
1828	return <div>Error: {mutation.error.message}</div>;
1829	}
1830
1831	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
1832	if (mutation.isSuccess) {
1833	console.log(mutation.data.device_update);
1834	}
1835	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
1836	}
1837	```
1838
1839	## CreateGuide
1840	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](./index.d.ts)):
1841	```javascript
1842	useCreateGuide(options?: useDataConnectMutationOptions<CreateGuideData, FirebaseError, CreateGuideVariables>): UseDataConnectMutationResult<CreateGuideData, CreateGuideVariables>;
1843	```
1844	You can also pass in a `DataConnect` instance to the Mutation hook function.
1845	```javascript
1846	useCreateGuide(dc: DataConnect, options?: useDataConnectMutationOptions<CreateGuideData, FirebaseError, CreateGuideVariables>): UseDataConnectMutationResult<CreateGuideData, CreateGuideVariables>;
1847	```
1848
1849	### Variables
1850	The `CreateGuide` Mutation requires an argument of type `CreateGuideVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
1851
1852	```javascript
1853	export interface CreateGuideVariables {
1854	title: string;
1855	difficulty: string;
1856	time: number;
1857	}
1858	```
1859	### Return Type
1860	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.
1861
1862	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.
1863
1864	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
1865
1866	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](../index.d.ts). It has the following fields:
1867	```javascript
1868	export interface CreateGuideData {
1869	guide_insert: Guide_Key;
1870	}
1871	```
1872
1873	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
1874
1875	### Using `CreateGuide`'s Mutation hook function
1876
1877	```javascript
1878	import { getDataConnect } from 'firebase/data-connect';
1879	import { connectorConfig, CreateGuideVariables } from '@dataconnect/generated';
1880	import { useCreateGuide } from '@dataconnect/generated/react'
1881
1882	export default function CreateGuideComponent() {
1883	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
1884	const mutation = useCreateGuide();
1885
1886	// You can also pass in a `DataConnect` instance to the Mutation hook function.
1887	const dataConnect = getDataConnect(connectorConfig);
1888	const mutation = useCreateGuide(dataConnect);
1889
1890	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
1891	const options = {
1892	onSuccess: () => { console.log('Mutation succeeded!'); }
1893	};
1894	const mutation = useCreateGuide(options);
1895
1896	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
1897	const dataConnect = getDataConnect(connectorConfig);
1898	const options = {
1899	onSuccess: () => { console.log('Mutation succeeded!'); }
1900	};
1901	const mutation = useCreateGuide(dataConnect, options);
1902
1903	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
1904	// The `useCreateGuide` Mutation requires an argument of type `CreateGuideVariables`:
1905	const createGuideVars: CreateGuideVariables = {
1906	title: ...,
1907	difficulty: ...,
1908	time: ...,
1909	};
1910	mutation.mutate(createGuideVars);
1911	// Variables can be defined inline as well.
1912	mutation.mutate({ title: ..., difficulty: ..., time: ..., });
1913
1914	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
1915	const options = {
1916	onSuccess: () => { console.log('Mutation succeeded!'); }
1917	};
1918	mutation.mutate(createGuideVars, options);
1919
1920	// Then, you can render your component dynamically based on the status of the Mutation.
1921	if (mutation.isPending) {
1922	return <div>Loading...</div>;
1923	}
1924
1925	if (mutation.isError) {
1926	return <div>Error: {mutation.error.message}</div>;
1927	}
1928
1929	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
1930	if (mutation.isSuccess) {
1931	console.log(mutation.data.guide_insert);
1932	}
1933	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
1934	}
1935	```
1936
1937	## UpsertGuide
1938	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](./index.d.ts)):
1939	```javascript
1940	useUpsertGuide(options?: useDataConnectMutationOptions<UpsertGuideData, FirebaseError, UpsertGuideVariables>): UseDataConnectMutationResult<UpsertGuideData, UpsertGuideVariables>;
1941	```
1942	You can also pass in a `DataConnect` instance to the Mutation hook function.
1943	```javascript
1944	useUpsertGuide(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertGuideData, FirebaseError, UpsertGuideVariables>): UseDataConnectMutationResult<UpsertGuideData, UpsertGuideVariables>;
1945	```
1946
1947	### Variables
1948	The `UpsertGuide` Mutation requires an argument of type `UpsertGuideVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
1949
1950	```javascript
1951	export interface UpsertGuideVariables {
1952	id: UUIDString;
1953	title: string;
1954	difficulty: string;
1955	time: number;
1956	}
1957	```
1958	### Return Type
1959	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.
1960
1961	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.
1962
1963	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
1964
1965	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](../index.d.ts). It has the following fields:
1966	```javascript
1967	export interface UpsertGuideData {
1968	guide_upsert: Guide_Key;
1969	}
1970	```
1971
1972	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
1973
1974	### Using `UpsertGuide`'s Mutation hook function
1975
1976	```javascript
1977	import { getDataConnect } from 'firebase/data-connect';
1978	import { connectorConfig, UpsertGuideVariables } from '@dataconnect/generated';
1979	import { useUpsertGuide } from '@dataconnect/generated/react'
1980
1981	export default function UpsertGuideComponent() {
1982	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
1983	const mutation = useUpsertGuide();
1984
1985	// You can also pass in a `DataConnect` instance to the Mutation hook function.
1986	const dataConnect = getDataConnect(connectorConfig);
1987	const mutation = useUpsertGuide(dataConnect);
1988
1989	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
1990	const options = {
1991	onSuccess: () => { console.log('Mutation succeeded!'); }
1992	};
1993	const mutation = useUpsertGuide(options);
1994
1995	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
1996	const dataConnect = getDataConnect(connectorConfig);
1997	const options = {
1998	onSuccess: () => { console.log('Mutation succeeded!'); }
1999	};
2000	const mutation = useUpsertGuide(dataConnect, options);
2001
2002	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
2003	// The `useUpsertGuide` Mutation requires an argument of type `UpsertGuideVariables`:
2004	const upsertGuideVars: UpsertGuideVariables = {
2005	id: ...,
2006	title: ...,
2007	difficulty: ...,
2008	time: ...,
2009	};
2010	mutation.mutate(upsertGuideVars);
2011	// Variables can be defined inline as well.
2012	mutation.mutate({ id: ..., title: ..., difficulty: ..., time: ..., });
2013
2014	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
2015	const options = {
2016	onSuccess: () => { console.log('Mutation succeeded!'); }
2017	};
2018	mutation.mutate(upsertGuideVars, options);
2019
2020	// Then, you can render your component dynamically based on the status of the Mutation.
2021	if (mutation.isPending) {
2022	return <div>Loading...</div>;
2023	}
2024
2025	if (mutation.isError) {
2026	return <div>Error: {mutation.error.message}</div>;
2027	}
2028
2029	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
2030	if (mutation.isSuccess) {
2031	console.log(mutation.data.guide_upsert);
2032	}
2033	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
2034	}
2035	```
2036
2037	## DeleteGuide
2038	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](./index.d.ts)):
2039	```javascript
2040	useDeleteGuide(options?: useDataConnectMutationOptions<DeleteGuideData, FirebaseError, DeleteGuideVariables>): UseDataConnectMutationResult<DeleteGuideData, DeleteGuideVariables>;
2041	```
2042	You can also pass in a `DataConnect` instance to the Mutation hook function.
2043	```javascript
2044	useDeleteGuide(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteGuideData, FirebaseError, DeleteGuideVariables>): UseDataConnectMutationResult<DeleteGuideData, DeleteGuideVariables>;
2045	```
2046
2047	### Variables
2048	The `DeleteGuide` Mutation requires an argument of type `DeleteGuideVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
2049
2050	```javascript
2051	export interface DeleteGuideVariables {
2052	id: UUIDString;
2053	}
2054	```
2055	### Return Type
2056	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.
2057
2058	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.
2059
2060	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
2061
2062	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](../index.d.ts). It has the following fields:
2063	```javascript
2064	export interface DeleteGuideData {
2065	guide_delete?: Guide_Key \| null;
2066	}
2067	```
2068
2069	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
2070
2071	### Using `DeleteGuide`'s Mutation hook function
2072
2073	```javascript
2074	import { getDataConnect } from 'firebase/data-connect';
2075	import { connectorConfig, DeleteGuideVariables } from '@dataconnect/generated';
2076	import { useDeleteGuide } from '@dataconnect/generated/react'
2077
2078	export default function DeleteGuideComponent() {
2079	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
2080	const mutation = useDeleteGuide();
2081
2082	// You can also pass in a `DataConnect` instance to the Mutation hook function.
2083	const dataConnect = getDataConnect(connectorConfig);
2084	const mutation = useDeleteGuide(dataConnect);
2085
2086	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
2087	const options = {
2088	onSuccess: () => { console.log('Mutation succeeded!'); }
2089	};
2090	const mutation = useDeleteGuide(options);
2091
2092	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
2093	const dataConnect = getDataConnect(connectorConfig);
2094	const options = {
2095	onSuccess: () => { console.log('Mutation succeeded!'); }
2096	};
2097	const mutation = useDeleteGuide(dataConnect, options);
2098
2099	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
2100	// The `useDeleteGuide` Mutation requires an argument of type `DeleteGuideVariables`:
2101	const deleteGuideVars: DeleteGuideVariables = {
2102	id: ...,
2103	};
2104	mutation.mutate(deleteGuideVars);
2105	// Variables can be defined inline as well.
2106	mutation.mutate({ id: ..., });
2107
2108	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
2109	const options = {
2110	onSuccess: () => { console.log('Mutation succeeded!'); }
2111	};
2112	mutation.mutate(deleteGuideVars, options);
2113
2114	// Then, you can render your component dynamically based on the status of the Mutation.
2115	if (mutation.isPending) {
2116	return <div>Loading...</div>;
2117	}
2118
2119	if (mutation.isError) {
2120	return <div>Error: {mutation.error.message}</div>;
2121	}
2122
2123	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
2124	if (mutation.isSuccess) {
2125	console.log(mutation.data.guide_delete);
2126	}
2127	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
2128	}
2129	```
2130
2131	## UpdateGuide
2132	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](./index.d.ts)):
2133	```javascript
2134	useUpdateGuide(options?: useDataConnectMutationOptions<UpdateGuideData, FirebaseError, UpdateGuideVariables>): UseDataConnectMutationResult<UpdateGuideData, UpdateGuideVariables>;
2135	```
2136	You can also pass in a `DataConnect` instance to the Mutation hook function.
2137	```javascript
2138	useUpdateGuide(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateGuideData, FirebaseError, UpdateGuideVariables>): UseDataConnectMutationResult<UpdateGuideData, UpdateGuideVariables>;
2139	```
2140
2141	### Variables
2142	The `UpdateGuide` Mutation requires an argument of type `UpdateGuideVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
2143
2144	```javascript
2145	export interface UpdateGuideVariables {
2146	id: UUIDString;
2147	time: number;
2148	}
2149	```
2150	### Return Type
2151	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.
2152
2153	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.
2154
2155	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
2156
2157	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](../index.d.ts). It has the following fields:
2158	```javascript
2159	export interface UpdateGuideData {
2160	guide_update?: Guide_Key \| null;
2161	}
2162	```
2163
2164	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
2165
2166	### Using `UpdateGuide`'s Mutation hook function
2167
2168	```javascript
2169	import { getDataConnect } from 'firebase/data-connect';
2170	import { connectorConfig, UpdateGuideVariables } from '@dataconnect/generated';
2171	import { useUpdateGuide } from '@dataconnect/generated/react'
2172
2173	export default function UpdateGuideComponent() {
2174	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
2175	const mutation = useUpdateGuide();
2176
2177	// You can also pass in a `DataConnect` instance to the Mutation hook function.
2178	const dataConnect = getDataConnect(connectorConfig);
2179	const mutation = useUpdateGuide(dataConnect);
2180
2181	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
2182	const options = {
2183	onSuccess: () => { console.log('Mutation succeeded!'); }
2184	};
2185	const mutation = useUpdateGuide(options);
2186
2187	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
2188	const dataConnect = getDataConnect(connectorConfig);
2189	const options = {
2190	onSuccess: () => { console.log('Mutation succeeded!'); }
2191	};
2192	const mutation = useUpdateGuide(dataConnect, options);
2193
2194	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
2195	// The `useUpdateGuide` Mutation requires an argument of type `UpdateGuideVariables`:
2196	const updateGuideVars: UpdateGuideVariables = {
2197	id: ...,
2198	time: ...,
2199	};
2200	mutation.mutate(updateGuideVars);
2201	// Variables can be defined inline as well.
2202	mutation.mutate({ id: ..., time: ..., });
2203
2204	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
2205	const options = {
2206	onSuccess: () => { console.log('Mutation succeeded!'); }
2207	};
2208	mutation.mutate(updateGuideVars, options);
2209
2210	// Then, you can render your component dynamically based on the status of the Mutation.
2211	if (mutation.isPending) {
2212	return <div>Loading...</div>;
2213	}
2214
2215	if (mutation.isError) {
2216	return <div>Error: {mutation.error.message}</div>;
2217	}
2218
2219	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
2220	if (mutation.isSuccess) {
2221	console.log(mutation.data.guide_update);
2222	}
2223	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
2224	}
2225	```
2226
2227	## CreatePart
2228	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](./index.d.ts)):
2229	```javascript
2230	useCreatePart(options?: useDataConnectMutationOptions<CreatePartData, FirebaseError, CreatePartVariables>): UseDataConnectMutationResult<CreatePartData, CreatePartVariables>;
2231	```
2232	You can also pass in a `DataConnect` instance to the Mutation hook function.
2233	```javascript
2234	useCreatePart(dc: DataConnect, options?: useDataConnectMutationOptions<CreatePartData, FirebaseError, CreatePartVariables>): UseDataConnectMutationResult<CreatePartData, CreatePartVariables>;
2235	```
2236
2237	### Variables
2238	The `CreatePart` Mutation requires an argument of type `CreatePartVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
2239
2240	```javascript
2241	export interface CreatePartVariables {
2242	name: string;
2243	type: string;
2244	devId: UUIDString;
2245	}
2246	```
2247	### Return Type
2248	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.
2249
2250	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.
2251
2252	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
2253
2254	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](../index.d.ts). It has the following fields:
2255	```javascript
2256	export interface CreatePartData {
2257	part_insert: Part_Key;
2258	}
2259	```
2260
2261	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
2262
2263	### Using `CreatePart`'s Mutation hook function
2264
2265	```javascript
2266	import { getDataConnect } from 'firebase/data-connect';
2267	import { connectorConfig, CreatePartVariables } from '@dataconnect/generated';
2268	import { useCreatePart } from '@dataconnect/generated/react'
2269
2270	export default function CreatePartComponent() {
2271	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
2272	const mutation = useCreatePart();
2273
2274	// You can also pass in a `DataConnect` instance to the Mutation hook function.
2275	const dataConnect = getDataConnect(connectorConfig);
2276	const mutation = useCreatePart(dataConnect);
2277
2278	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
2279	const options = {
2280	onSuccess: () => { console.log('Mutation succeeded!'); }
2281	};
2282	const mutation = useCreatePart(options);
2283
2284	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
2285	const dataConnect = getDataConnect(connectorConfig);
2286	const options = {
2287	onSuccess: () => { console.log('Mutation succeeded!'); }
2288	};
2289	const mutation = useCreatePart(dataConnect, options);
2290
2291	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
2292	// The `useCreatePart` Mutation requires an argument of type `CreatePartVariables`:
2293	const createPartVars: CreatePartVariables = {
2294	name: ...,
2295	type: ...,
2296	devId: ...,
2297	};
2298	mutation.mutate(createPartVars);
2299	// Variables can be defined inline as well.
2300	mutation.mutate({ name: ..., type: ..., devId: ..., });
2301
2302	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
2303	const options = {
2304	onSuccess: () => { console.log('Mutation succeeded!'); }
2305	};
2306	mutation.mutate(createPartVars, options);
2307
2308	// Then, you can render your component dynamically based on the status of the Mutation.
2309	if (mutation.isPending) {
2310	return <div>Loading...</div>;
2311	}
2312
2313	if (mutation.isError) {
2314	return <div>Error: {mutation.error.message}</div>;
2315	}
2316
2317	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
2318	if (mutation.isSuccess) {
2319	console.log(mutation.data.part_insert);
2320	}
2321	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
2322	}
2323	```
2324
2325	## UpsertPart
2326	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](./index.d.ts)):
2327	```javascript
2328	useUpsertPart(options?: useDataConnectMutationOptions<UpsertPartData, FirebaseError, UpsertPartVariables>): UseDataConnectMutationResult<UpsertPartData, UpsertPartVariables>;
2329	```
2330	You can also pass in a `DataConnect` instance to the Mutation hook function.
2331	```javascript
2332	useUpsertPart(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertPartData, FirebaseError, UpsertPartVariables>): UseDataConnectMutationResult<UpsertPartData, UpsertPartVariables>;
2333	```
2334
2335	### Variables
2336	The `UpsertPart` Mutation requires an argument of type `UpsertPartVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
2337
2338	```javascript
2339	export interface UpsertPartVariables {
2340	id: UUIDString;
2341	name: string;
2342	type: string;
2343	devId: UUIDString;
2344	}
2345	```
2346	### Return Type
2347	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.
2348
2349	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.
2350
2351	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
2352
2353	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](../index.d.ts). It has the following fields:
2354	```javascript
2355	export interface UpsertPartData {
2356	part_upsert: Part_Key;
2357	}
2358	```
2359
2360	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
2361
2362	### Using `UpsertPart`'s Mutation hook function
2363
2364	```javascript
2365	import { getDataConnect } from 'firebase/data-connect';
2366	import { connectorConfig, UpsertPartVariables } from '@dataconnect/generated';
2367	import { useUpsertPart } from '@dataconnect/generated/react'
2368
2369	export default function UpsertPartComponent() {
2370	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
2371	const mutation = useUpsertPart();
2372
2373	// You can also pass in a `DataConnect` instance to the Mutation hook function.
2374	const dataConnect = getDataConnect(connectorConfig);
2375	const mutation = useUpsertPart(dataConnect);
2376
2377	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
2378	const options = {
2379	onSuccess: () => { console.log('Mutation succeeded!'); }
2380	};
2381	const mutation = useUpsertPart(options);
2382
2383	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
2384	const dataConnect = getDataConnect(connectorConfig);
2385	const options = {
2386	onSuccess: () => { console.log('Mutation succeeded!'); }
2387	};
2388	const mutation = useUpsertPart(dataConnect, options);
2389
2390	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
2391	// The `useUpsertPart` Mutation requires an argument of type `UpsertPartVariables`:
2392	const upsertPartVars: UpsertPartVariables = {
2393	id: ...,
2394	name: ...,
2395	type: ...,
2396	devId: ...,
2397	};
2398	mutation.mutate(upsertPartVars);
2399	// Variables can be defined inline as well.
2400	mutation.mutate({ id: ..., name: ..., type: ..., devId: ..., });
2401
2402	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
2403	const options = {
2404	onSuccess: () => { console.log('Mutation succeeded!'); }
2405	};
2406	mutation.mutate(upsertPartVars, options);
2407
2408	// Then, you can render your component dynamically based on the status of the Mutation.
2409	if (mutation.isPending) {
2410	return <div>Loading...</div>;
2411	}
2412
2413	if (mutation.isError) {
2414	return <div>Error: {mutation.error.message}</div>;
2415	}
2416
2417	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
2418	if (mutation.isSuccess) {
2419	console.log(mutation.data.part_upsert);
2420	}
2421	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
2422	}
2423	```
2424
2425	## DeletePart
2426	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](./index.d.ts)):
2427	```javascript
2428	useDeletePart(options?: useDataConnectMutationOptions<DeletePartData, FirebaseError, DeletePartVariables>): UseDataConnectMutationResult<DeletePartData, DeletePartVariables>;
2429	```
2430	You can also pass in a `DataConnect` instance to the Mutation hook function.
2431	```javascript
2432	useDeletePart(dc: DataConnect, options?: useDataConnectMutationOptions<DeletePartData, FirebaseError, DeletePartVariables>): UseDataConnectMutationResult<DeletePartData, DeletePartVariables>;
2433	```
2434
2435	### Variables
2436	The `DeletePart` Mutation requires an argument of type `DeletePartVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
2437
2438	```javascript
2439	export interface DeletePartVariables {
2440	id: UUIDString;
2441	}
2442	```
2443	### Return Type
2444	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.
2445
2446	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.
2447
2448	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
2449
2450	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](../index.d.ts). It has the following fields:
2451	```javascript
2452	export interface DeletePartData {
2453	part_delete?: Part_Key \| null;
2454	}
2455	```
2456
2457	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
2458
2459	### Using `DeletePart`'s Mutation hook function
2460
2461	```javascript
2462	import { getDataConnect } from 'firebase/data-connect';
2463	import { connectorConfig, DeletePartVariables } from '@dataconnect/generated';
2464	import { useDeletePart } from '@dataconnect/generated/react'
2465
2466	export default function DeletePartComponent() {
2467	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
2468	const mutation = useDeletePart();
2469
2470	// You can also pass in a `DataConnect` instance to the Mutation hook function.
2471	const dataConnect = getDataConnect(connectorConfig);
2472	const mutation = useDeletePart(dataConnect);
2473
2474	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
2475	const options = {
2476	onSuccess: () => { console.log('Mutation succeeded!'); }
2477	};
2478	const mutation = useDeletePart(options);
2479
2480	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
2481	const dataConnect = getDataConnect(connectorConfig);
2482	const options = {
2483	onSuccess: () => { console.log('Mutation succeeded!'); }
2484	};
2485	const mutation = useDeletePart(dataConnect, options);
2486
2487	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
2488	// The `useDeletePart` Mutation requires an argument of type `DeletePartVariables`:
2489	const deletePartVars: DeletePartVariables = {
2490	id: ...,
2491	};
2492	mutation.mutate(deletePartVars);
2493	// Variables can be defined inline as well.
2494	mutation.mutate({ id: ..., });
2495
2496	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
2497	const options = {
2498	onSuccess: () => { console.log('Mutation succeeded!'); }
2499	};
2500	mutation.mutate(deletePartVars, options);
2501
2502	// Then, you can render your component dynamically based on the status of the Mutation.
2503	if (mutation.isPending) {
2504	return <div>Loading...</div>;
2505	}
2506
2507	if (mutation.isError) {
2508	return <div>Error: {mutation.error.message}</div>;
2509	}
2510
2511	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
2512	if (mutation.isSuccess) {
2513	console.log(mutation.data.part_delete);
2514	}
2515	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
2516	}
2517	```
2518
2519	## UpdatePart
2520	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](./index.d.ts)):
2521	```javascript
2522	useUpdatePart(options?: useDataConnectMutationOptions<UpdatePartData, FirebaseError, UpdatePartVariables>): UseDataConnectMutationResult<UpdatePartData, UpdatePartVariables>;
2523	```
2524	You can also pass in a `DataConnect` instance to the Mutation hook function.
2525	```javascript
2526	useUpdatePart(dc: DataConnect, options?: useDataConnectMutationOptions<UpdatePartData, FirebaseError, UpdatePartVariables>): UseDataConnectMutationResult<UpdatePartData, UpdatePartVariables>;
2527	```
2528
2529	### Variables
2530	The `UpdatePart` Mutation requires an argument of type `UpdatePartVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
2531
2532	```javascript
2533	export interface UpdatePartVariables {
2534	id: UUIDString;
2535	notes: string;
2536	}
2537	```
2538	### Return Type
2539	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.
2540
2541	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.
2542
2543	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
2544
2545	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](../index.d.ts). It has the following fields:
2546	```javascript
2547	export interface UpdatePartData {
2548	part_update?: Part_Key \| null;
2549	}
2550	```
2551
2552	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
2553
2554	### Using `UpdatePart`'s Mutation hook function
2555
2556	```javascript
2557	import { getDataConnect } from 'firebase/data-connect';
2558	import { connectorConfig, UpdatePartVariables } from '@dataconnect/generated';
2559	import { useUpdatePart } from '@dataconnect/generated/react'
2560
2561	export default function UpdatePartComponent() {
2562	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
2563	const mutation = useUpdatePart();
2564
2565	// You can also pass in a `DataConnect` instance to the Mutation hook function.
2566	const dataConnect = getDataConnect(connectorConfig);
2567	const mutation = useUpdatePart(dataConnect);
2568
2569	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
2570	const options = {
2571	onSuccess: () => { console.log('Mutation succeeded!'); }
2572	};
2573	const mutation = useUpdatePart(options);
2574
2575	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
2576	const dataConnect = getDataConnect(connectorConfig);
2577	const options = {
2578	onSuccess: () => { console.log('Mutation succeeded!'); }
2579	};
2580	const mutation = useUpdatePart(dataConnect, options);
2581
2582	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
2583	// The `useUpdatePart` Mutation requires an argument of type `UpdatePartVariables`:
2584	const updatePartVars: UpdatePartVariables = {
2585	id: ...,
2586	notes: ...,
2587	};
2588	mutation.mutate(updatePartVars);
2589	// Variables can be defined inline as well.
2590	mutation.mutate({ id: ..., notes: ..., });
2591
2592	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
2593	const options = {
2594	onSuccess: () => { console.log('Mutation succeeded!'); }
2595	};
2596	mutation.mutate(updatePartVars, options);
2597
2598	// Then, you can render your component dynamically based on the status of the Mutation.
2599	if (mutation.isPending) {
2600	return <div>Loading...</div>;
2601	}
2602
2603	if (mutation.isError) {
2604	return <div>Error: {mutation.error.message}</div>;
2605	}
2606
2607	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
2608	if (mutation.isSuccess) {
2609	console.log(mutation.data.part_update);
2610	}
2611	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
2612	}
2613	```
2614
2615	## CreateStep
2616	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](./index.d.ts)):
2617	```javascript
2618	useCreateStep(options?: useDataConnectMutationOptions<CreateStepData, FirebaseError, CreateStepVariables>): UseDataConnectMutationResult<CreateStepData, CreateStepVariables>;
2619	```
2620	You can also pass in a `DataConnect` instance to the Mutation hook function.
2621	```javascript
2622	useCreateStep(dc: DataConnect, options?: useDataConnectMutationOptions<CreateStepData, FirebaseError, CreateStepVariables>): UseDataConnectMutationResult<CreateStepData, CreateStepVariables>;
2623	```
2624
2625	### Variables
2626	The `CreateStep` Mutation requires an argument of type `CreateStepVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
2627
2628	```javascript
2629	export interface CreateStepVariables {
2630	order: number;
2631	text: string;
2632	guideId: UUIDString;
2633	}
2634	```
2635	### Return Type
2636	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.
2637
2638	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.
2639
2640	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
2641
2642	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](../index.d.ts). It has the following fields:
2643	```javascript
2644	export interface CreateStepData {
2645	step_insert: Step_Key;
2646	}
2647	```
2648
2649	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
2650
2651	### Using `CreateStep`'s Mutation hook function
2652
2653	```javascript
2654	import { getDataConnect } from 'firebase/data-connect';
2655	import { connectorConfig, CreateStepVariables } from '@dataconnect/generated';
2656	import { useCreateStep } from '@dataconnect/generated/react'
2657
2658	export default function CreateStepComponent() {
2659	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
2660	const mutation = useCreateStep();
2661
2662	// You can also pass in a `DataConnect` instance to the Mutation hook function.
2663	const dataConnect = getDataConnect(connectorConfig);
2664	const mutation = useCreateStep(dataConnect);
2665
2666	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
2667	const options = {
2668	onSuccess: () => { console.log('Mutation succeeded!'); }
2669	};
2670	const mutation = useCreateStep(options);
2671
2672	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
2673	const dataConnect = getDataConnect(connectorConfig);
2674	const options = {
2675	onSuccess: () => { console.log('Mutation succeeded!'); }
2676	};
2677	const mutation = useCreateStep(dataConnect, options);
2678
2679	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
2680	// The `useCreateStep` Mutation requires an argument of type `CreateStepVariables`:
2681	const createStepVars: CreateStepVariables = {
2682	order: ...,
2683	text: ...,
2684	guideId: ...,
2685	};
2686	mutation.mutate(createStepVars);
2687	// Variables can be defined inline as well.
2688	mutation.mutate({ order: ..., text: ..., guideId: ..., });
2689
2690	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
2691	const options = {
2692	onSuccess: () => { console.log('Mutation succeeded!'); }
2693	};
2694	mutation.mutate(createStepVars, options);
2695
2696	// Then, you can render your component dynamically based on the status of the Mutation.
2697	if (mutation.isPending) {
2698	return <div>Loading...</div>;
2699	}
2700
2701	if (mutation.isError) {
2702	return <div>Error: {mutation.error.message}</div>;
2703	}
2704
2705	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
2706	if (mutation.isSuccess) {
2707	console.log(mutation.data.step_insert);
2708	}
2709	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
2710	}
2711	```
2712
2713	## UpsertStep
2714	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](./index.d.ts)):
2715	```javascript
2716	useUpsertStep(options?: useDataConnectMutationOptions<UpsertStepData, FirebaseError, UpsertStepVariables>): UseDataConnectMutationResult<UpsertStepData, UpsertStepVariables>;
2717	```
2718	You can also pass in a `DataConnect` instance to the Mutation hook function.
2719	```javascript
2720	useUpsertStep(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertStepData, FirebaseError, UpsertStepVariables>): UseDataConnectMutationResult<UpsertStepData, UpsertStepVariables>;
2721	```
2722
2723	### Variables
2724	The `UpsertStep` Mutation requires an argument of type `UpsertStepVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
2725
2726	```javascript
2727	export interface UpsertStepVariables {
2728	id: UUIDString;
2729	order: number;
2730	text: string;
2731	guideId: UUIDString;
2732	}
2733	```
2734	### Return Type
2735	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.
2736
2737	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.
2738
2739	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
2740
2741	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](../index.d.ts). It has the following fields:
2742	```javascript
2743	export interface UpsertStepData {
2744	step_upsert: Step_Key;
2745	}
2746	```
2747
2748	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
2749
2750	### Using `UpsertStep`'s Mutation hook function
2751
2752	```javascript
2753	import { getDataConnect } from 'firebase/data-connect';
2754	import { connectorConfig, UpsertStepVariables } from '@dataconnect/generated';
2755	import { useUpsertStep } from '@dataconnect/generated/react'
2756
2757	export default function UpsertStepComponent() {
2758	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
2759	const mutation = useUpsertStep();
2760
2761	// You can also pass in a `DataConnect` instance to the Mutation hook function.
2762	const dataConnect = getDataConnect(connectorConfig);
2763	const mutation = useUpsertStep(dataConnect);
2764
2765	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
2766	const options = {
2767	onSuccess: () => { console.log('Mutation succeeded!'); }
2768	};
2769	const mutation = useUpsertStep(options);
2770
2771	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
2772	const dataConnect = getDataConnect(connectorConfig);
2773	const options = {
2774	onSuccess: () => { console.log('Mutation succeeded!'); }
2775	};
2776	const mutation = useUpsertStep(dataConnect, options);
2777
2778	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
2779	// The `useUpsertStep` Mutation requires an argument of type `UpsertStepVariables`:
2780	const upsertStepVars: UpsertStepVariables = {
2781	id: ...,
2782	order: ...,
2783	text: ...,
2784	guideId: ...,
2785	};
2786	mutation.mutate(upsertStepVars);
2787	// Variables can be defined inline as well.
2788	mutation.mutate({ id: ..., order: ..., text: ..., guideId: ..., });
2789
2790	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
2791	const options = {
2792	onSuccess: () => { console.log('Mutation succeeded!'); }
2793	};
2794	mutation.mutate(upsertStepVars, options);
2795
2796	// Then, you can render your component dynamically based on the status of the Mutation.
2797	if (mutation.isPending) {
2798	return <div>Loading...</div>;
2799	}
2800
2801	if (mutation.isError) {
2802	return <div>Error: {mutation.error.message}</div>;
2803	}
2804
2805	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
2806	if (mutation.isSuccess) {
2807	console.log(mutation.data.step_upsert);
2808	}
2809	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
2810	}
2811	```
2812
2813	## DeleteStep
2814	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](./index.d.ts)):
2815	```javascript
2816	useDeleteStep(options?: useDataConnectMutationOptions<DeleteStepData, FirebaseError, DeleteStepVariables>): UseDataConnectMutationResult<DeleteStepData, DeleteStepVariables>;
2817	```
2818	You can also pass in a `DataConnect` instance to the Mutation hook function.
2819	```javascript
2820	useDeleteStep(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteStepData, FirebaseError, DeleteStepVariables>): UseDataConnectMutationResult<DeleteStepData, DeleteStepVariables>;
2821	```
2822
2823	### Variables
2824	The `DeleteStep` Mutation requires an argument of type `DeleteStepVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
2825
2826	```javascript
2827	export interface DeleteStepVariables {
2828	id: UUIDString;
2829	}
2830	```
2831	### Return Type
2832	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.
2833
2834	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.
2835
2836	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
2837
2838	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](../index.d.ts). It has the following fields:
2839	```javascript
2840	export interface DeleteStepData {
2841	step_delete?: Step_Key \| null;
2842	}
2843	```
2844
2845	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
2846
2847	### Using `DeleteStep`'s Mutation hook function
2848
2849	```javascript
2850	import { getDataConnect } from 'firebase/data-connect';
2851	import { connectorConfig, DeleteStepVariables } from '@dataconnect/generated';
2852	import { useDeleteStep } from '@dataconnect/generated/react'
2853
2854	export default function DeleteStepComponent() {
2855	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
2856	const mutation = useDeleteStep();
2857
2858	// You can also pass in a `DataConnect` instance to the Mutation hook function.
2859	const dataConnect = getDataConnect(connectorConfig);
2860	const mutation = useDeleteStep(dataConnect);
2861
2862	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
2863	const options = {
2864	onSuccess: () => { console.log('Mutation succeeded!'); }
2865	};
2866	const mutation = useDeleteStep(options);
2867
2868	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
2869	const dataConnect = getDataConnect(connectorConfig);
2870	const options = {
2871	onSuccess: () => { console.log('Mutation succeeded!'); }
2872	};
2873	const mutation = useDeleteStep(dataConnect, options);
2874
2875	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
2876	// The `useDeleteStep` Mutation requires an argument of type `DeleteStepVariables`:
2877	const deleteStepVars: DeleteStepVariables = {
2878	id: ...,
2879	};
2880	mutation.mutate(deleteStepVars);
2881	// Variables can be defined inline as well.
2882	mutation.mutate({ id: ..., });
2883
2884	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
2885	const options = {
2886	onSuccess: () => { console.log('Mutation succeeded!'); }
2887	};
2888	mutation.mutate(deleteStepVars, options);
2889
2890	// Then, you can render your component dynamically based on the status of the Mutation.
2891	if (mutation.isPending) {
2892	return <div>Loading...</div>;
2893	}
2894
2895	if (mutation.isError) {
2896	return <div>Error: {mutation.error.message}</div>;
2897	}
2898
2899	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
2900	if (mutation.isSuccess) {
2901	console.log(mutation.data.step_delete);
2902	}
2903	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
2904	}
2905	```
2906
2907	## UpdateStep
2908	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](./index.d.ts)):
2909	```javascript
2910	useUpdateStep(options?: useDataConnectMutationOptions<UpdateStepData, FirebaseError, UpdateStepVariables>): UseDataConnectMutationResult<UpdateStepData, UpdateStepVariables>;
2911	```
2912	You can also pass in a `DataConnect` instance to the Mutation hook function.
2913	```javascript
2914	useUpdateStep(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateStepData, FirebaseError, UpdateStepVariables>): UseDataConnectMutationResult<UpdateStepData, UpdateStepVariables>;
2915	```
2916
2917	### Variables
2918	The `UpdateStep` Mutation requires an argument of type `UpdateStepVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
2919
2920	```javascript
2921	export interface UpdateStepVariables {
2922	id: UUIDString;
2923	text: string;
2924	}
2925	```
2926	### Return Type
2927	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.
2928
2929	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.
2930
2931	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
2932
2933	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](../index.d.ts). It has the following fields:
2934	```javascript
2935	export interface UpdateStepData {
2936	step_update?: Step_Key \| null;
2937	}
2938	```
2939
2940	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
2941
2942	### Using `UpdateStep`'s Mutation hook function
2943
2944	```javascript
2945	import { getDataConnect } from 'firebase/data-connect';
2946	import { connectorConfig, UpdateStepVariables } from '@dataconnect/generated';
2947	import { useUpdateStep } from '@dataconnect/generated/react'
2948
2949	export default function UpdateStepComponent() {
2950	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
2951	const mutation = useUpdateStep();
2952
2953	// You can also pass in a `DataConnect` instance to the Mutation hook function.
2954	const dataConnect = getDataConnect(connectorConfig);
2955	const mutation = useUpdateStep(dataConnect);
2956
2957	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
2958	const options = {
2959	onSuccess: () => { console.log('Mutation succeeded!'); }
2960	};
2961	const mutation = useUpdateStep(options);
2962
2963	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
2964	const dataConnect = getDataConnect(connectorConfig);
2965	const options = {
2966	onSuccess: () => { console.log('Mutation succeeded!'); }
2967	};
2968	const mutation = useUpdateStep(dataConnect, options);
2969
2970	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
2971	// The `useUpdateStep` Mutation requires an argument of type `UpdateStepVariables`:
2972	const updateStepVars: UpdateStepVariables = {
2973	id: ...,
2974	text: ...,
2975	};
2976	mutation.mutate(updateStepVars);
2977	// Variables can be defined inline as well.
2978	mutation.mutate({ id: ..., text: ..., });
2979
2980	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
2981	const options = {
2982	onSuccess: () => { console.log('Mutation succeeded!'); }
2983	};
2984	mutation.mutate(updateStepVars, options);
2985
2986	// Then, you can render your component dynamically based on the status of the Mutation.
2987	if (mutation.isPending) {
2988	return <div>Loading...</div>;
2989	}
2990
2991	if (mutation.isError) {
2992	return <div>Error: {mutation.error.message}</div>;
2993	}
2994
2995	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
2996	if (mutation.isSuccess) {
2997	console.log(mutation.data.step_update);
2998	}
2999	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
3000	}
3001	```
3002
3003	## CreateBookmark
3004	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](./index.d.ts)):
3005	```javascript
3006	useCreateBookmark(options?: useDataConnectMutationOptions<CreateBookmarkData, FirebaseError, CreateBookmarkVariables>): UseDataConnectMutationResult<CreateBookmarkData, CreateBookmarkVariables>;
3007	```
3008	You can also pass in a `DataConnect` instance to the Mutation hook function.
3009	```javascript
3010	useCreateBookmark(dc: DataConnect, options?: useDataConnectMutationOptions<CreateBookmarkData, FirebaseError, CreateBookmarkVariables>): UseDataConnectMutationResult<CreateBookmarkData, CreateBookmarkVariables>;
3011	```
3012
3013	### Variables
3014	The `CreateBookmark` Mutation requires an argument of type `CreateBookmarkVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
3015
3016	```javascript
3017	export interface CreateBookmarkVariables {
3018	guideId: UUIDString;
3019	}
3020	```
3021	### Return Type
3022	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.
3023
3024	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.
3025
3026	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
3027
3028	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](../index.d.ts). It has the following fields:
3029	```javascript
3030	export interface CreateBookmarkData {
3031	userBookmark_insert: UserBookmark_Key;
3032	}
3033	```
3034
3035	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
3036
3037	### Using `CreateBookmark`'s Mutation hook function
3038
3039	```javascript
3040	import { getDataConnect } from 'firebase/data-connect';
3041	import { connectorConfig, CreateBookmarkVariables } from '@dataconnect/generated';
3042	import { useCreateBookmark } from '@dataconnect/generated/react'
3043
3044	export default function CreateBookmarkComponent() {
3045	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
3046	const mutation = useCreateBookmark();
3047
3048	// You can also pass in a `DataConnect` instance to the Mutation hook function.
3049	const dataConnect = getDataConnect(connectorConfig);
3050	const mutation = useCreateBookmark(dataConnect);
3051
3052	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
3053	const options = {
3054	onSuccess: () => { console.log('Mutation succeeded!'); }
3055	};
3056	const mutation = useCreateBookmark(options);
3057
3058	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
3059	const dataConnect = getDataConnect(connectorConfig);
3060	const options = {
3061	onSuccess: () => { console.log('Mutation succeeded!'); }
3062	};
3063	const mutation = useCreateBookmark(dataConnect, options);
3064
3065	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
3066	// The `useCreateBookmark` Mutation requires an argument of type `CreateBookmarkVariables`:
3067	const createBookmarkVars: CreateBookmarkVariables = {
3068	guideId: ...,
3069	};
3070	mutation.mutate(createBookmarkVars);
3071	// Variables can be defined inline as well.
3072	mutation.mutate({ guideId: ..., });
3073
3074	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
3075	const options = {
3076	onSuccess: () => { console.log('Mutation succeeded!'); }
3077	};
3078	mutation.mutate(createBookmarkVars, options);
3079
3080	// Then, you can render your component dynamically based on the status of the Mutation.
3081	if (mutation.isPending) {
3082	return <div>Loading...</div>;
3083	}
3084
3085	if (mutation.isError) {
3086	return <div>Error: {mutation.error.message}</div>;
3087	}
3088
3089	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
3090	if (mutation.isSuccess) {
3091	console.log(mutation.data.userBookmark_insert);
3092	}
3093	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
3094	}
3095	```
3096
3097	## UpsertBookmark
3098	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](./index.d.ts)):
3099	```javascript
3100	useUpsertBookmark(options?: useDataConnectMutationOptions<UpsertBookmarkData, FirebaseError, UpsertBookmarkVariables>): UseDataConnectMutationResult<UpsertBookmarkData, UpsertBookmarkVariables>;
3101	```
3102	You can also pass in a `DataConnect` instance to the Mutation hook function.
3103	```javascript
3104	useUpsertBookmark(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertBookmarkData, FirebaseError, UpsertBookmarkVariables>): UseDataConnectMutationResult<UpsertBookmarkData, UpsertBookmarkVariables>;
3105	```
3106
3107	### Variables
3108	The `UpsertBookmark` Mutation requires an argument of type `UpsertBookmarkVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
3109
3110	```javascript
3111	export interface UpsertBookmarkVariables {
3112	id: UUIDString;
3113	guideId: UUIDString;
3114	}
3115	```
3116	### Return Type
3117	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.
3118
3119	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.
3120
3121	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
3122
3123	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](../index.d.ts). It has the following fields:
3124	```javascript
3125	export interface UpsertBookmarkData {
3126	userBookmark_upsert: UserBookmark_Key;
3127	}
3128	```
3129
3130	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
3131
3132	### Using `UpsertBookmark`'s Mutation hook function
3133
3134	```javascript
3135	import { getDataConnect } from 'firebase/data-connect';
3136	import { connectorConfig, UpsertBookmarkVariables } from '@dataconnect/generated';
3137	import { useUpsertBookmark } from '@dataconnect/generated/react'
3138
3139	export default function UpsertBookmarkComponent() {
3140	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
3141	const mutation = useUpsertBookmark();
3142
3143	// You can also pass in a `DataConnect` instance to the Mutation hook function.
3144	const dataConnect = getDataConnect(connectorConfig);
3145	const mutation = useUpsertBookmark(dataConnect);
3146
3147	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
3148	const options = {
3149	onSuccess: () => { console.log('Mutation succeeded!'); }
3150	};
3151	const mutation = useUpsertBookmark(options);
3152
3153	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
3154	const dataConnect = getDataConnect(connectorConfig);
3155	const options = {
3156	onSuccess: () => { console.log('Mutation succeeded!'); }
3157	};
3158	const mutation = useUpsertBookmark(dataConnect, options);
3159
3160	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
3161	// The `useUpsertBookmark` Mutation requires an argument of type `UpsertBookmarkVariables`:
3162	const upsertBookmarkVars: UpsertBookmarkVariables = {
3163	id: ...,
3164	guideId: ...,
3165	};
3166	mutation.mutate(upsertBookmarkVars);
3167	// Variables can be defined inline as well.
3168	mutation.mutate({ id: ..., guideId: ..., });
3169
3170	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
3171	const options = {
3172	onSuccess: () => { console.log('Mutation succeeded!'); }
3173	};
3174	mutation.mutate(upsertBookmarkVars, options);
3175
3176	// Then, you can render your component dynamically based on the status of the Mutation.
3177	if (mutation.isPending) {
3178	return <div>Loading...</div>;
3179	}
3180
3181	if (mutation.isError) {
3182	return <div>Error: {mutation.error.message}</div>;
3183	}
3184
3185	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
3186	if (mutation.isSuccess) {
3187	console.log(mutation.data.userBookmark_upsert);
3188	}
3189	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
3190	}
3191	```
3192
3193	## DeleteBookmark
3194	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](./index.d.ts)):
3195	```javascript
3196	useDeleteBookmark(options?: useDataConnectMutationOptions<DeleteBookmarkData, FirebaseError, DeleteBookmarkVariables>): UseDataConnectMutationResult<DeleteBookmarkData, DeleteBookmarkVariables>;
3197	```
3198	You can also pass in a `DataConnect` instance to the Mutation hook function.
3199	```javascript
3200	useDeleteBookmark(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteBookmarkData, FirebaseError, DeleteBookmarkVariables>): UseDataConnectMutationResult<DeleteBookmarkData, DeleteBookmarkVariables>;
3201	```
3202
3203	### Variables
3204	The `DeleteBookmark` Mutation requires an argument of type `DeleteBookmarkVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
3205
3206	```javascript
3207	export interface DeleteBookmarkVariables {
3208	id: UUIDString;
3209	}
3210	```
3211	### Return Type
3212	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.
3213
3214	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.
3215
3216	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
3217
3218	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](../index.d.ts). It has the following fields:
3219	```javascript
3220	export interface DeleteBookmarkData {
3221	userBookmark_delete?: UserBookmark_Key \| null;
3222	}
3223	```
3224
3225	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
3226
3227	### Using `DeleteBookmark`'s Mutation hook function
3228
3229	```javascript
3230	import { getDataConnect } from 'firebase/data-connect';
3231	import { connectorConfig, DeleteBookmarkVariables } from '@dataconnect/generated';
3232	import { useDeleteBookmark } from '@dataconnect/generated/react'
3233
3234	export default function DeleteBookmarkComponent() {
3235	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
3236	const mutation = useDeleteBookmark();
3237
3238	// You can also pass in a `DataConnect` instance to the Mutation hook function.
3239	const dataConnect = getDataConnect(connectorConfig);
3240	const mutation = useDeleteBookmark(dataConnect);
3241
3242	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
3243	const options = {
3244	onSuccess: () => { console.log('Mutation succeeded!'); }
3245	};
3246	const mutation = useDeleteBookmark(options);
3247
3248	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
3249	const dataConnect = getDataConnect(connectorConfig);
3250	const options = {
3251	onSuccess: () => { console.log('Mutation succeeded!'); }
3252	};
3253	const mutation = useDeleteBookmark(dataConnect, options);
3254
3255	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
3256	// The `useDeleteBookmark` Mutation requires an argument of type `DeleteBookmarkVariables`:
3257	const deleteBookmarkVars: DeleteBookmarkVariables = {
3258	id: ...,
3259	};
3260	mutation.mutate(deleteBookmarkVars);
3261	// Variables can be defined inline as well.
3262	mutation.mutate({ id: ..., });
3263
3264	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
3265	const options = {
3266	onSuccess: () => { console.log('Mutation succeeded!'); }
3267	};
3268	mutation.mutate(deleteBookmarkVars, options);
3269
3270	// Then, you can render your component dynamically based on the status of the Mutation.
3271	if (mutation.isPending) {
3272	return <div>Loading...</div>;
3273	}
3274
3275	if (mutation.isError) {
3276	return <div>Error: {mutation.error.message}</div>;
3277	}
3278
3279	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
3280	if (mutation.isSuccess) {
3281	console.log(mutation.data.userBookmark_delete);
3282	}
3283	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
3284	}
3285	```
3286
3287	## UpdateBookmark
3288	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](./index.d.ts)):
3289	```javascript
3290	useUpdateBookmark(options?: useDataConnectMutationOptions<UpdateBookmarkData, FirebaseError, UpdateBookmarkVariables>): UseDataConnectMutationResult<UpdateBookmarkData, UpdateBookmarkVariables>;
3291	```
3292	You can also pass in a `DataConnect` instance to the Mutation hook function.
3293	```javascript
3294	useUpdateBookmark(dc: DataConnect, options?: useDataConnectMutationOptions<UpdateBookmarkData, FirebaseError, UpdateBookmarkVariables>): UseDataConnectMutationResult<UpdateBookmarkData, UpdateBookmarkVariables>;
3295	```
3296
3297	### Variables
3298	The `UpdateBookmark` Mutation requires an argument of type `UpdateBookmarkVariables`, which is defined in [dataconnect-generated/index.d.ts](../index.d.ts). It has the following fields:
3299
3300	```javascript
3301	export interface UpdateBookmarkVariables {
3302	id: UUIDString;
3303	guideId: UUIDString;
3304	}
3305	```
3306	### Return Type
3307	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.
3308
3309	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.
3310
3311	To execute the Mutation, call `UseMutationResult.mutate()`. This function executes the Mutation, but does not return the data from the Mutation.
3312
3313	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](../index.d.ts). It has the following fields:
3314	```javascript
3315	export interface UpdateBookmarkData {
3316	userBookmark_update?: UserBookmark_Key \| null;
3317	}
3318	```
3319
3320	To learn more about the `UseMutationResult` object, see the [TanStack React Query documentation](https://tanstack.com/query/v5/docs/framework/react/reference/useMutation).
3321
3322	### Using `UpdateBookmark`'s Mutation hook function
3323
3324	```javascript
3325	import { getDataConnect } from 'firebase/data-connect';
3326	import { connectorConfig, UpdateBookmarkVariables } from '@dataconnect/generated';
3327	import { useUpdateBookmark } from '@dataconnect/generated/react'
3328
3329	export default function UpdateBookmarkComponent() {
3330	// Call the Mutation hook function to get a `UseMutationResult` object which holds the state of your Mutation.
3331	const mutation = useUpdateBookmark();
3332
3333	// You can also pass in a `DataConnect` instance to the Mutation hook function.
3334	const dataConnect = getDataConnect(connectorConfig);
3335	const mutation = useUpdateBookmark(dataConnect);
3336
3337	// You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
3338	const options = {
3339	onSuccess: () => { console.log('Mutation succeeded!'); }
3340	};
3341	const mutation = useUpdateBookmark(options);
3342
3343	// You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
3344	const dataConnect = getDataConnect(connectorConfig);
3345	const options = {
3346	onSuccess: () => { console.log('Mutation succeeded!'); }
3347	};
3348	const mutation = useUpdateBookmark(dataConnect, options);
3349
3350	// After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
3351	// The `useUpdateBookmark` Mutation requires an argument of type `UpdateBookmarkVariables`:
3352	const updateBookmarkVars: UpdateBookmarkVariables = {
3353	id: ...,
3354	guideId: ...,
3355	};
3356	mutation.mutate(updateBookmarkVars);
3357	// Variables can be defined inline as well.
3358	mutation.mutate({ id: ..., guideId: ..., });
3359
3360	// You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
3361	const options = {
3362	onSuccess: () => { console.log('Mutation succeeded!'); }
3363	};
3364	mutation.mutate(updateBookmarkVars, options);
3365
3366	// Then, you can render your component dynamically based on the status of the Mutation.
3367	if (mutation.isPending) {
3368	return <div>Loading...</div>;
3369	}
3370
3371	if (mutation.isError) {
3372	return <div>Error: {mutation.error.message}</div>;
3373	}
3374
3375	// If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
3376	if (mutation.isSuccess) {
3377	console.log(mutation.data.userBookmark_update);
3378	}
3379	return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
3380	}
3381	```
3382