Search⌘ K
Home
Courses
A Practical Guide to GraphQL: From the Client Perspective

GraphQL Nested Objects in React

Explore how to request and manage nested objects like repositories and issues within an organization using GraphQL in React. Understand aligning query structures with component trees, handling paginated lists, and extending components to display nested data effectively.

We'll cover the following...

In this lesson, we will request a nested object for the organization. Since the application will eventually show the issues in a repository, we will fetch a repository of an organization as the next step.

Remember, a query reaches into the GraphQL graph. So we can nest the repository field in the organization when the schema defines the relationship between these two entities.

Node.js
const GET_REPOSITORY_OF_ORGANIZATION = `
  {
    organization(login: "the-road-to-learn-react") {
      name
      url
      repository(name: "the-road-to-learn-react") {
        name
        url
      }
    }
  }
`;
class App extends Component {
  ...
  onFetchFromGitHub = () => {
    axiosGitHubGraphQL
      .post('', { query: GET_REPOSITORY_OF_ORGANIZATION })
      .then(result =>
          ...
      );
  };
  ...
}

In this case, the repository name is identical to the ...