React Query Firebase

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:

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.

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:

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
}