GraphQL Integration in routes.json

This document explains how to integrate GraphQL queries with your routes using the routes.json file.

Defining GraphQL Queries

GraphQL queries are defined in the queries field of a route in routes.json.

{
  "/path": {
    "queries": {
      "QueryName": "{ variableName: params.paramName }"
    }
  }
}

{
  "/teams": {
    "queries": {
      "TeamsDocument": "{orgName: params.orgName, pageSize: 10}"
    }
  }
}

Parameters can be passed to queries using the params object. The params object contains route parameters and query string parameters.

{
  "/o/:orgName/teams": {
    "queries": {
      "TeamsDocument": "{orgName: params.orgName, pageSize: params.pageSize || 10}"
    }
  }
}

Query results are automatically passed to your components as props.

const Teams = (props) => {
  const { data } = props.loaderData.TeamsDocument;
  // Use data here
};