Advanced Features

Advanced features of Royco SDK for customizing and extending the native functionality

Custom Hooks

You can create custom hooks by combining multiple queries and hooks together. This can be useful when you want to fetch multiple data points and show them in a single component without repeating the same logic and worrying about caching -- because we have already taken care of keys and data invalidation at regular intervals, so you can keep building your custom components and all the relevant data will be automatically fetched and updated in the most efficient way.

use-custom-royco-hook.tsx

import { useQuery } from "@tanstack/react-query";
import { getReactQueryOptions } from "royco/queries";
import { useRoycoHook } from "royco/hooks";
 
const useCustomRoycoHook = () => {
  const {
    data: data1,
    isLoading: isLoadingData1,
    isError: isErrorData1,
  } = useQuery(getReactQueryOptions);
  const {
    data: data2,
    isLoading: isLoadingData2,
    isError: isErrorData2,
  } = useRoycoHook();
 
  const isLoading = isLoadingData1 || isLoadingData2;
  const isError = isErrorData1 || isErrorData2;
 
  let data = null;
 
  if (!isLoading && !isError && !!data1 && !!data2) {
    data = {
      ...data1,
      ...data2,
    };
  }
 
  return { data, isLoading, isError };
};

Custom Queries

You can write on your own queries on top of our existing tables and views to match your requirements. In order to do that, you can refer the type Database which is a generic type that lists out all the tables & views available along with their corresponding columns. You will need to write a custom query and pass that to royco client from useRoycoClient to fetch the data.

your-component.tsx

import { useRoycoClient } from "royco/client";
 
const YourComponent = () => {
  const client = useRoycoClient();
 
  const { data, isLoading, isError } = client
    .from("table_name")
    .select("column1, column2, etc.")
    .throwOnError()
    .then((result) => result.data);
 
  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error fetching data</div>;
  return <div>{JSON.stringify(data)}</div>;
};

Advanced Features

Custom Hooks

Custom Queries

On this page