Krow-workspace/frontend-web/src/dataconnect-generated/react/README.md

Generated React README

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

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

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

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

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

Table of Contents

• Overview
• TanStack Query Firebase & TanStack React Query
  • Package Installation
  • Configuring TanStack Query
• Accessing the connector
  • Connecting to the local Emulator
• Queries
  • ListMovies
  • ListUsers
  • ListUserReviews
  • GetMovieById
  • SearchMovie
• Mutations
  • CreateMovie
  • UpsertUser
  • AddReview
  • DeleteReview

TanStack Query Firebase & TanStack React Query

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

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

Installing TanStack Query Firebase and TanStack React Query Packages

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

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

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

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

Configuring TanStack Query

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

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

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

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

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

Accessing the connector

A connector is a collection of Queries and Mutations. One SDK is generated for each connector - this SDK is generated for the connector example.

You can find more information about connectors in the Data Connect documentation.

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

const dataConnect = getDataConnect(connectorConfig);

Connecting to the local Emulator

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

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

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

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

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

Queries

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

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

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

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

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

Using Query Hooks

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

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

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

ListMovies

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

useListMovies(dc: DataConnect, options?: useDataConnectQueryOptions<ListMoviesData>): UseDataConnectQueryResult<ListMoviesData, undefined>;

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

useListMovies(options?: useDataConnectQueryOptions<ListMoviesData>): UseDataConnectQueryResult<ListMoviesData, undefined>;

Variables

The ListMovies Query has no variables.

Return Type

Recall that calling the ListMovies Query hook function returns a UseQueryResult object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things.

To check the status of a Query, use the UseQueryResult.status field. You can also check for pending / success / error status using the UseQueryResult.isPending, UseQueryResult.isSuccess, and UseQueryResult.isError fields.

To access the data returned by a Query, use the UseQueryResult.data field. The data for the ListMovies Query is of type ListMoviesData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface ListMoviesData {
  movies: ({
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
  } & Movie_Key)[];
}

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

Using ListMovies's Query hook function

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

export default function ListMoviesComponent() {
  // You don't have to do anything to "execute" the Query.
  // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
  const query = useListMovies();

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

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

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useListMovies(dataConnect, options);

  // Then, you can render your component dynamically based on the status of the Query.
  if (query.isPending) {
    return <div>Loading...</div>;
  }

  if (query.isError) {
    return <div>Error: {query.error.message}</div>;
  }

  // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
  if (query.isSuccess) {
    console.log(query.data.movies);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

ListUsers

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

useListUsers(dc: DataConnect, options?: useDataConnectQueryOptions<ListUsersData>): UseDataConnectQueryResult<ListUsersData, undefined>;

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

useListUsers(options?: useDataConnectQueryOptions<ListUsersData>): UseDataConnectQueryResult<ListUsersData, undefined>;

Variables

The ListUsers Query has no variables.

Return Type

Recall that calling the ListUsers Query hook function returns a UseQueryResult object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things.

To check the status of a Query, use the UseQueryResult.status field. You can also check for pending / success / error status using the UseQueryResult.isPending, UseQueryResult.isSuccess, and UseQueryResult.isError fields.

To access the data returned by a Query, use the UseQueryResult.data field. The data for the ListUsers Query is of type ListUsersData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface ListUsersData {
  users: ({
    id: string;
    username: string;
  } & User_Key)[];
}

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

Using ListUsers's Query hook function

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

export default function ListUsersComponent() {
  // You don't have to do anything to "execute" the Query.
  // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
  const query = useListUsers();

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

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

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useListUsers(dataConnect, options);

  // Then, you can render your component dynamically based on the status of the Query.
  if (query.isPending) {
    return <div>Loading...</div>;
  }

  if (query.isError) {
    return <div>Error: {query.error.message}</div>;
  }

  // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
  if (query.isSuccess) {
    console.log(query.data.users);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

ListUserReviews

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

useListUserReviews(dc: DataConnect, options?: useDataConnectQueryOptions<ListUserReviewsData>): UseDataConnectQueryResult<ListUserReviewsData, undefined>;

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

useListUserReviews(options?: useDataConnectQueryOptions<ListUserReviewsData>): UseDataConnectQueryResult<ListUserReviewsData, undefined>;

Variables

The ListUserReviews Query has no variables.

Return Type

Recall that calling the ListUserReviews Query hook function returns a UseQueryResult object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things.

To check the status of a Query, use the UseQueryResult.status field. You can also check for pending / success / error status using the UseQueryResult.isPending, UseQueryResult.isSuccess, and UseQueryResult.isError fields.

To access the data returned by a Query, use the UseQueryResult.data field. The data for the ListUserReviews Query is of type ListUserReviewsData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface ListUserReviewsData {
  user?: {
    id: string;
    username: string;
    reviews: ({
      rating?: number | null;
      reviewDate: DateString;
      reviewText?: string | null;
      movie: {
        id: UUIDString;
        title: string;
      } & Movie_Key;
    })[];
  } & User_Key;
}

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

Using ListUserReviews's Query hook function

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

export default function ListUserReviewsComponent() {
  // You don't have to do anything to "execute" the Query.
  // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
  const query = useListUserReviews();

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

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

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useListUserReviews(dataConnect, options);

  // Then, you can render your component dynamically based on the status of the Query.
  if (query.isPending) {
    return <div>Loading...</div>;
  }

  if (query.isError) {
    return <div>Error: {query.error.message}</div>;
  }

  // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
  if (query.isSuccess) {
    console.log(query.data.user);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

GetMovieById

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

useGetMovieById(dc: DataConnect, vars: GetMovieByIdVariables, options?: useDataConnectQueryOptions<GetMovieByIdData>): UseDataConnectQueryResult<GetMovieByIdData, GetMovieByIdVariables>;

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

useGetMovieById(vars: GetMovieByIdVariables, options?: useDataConnectQueryOptions<GetMovieByIdData>): UseDataConnectQueryResult<GetMovieByIdData, GetMovieByIdVariables>;

Variables

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

export interface GetMovieByIdVariables {
  id: UUIDString;
}

Return Type

Recall that calling the GetMovieById Query hook function returns a UseQueryResult object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things.

To check the status of a Query, use the UseQueryResult.status field. You can also check for pending / success / error status using the UseQueryResult.isPending, UseQueryResult.isSuccess, and UseQueryResult.isError fields.

To access the data returned by a Query, use the UseQueryResult.data field. The data for the GetMovieById Query is of type GetMovieByIdData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface GetMovieByIdData {
  movie?: {
    id: UUIDString;
    title: string;
    imageUrl: string;
    genre?: string | null;
    metadata?: {
      rating?: number | null;
      releaseYear?: number | null;
      description?: string | null;
    };
      reviews: ({
        reviewText?: string | null;
        reviewDate: DateString;
        rating?: number | null;
        user: {
          id: string;
          username: string;
        } & User_Key;
      })[];
  } & Movie_Key;
}

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

Using GetMovieById's Query hook function

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

export default function GetMovieByIdComponent() {
  // The `useGetMovieById` Query hook requires an argument of type `GetMovieByIdVariables`:
  const getMovieByIdVars: GetMovieByIdVariables = {
    id: ..., 
  };

  // You don't have to do anything to "execute" the Query.
  // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
  const query = useGetMovieById(getMovieByIdVars);
  // Variables can be defined inline as well.
  const query = useGetMovieById({ id: ..., });

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

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

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useGetMovieById(dataConnect, getMovieByIdVars, options);

  // Then, you can render your component dynamically based on the status of the Query.
  if (query.isPending) {
    return <div>Loading...</div>;
  }

  if (query.isError) {
    return <div>Error: {query.error.message}</div>;
  }

  // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
  if (query.isSuccess) {
    console.log(query.data.movie);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

SearchMovie

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

useSearchMovie(dc: DataConnect, vars?: SearchMovieVariables, options?: useDataConnectQueryOptions<SearchMovieData>): UseDataConnectQueryResult<SearchMovieData, SearchMovieVariables>;

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

useSearchMovie(vars?: SearchMovieVariables, options?: useDataConnectQueryOptions<SearchMovieData>): UseDataConnectQueryResult<SearchMovieData, SearchMovieVariables>;

Variables

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

export interface SearchMovieVariables {
  titleInput?: string | null;
  genre?: string | null;
}

Return Type

Recall that calling the SearchMovie Query hook function returns a UseQueryResult object. This object holds the state of your Query, including whether the Query is loading, has completed, or has succeeded/failed, and any data returned by the Query, among other things.

To check the status of a Query, use the UseQueryResult.status field. You can also check for pending / success / error status using the UseQueryResult.isPending, UseQueryResult.isSuccess, and UseQueryResult.isError fields.

To access the data returned by a Query, use the UseQueryResult.data field. The data for the SearchMovie Query is of type SearchMovieData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface SearchMovieData {
  movies: ({
    id: UUIDString;
    title: string;
    genre?: string | null;
    imageUrl: string;
  } & Movie_Key)[];
}

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

Using SearchMovie's Query hook function

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

export default function SearchMovieComponent() {
  // The `useSearchMovie` Query hook has an optional argument of type `SearchMovieVariables`:
  const searchMovieVars: SearchMovieVariables = {
    titleInput: ..., // optional
    genre: ..., // optional
  };

  // You don't have to do anything to "execute" the Query.
  // Call the Query hook function to get a `UseQueryResult` object which holds the state of your Query.
  const query = useSearchMovie(searchMovieVars);
  // Variables can be defined inline as well.
  const query = useSearchMovie({ titleInput: ..., genre: ..., });
  // Since all variables are optional for this Query, you can omit the `SearchMovieVariables` argument.
  // (as long as you don't want to provide any `options`!)
  const query = useSearchMovie();

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

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

  // You can also pass both a `DataConnect` instance and a `useDataConnectQueryOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = { staleTime: 5 * 1000 };
  const query = useSearchMovie(dataConnect, searchMovieVars /** or undefined */, options);

  // Then, you can render your component dynamically based on the status of the Query.
  if (query.isPending) {
    return <div>Loading...</div>;
  }

  if (query.isError) {
    return <div>Error: {query.error.message}</div>;
  }

  // If the Query is successful, you can access the data returned using the `UseQueryResult.data` field.
  if (query.isSuccess) {
    console.log(query.data.movies);
  }
  return <div>Query execution {query.isSuccess ? 'successful' : 'failed'}!</div>;
}

Mutations

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

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

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

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

Using Mutation Hooks

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

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

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

CreateMovie

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

useCreateMovie(options?: useDataConnectMutationOptions<CreateMovieData, FirebaseError, CreateMovieVariables>): UseDataConnectMutationResult<CreateMovieData, CreateMovieVariables>;

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

useCreateMovie(dc: DataConnect, options?: useDataConnectMutationOptions<CreateMovieData, FirebaseError, CreateMovieVariables>): UseDataConnectMutationResult<CreateMovieData, CreateMovieVariables>;

Variables

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

export interface CreateMovieVariables {
  title: string;
  genre: string;
  imageUrl: string;
}

Return Type

Recall that calling the CreateMovie Mutation hook function returns a UseMutationResult object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things.

To check the status of a Mutation, use the UseMutationResult.status field. You can also check for pending / success / error status using the UseMutationResult.isPending, UseMutationResult.isSuccess, and UseMutationResult.isError fields.

To execute the Mutation, call UseMutationResult.mutate(). This function executes the Mutation, but does not return the data from the Mutation.

To access the data returned by a Mutation, use the UseMutationResult.data field. The data for the CreateMovie Mutation is of type CreateMovieData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface CreateMovieData {
  movie_insert: Movie_Key;
}

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

Using CreateMovie's Mutation hook function

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

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

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

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useCreateMovie(options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useCreateMovie(dataConnect, options);

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

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(createMovieVars, options);

  // Then, you can render your component dynamically based on the status of the Mutation.
  if (mutation.isPending) {
    return <div>Loading...</div>;
  }

  if (mutation.isError) {
    return <div>Error: {mutation.error.message}</div>;
  }

  // If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
  if (mutation.isSuccess) {
    console.log(mutation.data.movie_insert);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

UpsertUser

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

useUpsertUser(options?: useDataConnectMutationOptions<UpsertUserData, FirebaseError, UpsertUserVariables>): UseDataConnectMutationResult<UpsertUserData, UpsertUserVariables>;

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

useUpsertUser(dc: DataConnect, options?: useDataConnectMutationOptions<UpsertUserData, FirebaseError, UpsertUserVariables>): UseDataConnectMutationResult<UpsertUserData, UpsertUserVariables>;

Variables

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

export interface UpsertUserVariables {
  username: string;
}

Return Type

Recall that calling the UpsertUser Mutation hook function returns a UseMutationResult object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things.

To check the status of a Mutation, use the UseMutationResult.status field. You can also check for pending / success / error status using the UseMutationResult.isPending, UseMutationResult.isSuccess, and UseMutationResult.isError fields.

To execute the Mutation, call UseMutationResult.mutate(). This function executes the Mutation, but does not return the data from the Mutation.

To access the data returned by a Mutation, use the UseMutationResult.data field. The data for the UpsertUser Mutation is of type UpsertUserData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface UpsertUserData {
  user_upsert: User_Key;
}

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

Using UpsertUser's Mutation hook function

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

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

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

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useUpsertUser(options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useUpsertUser(dataConnect, options);

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

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(upsertUserVars, options);

  // Then, you can render your component dynamically based on the status of the Mutation.
  if (mutation.isPending) {
    return <div>Loading...</div>;
  }

  if (mutation.isError) {
    return <div>Error: {mutation.error.message}</div>;
  }

  // If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
  if (mutation.isSuccess) {
    console.log(mutation.data.user_upsert);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

AddReview

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

useAddReview(options?: useDataConnectMutationOptions<AddReviewData, FirebaseError, AddReviewVariables>): UseDataConnectMutationResult<AddReviewData, AddReviewVariables>;

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

useAddReview(dc: DataConnect, options?: useDataConnectMutationOptions<AddReviewData, FirebaseError, AddReviewVariables>): UseDataConnectMutationResult<AddReviewData, AddReviewVariables>;

Variables

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

export interface AddReviewVariables {
  movieId: UUIDString;
  rating: number;
  reviewText: string;
}

Return Type

Recall that calling the AddReview Mutation hook function returns a UseMutationResult object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things.

To check the status of a Mutation, use the UseMutationResult.status field. You can also check for pending / success / error status using the UseMutationResult.isPending, UseMutationResult.isSuccess, and UseMutationResult.isError fields.

To execute the Mutation, call UseMutationResult.mutate(). This function executes the Mutation, but does not return the data from the Mutation.

To access the data returned by a Mutation, use the UseMutationResult.data field. The data for the AddReview Mutation is of type AddReviewData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface AddReviewData {
  review_upsert: Review_Key;
}

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

Using AddReview's Mutation hook function

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

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

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

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useAddReview(options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useAddReview(dataConnect, options);

  // After calling the Mutation hook function, you must call `UseMutationResult.mutate()` to execute the Mutation.
  // The `useAddReview` Mutation requires an argument of type `AddReviewVariables`:
  const addReviewVars: AddReviewVariables = {
    movieId: ..., 
    rating: ..., 
    reviewText: ..., 
  };
  mutation.mutate(addReviewVars);
  // Variables can be defined inline as well.
  mutation.mutate({ movieId: ..., rating: ..., reviewText: ..., });

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(addReviewVars, options);

  // Then, you can render your component dynamically based on the status of the Mutation.
  if (mutation.isPending) {
    return <div>Loading...</div>;
  }

  if (mutation.isError) {
    return <div>Error: {mutation.error.message}</div>;
  }

  // If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
  if (mutation.isSuccess) {
    console.log(mutation.data.review_upsert);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}

DeleteReview

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

useDeleteReview(options?: useDataConnectMutationOptions<DeleteReviewData, FirebaseError, DeleteReviewVariables>): UseDataConnectMutationResult<DeleteReviewData, DeleteReviewVariables>;

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

useDeleteReview(dc: DataConnect, options?: useDataConnectMutationOptions<DeleteReviewData, FirebaseError, DeleteReviewVariables>): UseDataConnectMutationResult<DeleteReviewData, DeleteReviewVariables>;

Variables

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

export interface DeleteReviewVariables {
  movieId: UUIDString;
}

Return Type

Recall that calling the DeleteReview Mutation hook function returns a UseMutationResult object. This object holds the state of your Mutation, including whether the Mutation is loading, has completed, or has succeeded/failed, among other things.

To check the status of a Mutation, use the UseMutationResult.status field. You can also check for pending / success / error status using the UseMutationResult.isPending, UseMutationResult.isSuccess, and UseMutationResult.isError fields.

To execute the Mutation, call UseMutationResult.mutate(). This function executes the Mutation, but does not return the data from the Mutation.

To access the data returned by a Mutation, use the UseMutationResult.data field. The data for the DeleteReview Mutation is of type DeleteReviewData, which is defined in dataconnect-generated/index.d.ts. It has the following fields:

export interface DeleteReviewData {
  review_delete?: Review_Key | null;
}

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

Using DeleteReview's Mutation hook function

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

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

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

  // You can also pass in a `useDataConnectMutationOptions` object to the Mutation hook function.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useDeleteReview(options);

  // You can also pass both a `DataConnect` instance and a `useDataConnectMutationOptions` object.
  const dataConnect = getDataConnect(connectorConfig);
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  const mutation = useDeleteReview(dataConnect, options);

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

  // You can also pass in a `useDataConnectMutationOptions` object to `UseMutationResult.mutate()`.
  const options = {
    onSuccess: () => { console.log('Mutation succeeded!'); }
  };
  mutation.mutate(deleteReviewVars, options);

  // Then, you can render your component dynamically based on the status of the Mutation.
  if (mutation.isPending) {
    return <div>Loading...</div>;
  }

  if (mutation.isError) {
    return <div>Error: {mutation.error.message}</div>;
  }

  // If the Mutation is successful, you can access the data returned using the `UseMutationResult.data` field.
  if (mutation.isSuccess) {
    console.log(mutation.data.review_delete);
  }
  return <div>Mutation execution {mutation.isSuccess ? 'successful' : 'failed'}!</div>;
}