example-query

query.tsx

import { useQuery, gql } from "ui/lib/use-data.client";

const Component = () => {
  const { data, hydrateClient } = useQuery<{
    currentUser?: {
      lists: {
        id: string;
        key: string;
        title: string;
      }[];
    };
  }>(
    "currentUser::getLists",
    gql`
      query GetLists {
        currentUser {
          lists {
            id
            key
            title
          }
        }
      }
    `
  );

  return (
    <>
      <div>
        <p>{data.currentUser?.lists.length}</p>
      </div>
      {hydrateClient}
    </>
  );
};