Data Fetching

GraphQL

Data fetching for the frontend is facilitated entirely through GraphQL. The backend uses Hasura to map a Postgres database into a GraphQL schema that the frontend can use to fetch data. The backend can be accessed from the following endpoints:

• Staging: https://graphql-cryoet-api.cryoet.staging.si.czi.technology/v1/graphql
• Production: https://graphql-cryoet-api.cryoet.prod.si.czi.technology/v1/graphql

The URL the frontend used is defined using the API_URL environment variable, and should be set to either the staging or production URLs.

We use Apollo on the frontend to query data from our GraphQL backend, but we only use it on the server side to query the data and pass it to our components during server side rendering.

The client is defined in the apollo.server.ts and can be imported within a route file to query data:

import { apolloClient } from 'app/apollo.server'

export async function loader() {
  const { data } = await apolloClient.query({
    query: LANDING_PAGE_DATA_QUERY,
  })

  return json(data)
}

The loader function is a function that runs on the server and is responsible for fetching data and passing it to the React renderer. You can then access this data by using the useTypedLoaderData hook:

import { useTypedLoaderData } from 'remix-typedjson'

export function IndexContent() {
  const data = useTypedLoaderData<LandingPageDataQuery>()

  const datasets = data.datasets_aggregate.aggregate?.count ?? 0
  const tomograms = data.tomograms_aggregate.aggregate?.count ?? 0

  // ...
}

GraphQL Types Generation

We use graphql-codegen for generating TypeScript types based on the GraphQL API defined in the API_URL. Types are automatically generated in app/__generated__ and can be imported directly.

React Query

We also have react-query in the repo to handle fetching data on the client side. It should only be used if the data doesn't need to be fetched on the server.

Examples

• useFileSize()