Skip to main content

Front-end GraphQL actions

Updating GraphQL hooks​

If you write a new -- or update an existing -- GraphQL query or mutation, the associated React hooks won't refresh automatically. You'll need to update them manually.

In the root directory, run:

npm run gql:codegen

This command is standardized in each project so you can also run GraphQL codegen in an individual project directory:

# This will generate GraphQL hooks only for staff
cd staff
npm run gql:codegen

Manually running GraphQL queries​

Although it's not the best practice, sometimes it's necessary to manually run GraphQL queries on local, staging, or production. To do this, you can use a GraphQL IDE, like GraphiQL.

Using Apollo Developer Tools​

If you have Apollo Developer Tools installed, and you visit a page that loads the Apollo Client (most pages), and the page has not crashed, then you can use the Chrome extension to directly hook into the Apollo instance running on the page.

This means that you'll be authenticated under the page context.

Using GraphiQL instances​

Live GraphiQL instances (GraphQL IDEs) are also available at

Staging vs production

Staging and production each have their own GraphiQL instances, debug pages, and access tokens. Don't mix them up!

The GraphiQL instances are directly accessible. However, you'll still need to authenticate into them using your personal staff token. To do this,

Visit the Staff Portal's debug page and copy the "Access token" to your clipboard:

Then, in the GraphiQL IDE, at the bottom under "HTTP Headers", type:

{
  "Authorization": "Bearer [your token here]"
}

where [your token here] is your access token. (Sometimes, copy and pasting will result in line breaks -- there should be no line breaks.) Note that access tokens expire frequently, so you might need to do this again if you're not fast enough.

This will allow you to run GraphQL queries directly against either staging or production. Use case when doing so, as GraphQL queries can be used to modify nearly all data.