Skip to main content

Graphql best practices

Graphql queries/mutations used across different files in the same folder​

For queries/mutations used across different files in the same folder (e.g. a USERS query that is used in src/profile/user-page.tsx and in src/profile/user-popup.tsx), place then into a separate file within that folder and import them into the components that need them. For example:

In a file called queries.ts in src/profile/data/queries.ts:

export const USERS = gql`
  query {
    users {
      id
      name
    }
  }
`

In the component:

import {USERS} from './data/queries'

const {data, loading, error} = useQuery<UserReturnType>(USERS)

Graphql queries/mutations used across different files in different folders​

For queries/mutations used across different files in different folders (e.g. a USERS query that is used in src/profile/user-page.tsx and in src/postings/my-page.tsx), place then into _shared and import them into the components that need them. If you do this, make sure that both places have the exact same query. For example:

In a file called queries.ts in src/shared/data/queries.ts:

export const USERS = gql`
  query {
    users {
      id
      name
    }
  }
`

In the component:

import {USERS} from '../../shared/data/queries'

Always define and export graphql return types where the query lives​

For example, if you have a query like this:

export const USERS = gql`
  query {
    users {
      id
      name
    }
  }
`

Then you should also define and export a return type like this:

export interface UserReturnType {
  id: string
  name: string
}

And then use it in the component like this:

const {data, loading, error} = useQuery<{users: UserReturnType}>(USERS)

Make sure that the type you define is based on the query that you wrote, and matches the schema on the backend, including the optional properties.