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
}