Data Fetching

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

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

  // ...
}

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()