Skip to main content

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.

Syntax​

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

Example​

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

Passing Parameters to Queries​

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

Example​

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

Handling Query Results in Components​

Query results are automatically passed to your components as props.

Example​

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

Back to Index | Previous: Loaders and Data Fetching | Next: Advanced Configurations