tqf/docs/functions/typescript.mdx

React Query hooks for Firebase.

---
title: TypeScript | Cloud Functions
description: Hooks for integrating with Cloud Functions.
---

# TypeScript

By default, both the `useFunctionsQuery` and `useFunctionsCall` are loosely typed. You can provide
generic overrides if you wish to have strongly typed hooks.

## `useFunctionsQuery`

The first two generic types represent the `RequestData` and `ResponseData`:

```ts
type RequestData = {
  id: string;
};

type ResponseData = {
  status: number;
  data: {
    name: string;
  };
};

const query = useFunctionsQuery<RequestData, ResponseData>(
  ["product", id],
  functions,
  "getProduct",
  // RequestData
  {
    id,
  }
);

if (query.isSuccess) {
  console.log(query.data.name); // ResponseData
}
```

### Data Selector

A 3rd generic type can be provided if you are using a data selector.

```ts
type RequestData = {
  id: string;
};

type ResponseData = {
  status: number;
  data: {
    name: string;
  };
};

const query = useFunctionsQuery<RequestData, ResponseData, string>(
  ["product", id],
  functions,
  "getProduct",
  // RequestData
  {
    id,
  },
  undefined,
  {
    select(response: ResponseData): string {
      return response.data.name;
    },
  }
);

if (query.isSuccess) {
  console.log(query.data); // string
}
```

## `useFunctionsCall`

The two generic types represent the `RequestData` and `ResponseData`:

```ts
type RequestData = {
  id: string;
  name: string;
};

type ResponseData = {
  status: number;
  data: {
    name: string;
  };
};

const mutation = useFunctionsCall<RequestData, ResponseData>(
  functions,
  "updateProduct"
);

// mutate call is now typed to RequestData
mutation.mutate({
  id: "...",
  name: "...",
});

if (mutation.isSuccess) {
  console.log(mutation.data.name); // ResponseData
}
```