GraphQL Demo

This demo shows how to load data from a GraphQL endpoint. You can navigate through a social network while lazily fetching new data.

Details

This demo fetches its data from the server using the GraphQL query language. You can start the server by changing to the ./server/ directory and running

> npm install
> npm start

The GraphQL endpoint defines this schema which models a social network with persons and their friends:

type Query {
  persons: [Person!]
  person(id: ID!): Person
}

type Person {
  id: ID!
  name: String!
  icon: String!
  friendsCount: Int!
  friends: [Person!]!
}

The client fetches its data lazily on demand: When nodes are expanded, it issues a query that only fetches the friends of the expanded person.

The GraphQL endpoint is a simple Express server that utilizes the GraphQL reference implementation and is backed by simple JSON data.

Have a look at the source code to see the specific GraphQL queries and backend implementation.