test: apollo-federation example (#1754)

* test: apollo-federation example

* make tests work

* docs

* prettier

Author: saihaj

examples/apollo-federation/__integration-tests__/apollo-federation.spec.ts

@@ -0,0 +1,54 @@
+import { gateway, DataSource } from '../gateway/gateway'
+import { yoga as service1 } from '../service/yoga'
+import { createServer, Server } from 'http'
+import { AddressInfo } from 'net'
+import { fetch } from '@whatwg-node/fetch'
+import type { GatewayConfig } from '@apollo/gateway'
+
+describe('apollo-federation example integration', () => {
+  let gatewayServer: Server
+  let serviceServer: Server
+  let gatewayPort: number
+  let servicePort: number
+
+  beforeAll(async () => {
+    serviceServer = createServer(service1)
+    await new Promise<void>((resolve) => serviceServer.listen(0, resolve))
+    servicePort = (serviceServer.address() as AddressInfo).port
+
+    const gatewayConfig: GatewayConfig = {
+      serviceList: [
+        { name: 'accounts', url: `http://localhost:${servicePort}/graphql` },
+      ],
+      introspectionHeaders: {
+        accept: 'application/json',
+      },
+      buildService({ url }) {
+        return new DataSource({ url })
+      },
+    }
+
+    const gatewayService = await gateway(gatewayConfig)
+    gatewayServer = createServer(gatewayService)
+    await new Promise<void>((resolve) => gatewayServer.listen(0, resolve))
+    gatewayPort = (gatewayServer.address() as AddressInfo).port
+  })
+
+  afterAll(async () => {
+    await new Promise((resolve) => gatewayServer.close(resolve))
+    await new Promise((resolve) => serviceServer.close(resolve))
+  })
+
+  it('should execute field on subgraph', async () => {
+    const response = await fetch(
+      `http://localhost:${gatewayPort}/graphql?query=query{me { id }}`,
+    )
+    const body = await response.json()
+    expect(body.errors).toBeUndefined()
+    expect(body.data).toEqual({
+      me: {
+        id: '1',
+      },
+    })
+  })
+})

examples/apollo-federation/gateway/gateway.js

@@ -0,0 +1,33 @@
+const { createYoga } = require('graphql-yoga')
+const { ApolloGateway, RemoteGraphQLDataSource } = require('@apollo/gateway')
+const { useApolloFederation } = require('@envelop/apollo-federation')
+
+export async function gateway(config) {
+  // Initialize the gateway
+  const gateway = new ApolloGateway(config)
+
+  // Make sure all services are loaded
+  await gateway.load()
+
+  const yoga = createYoga({
+    plugins: [
+      useApolloFederation({
+        gateway,
+      }),
+    ],
+  })
+
+  return yoga
+}
+
+/**
+ * Needed since federation remote data source fetcher
+ * doesn't support `application/graphql-response+json` content type
+ * By default Yoga uses `application/graphql-response+json` content type as per the GraphQL over HTTP spec
+ * https://github.com/apollographql/federation/issues/2161
+ */
+export class DataSource extends RemoteGraphQLDataSource {
+  willSendRequest({ request }) {
+    request.http.headers.set('accept', 'application/json')
+  }
+}

examples/apollo-federation/gateway/index.js

@@ -1,26 +1,15 @@
 const { createServer } = require('http')
-const { createYoga } = require('graphql-yoga')
-const { ApolloGateway } = require('@apollo/gateway')
-const { useApolloFederation } = require('@envelop/apollo-federation')
+const { gateway, DataSource } = require('./gateway')
 
 async function main() {
-  // Initialize the gateway
-  const gateway = new ApolloGateway({
+  const yoga = gateway({
     serviceList: [
       { name: 'accounts', url: 'http://localhost:4001/graphql' },
       // ...additional subgraphs...
     ],
-  })
-
-  // Make sure all services are loaded
-  await gateway.load()
-
-  const yoga = createYoga({
-    plugins: [
-      useApolloFederation({
-        gateway,
-      }),
-    ],
+    buildService({ url }) {
+      return new DataSource({ url })
+    },
   })
 
   // Start the server and explore http://localhost:4000/graphql

examples/apollo-federation/service/index.js

@@ -1,34 +1,5 @@
-const { parse } = require('graphql')
-const { buildSubgraphSchema } = require('@apollo/subgraph')
 const { createServer } = require('http')
-const { createYoga } = require('graphql-yoga')
-
-const typeDefs = parse(/* GraphQL */ `
-  type Query {
-    me: User
-  }
-
-  type User @key(fields: "id") {
-    id: ID!
-    username: String
-  }
-`)
-
-const resolvers = {
-  Query: {
-    me() {
-      return { id: '1', username: '@ava' }
-    },
-  },
-  User: {
-    __resolveReference(user, { fetchUserById }) {
-      return fetchUserById(user.id)
-    },
-  },
-}
-const yoga = createYoga({
-  schema: buildSubgraphSchema([{ typeDefs, resolvers }]),
-})
+const { yoga } = require('./yoga')
 
 const server = createServer(yoga)
 

examples/apollo-federation/service/yoga.js

@@ -0,0 +1,31 @@
+const { parse } = require('graphql')
+const { buildSubgraphSchema } = require('@apollo/subgraph')
+const { createYoga } = require('graphql-yoga')
+
+const typeDefs = parse(/* GraphQL */ `
+  type Query {
+    me: User
+  }
+
+  type User @key(fields: "id") {
+    id: ID!
+    username: String
+  }
+`)
+
+const resolvers = {
+  Query: {
+    me() {
+      return { id: '1', username: '@ava' }
+    },
+  },
+  User: {
+    __resolveReference(user, { fetchUserById }) {
+      return fetchUserById(user.id)
+    },
+  },
+}
+
+export const yoga = createYoga({
+  schema: buildSubgraphSchema([{ typeDefs, resolvers }]),
+})

website/src/pages/docs/features/apollo-federation.mdx

@@ -34,16 +34,34 @@ Thanks to [Envelop's Apollo Federation](https://envelop.dev/plugins/use-apollo-f
 
 ```ts
 import { createServer } from '@graphql-yoga/node'
-import { ApolloGateway } from '@apollo/gateway'
+import { ApolloGateway, RemoteGraphQLDataSource } from '@apollo/gateway'
 import { useApolloFederation } from '@envelop/apollo-federation'
 
+/**
+ * Needed since federation remote data source fetcher
+ * doesn't support `application/graphql-response+json` content type
+ * https://github.com/apollographql/federation/issues/2161
+ * And yoga defaults to `application/graphql-response+json` as per the spec.
+ */
+class DataSource extends RemoteGraphQLDataSource {
+  willSendRequest({ request }) {
+    request.http.headers.set('accept', 'application/json')
+  }
+}
+
 // Initialize the gateway
 const gateway = new ApolloGateway({
   serviceList: [
     { name: 'accounts', url: 'http://localhost:4001' },
     { name: 'products', url: 'http://localhost:4002' },
     // ...additional subgraphs...
   ],
+  introspectionHeaders: {
+    accept: 'application/json',
+  },
+  buildService({ url }) {
+    return new DataSource({ url })
+  },
 })
 
 // Make sure all services are loaded

website/src/pages/v3/comparison.mdx

@@ -28,13 +28,13 @@ Apollo Server plans to drop active support for cloudflare workers and [pushes it
 GraphQL Yoga will continuously support all platforms and runtimes **wihtout any changes in your code** and
 Furthermore, Yoga has a full end to end testing suite that actually deploys to all those runtimes in order to ensure integrity and prevent unexpected issues.
 
-Current list of supported and tested platform: 
+Current list of supported and tested platform:
 
 Node ([Express](https://www.the-guild.dev/graphql/yoga-server/v3/integrations/integration-with-express), [Fastify](https://www.the-guild.dev/graphql/yoga-server/v3/integrations/integration-with-fastify), [Koa](https://www.the-guild.dev/graphql/yoga-server/v3/integrations/integration-with-koa), [NestJS](https://www.the-guild.dev/graphql/yoga-server/v3/integrations/integration-with-nestjs), [SvelteKit](https://www.the-guild.dev/graphql/yoga-server/v3/integrations/integration-with-sveltekit)), [AWS Lambda](https://www.the-guild.dev/graphql/yoga-server/v3/integrations/integration-with-aws-lambda), [Cloudflare Workers](https://www.the-guild.dev/graphql/yoga-server/v3/integrations/integration-with-cloudflare-workers), [Deno](https://www.the-guild.dev/graphql/yoga-server/v3/integrations/integration-with-deno), [NextJS API Routes](https://www.the-guild.dev/graphql/yoga-server/v3/integrations/integration-with-nextjs), [Bun](https://www.the-guild.dev/graphql/yoga-server/v3/integrations/integration-with-bun) and [more](https://www.the-guild.dev/graphql/yoga-server/v3/integrations/z-other-environments)..
 
 ### Powerful Plugin System
 
-GraphQL Yoga is built on top of [Envelop](https://envelop.dev/) - the powerful GraphQL [plugin system](https://www.envelop.dev/plugins). 
+GraphQL Yoga is built on top of [Envelop](https://envelop.dev/) - the powerful GraphQL [plugin system](https://www.envelop.dev/plugins).
 
 Unfortunately Apollo Server is not fully compatible with it, there is still no further follow-up from the apollo maintainers over [on the Apollo Server and envelop discussion](https://github.com/apollographql/apollo-server/discussions/5541).
 
@@ -85,7 +85,7 @@ GraphQL Yoga has significantly less latency and much higher requests rate than A
 
 ### GraphiQL
 
-While Apollo Server is shipping with their proprietary and less updated hosted IDE and removed the default open source GraphiQL, 
+While Apollo Server is shipping with their proprietary and less updated hosted IDE and removed the default open source GraphiQL,
 GraphQL Yoga ships with the latest and greatest from the open source, Foundation backed [GraphiQL IDE](https://github.com/graphql/graphiql) and we support and contribute to the project.
 
 ### Compatibility with Apollo Federation