Using Modern Directives (defer, stream)

query Profile {
  user(id: "1") {
    id
    name
    ... @defer(label: "stats") {
      activityStats { posts comments likes }
    }
  }
}

query Feed {
  posts {
    id
    title
    comments @stream(initialCount: 5) {
      id
      body
    }
  }
}

// First payload
{ "data": { "user": { "id": "1", "name": "Ada" } }, "hasNext": true }

// Subsequent
{ "incremental": [{ "path": ["user"], "data": { "activityStats": { ... } } }], "hasNext": false }

query Dashboard {
  ... @defer {
    feed {
      items @stream(initialCount: 3) { id title }
    }
  }
}

import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";

const client = new ApolloClient({
  link: new HttpLink({ uri: "/graphql" }),
  cache: new InMemoryCache(),
});

// useQuery returns initial + incremental updates automatically