n4bb12/apollo-managed-federation-example

💡 An example of using GraphQL managed Federation with Apollo Studio

Apollo Managed Federation Example

An example of using GraphQL managed Federation with Apollo Studio.

Prerequisites

Git | Bash | Node | Yarn

Usage

git clone https://github.com/n4bb12/apollo-managed-federation-example
cd apollo-managed-federation-example
yarn dev
open http://localhost:3000

Types

To re-generate TypeScript types for this project, run

yarn types

Workflows Compared

Introspect and Compose

flowchart BT
  classDef blue fill: transparent, stroke: #3f5eff, stroke-width: 2px

  GW([Gateway]):::blue-->|introspect|A[Accounts]:::blue
  GW-->|introspect|P[Products]:::blue
  GW-->|introspect|R[Reviews]:::blue
  GW-->|compose supergraph schema|GW

Loading

const supergraphSdl = new IntrospectAndCompose({
  subgraphs: [
    { name: "accounts", url: "http://localhost:3001" },
    { name: "products", url: "http://localhost:3002" },
    { name: "reviews", url: " http://localhost:3003" },
  ],
})

const gateway = new ApolloGateway({ supergraphSdl })
const server = new ApolloServer({ gateway })

server.listen(3000)

Compose Offline

flowchart BT
  classDef blue fill: transparent, stroke: #3f5eff, stroke-width: 2px
  classDef pink fill: transparent, stroke: #eb0195, stroke-width: 2px

  CLI{{Rover CLI}}:::pink-->|introspect|A[Accounts]:::blue
  CLI-->|introspect|P[Products]:::blue
  CLI-->|introspect|R[Reviews]:::blue
  CLI-->|compose|S[[supergraph schema]]:::blue
  GW([Gateway]):::blue-->|load|S

Loading

Compose Supergraph Locally

subgraphs:
  accounts:
    routing_url: http://localhost:3001
    schema:
      file: src/accounts/schema.gql
  products:
    routing_url: http://localhost:3002
    schema:
      file: src/products/schema.gql
  reviews:
    routing_url: http://localhost:3003
    schema:
      file: src/reviews/schema.gql

rover supergraph compose \
  --config ./supergraph.yml > src/gateway/schema.gql

const supergraphSdl = readFileSync("schema.gql", "utf8")

const gateway = new ApolloGateway({ supergraphSdl })
const server = new ApolloServer({ gateway })

server.listen(3000)

Managed Federation

flowchart TD
  classDef blue fill: transparent, stroke: #3f5eff, stroke-width: 2px
  classDef pink fill: transparent, stroke: #eb0195, stroke-width: 2px

  A[Accounts]:::blue-->|publish|REG{{Apollo Schema Registry}}:::pink
  P[Products]:::blue-->|publish|REG
  R[Reviews]:::blue-->|publish|REG
  REG-->|compose supergraph schema|REG
  REG-->|update|UP{{Apollo Uplink}}:::pink
  GW([Gateway]):::blue-->|poll for changes|UP

  subgraph Apollo Cloud
  REG
  UP
  end

Loading

Authenticate Rover

rover config auth
rover config whoami

Publish Subgraph

rover subgraph publish apollo-managed-federation-example@current \
  --name accounts \
  --schema src/accounts/schema.gql \
  --routing-url http://localhost:3001

rover subgraph publish apollo-managed-federation-example@current \
  --name products \
  --schema src/products/schema.gql \
  --routing-url http://localhost:3002

rover subgraph publish apollo-managed-federation-example@current \
  --name reviews \
  --schema src/reviews/schema.gql \
  --routing-url http://localhost:3003