• better integrations with React components with great clients and typings generation
• Great client-side cache system allowing smart fetching policy and optimistic updates of the UI at low cost
• Faster data loading with fewer API roundtrips

• Migrate your React app without changing your APIs
• Migrating your API without rewriting it
• Rewriting your API in GraphQL

Migrate your React app only with Apollo

• it requires to rewrite all the business logic
• current APIs may not have useful GraphQL server libraries
• migrating existing APIs gradually might be hard

Use Apollo Link REST

Getting started in 2 minutes

1import { ApolloClient } from 'apollo-client';
2import { InMemoryCache } from 'apollo-cache-inmemory';
3import { RestLink } from 'apollo-link-rest';
4
5// setup your `RestLink` with your endpoint
6const restLink = new RestLink({ uri: "<YOUR_REST_API_PATH>" });
7
8// setup your client
9const client = new ApolloClient({
10  link: restLink,
11  cache: new InMemoryCache(),
12});

1const query = gql`
2  query todos {
3    todos @rest(type: "Todo", path: “todos", method: “GET”) {
4      id
5      title
6      createdAt: created_at
7    }
8  }
9`;
10// [...]
11const TodoList = () => {
12  const { data, loading } = useQuery(query)
13  // [...]
14}

1const query = gql`
2  query todos {
3    todos @rest(type: "Todo", path: “todos", method: “GET”) {
4      id
5      title
6      createdAt: created_at
7      user_id @export(as: "user_id")
8      user @rest(path: '/people/{exportVariables.user_id}', method: ‘GET’, type: 'User') {
9        firstName
10        lastName
11      }
12    }
13  }
14`;
15

What if I have multiple REST APIs?

1 const link = new RestLink({
2   endpoints: {
3      v1: 'api.com/v1',
4      v2: 'api.com/v2',
5      people: ‘people.api.com/v1’,
6   }
7});

1const query = gql`
2  query todos {
3    todos @rest(type: "Todo", path: “todos", method: “GET”, endpoint: ‘v2’) {
4      id
5      title
6      createdAt: created_at
7      user_id @export(as: "user_id")
8      user @rest(path: '/{exportVariables.user_id}', method: ‘GET’, type: 'User', endpoint: ‘people’) {
9        firstName
10        lastName
11      }
12    }
13  }
14`;
15

Takeaways

• it is a great temporary solution which does not bring all the advantages of using the “native” GraphQL approach, because of:
  • no Subscriptions support (realtime over WebSocket)
  • a lot of maintenance is required for large use-case (manual type mapping at the query level)
  • no TypeScript types generation
• there is no guarantee that Apollo will maintain this link in future releases

Migrate your API with GraphQL Mesh

Proxy your REST APIs

1sources:
2  - name: Spotify
3    handler:
4      openapi:
5        source: https://raw.githubusercontent.com/APIs-guru/openapi-directory/master/APIs/spotify.com/v1/swagger.yaml
6        operationHeaders:
7           Authorization: <Spotify Token>

• non specific maintenance on the front-end side
• Support for TypeScript types generation with GraphQL Code Generator

Secure your GraphQL Mesh server

• Add an authentication step.
• Limit available queries: https://www.apollographql.com/blog/securing-your-graphql-api-from-malicious-queries-16130a324a6b/

1transforms:
2  - resolversComposition:
3        - resolver: 'Query.me'
4          composer: is-auth#isAuth
5        - resolver: 'Mutation.*'
6          composer: is-admin#isAdmin

1export const isAuth = next => (root, args, context, info) => {
2    if(!context.currentUser) {
3        throw new Error('Unauthorized');
4    }
5    return next(root, args, context, info);
6}

Takeaways

• Low maintenance on the front-end side
• Support for TypeScript types generation with GraphQL Code Generator
• Possibility to extends existing APIs and migrate gradually
• Subscription over HTTP Webhooks

Rewrite your API in GraphQL

Rewrite simple (CRUD) APIs with Hasura

• blazing-fast performances over Postgres
• support of subscriptions over Postgres
• ACL support
• Support for custom logic with the “Actions feature”

Hybrid approach with Prisma

1const Query = objectType({
2  name: 'Query',
3  definition(t) {
4    t.crud.post()
5    t.list.field('feed', {
6      type: 'Post',
7      resolve: (_parent, _args, ctx) => {
8        return ctx.prisma.post.findMany({
9          where: { published: true },
10        })
11      },
12    })
13    t.list.field('filterPosts', {
14      type: 'Post',
15      args: {
16        searchString: stringArg({ nullable: true }),
17      },
18      resolve: (_, { searchString }, ctx) => {
19        return ctx.prisma.post.findMany({
20          where: {
21            OR: [
22              { title: { contains: searchString } },
23              { content: { contains: searchString } },
24            ],
25          },
26        })
27      },
28    })
29  },
30})
31

A complete rewrite with Apollo Server libraries

• Apollo Server
• Apollo Federation

• with the best Schema building tools
• with an express-like approach
• with subscriptions (realtime WebSocket) native support
• compatible with existing REST data sources thanks to the RESTDataSource.
• complete control over how custom are your resolvers since it’s plain node.js
• performance optimizations with persisted queries and caching

• Pros: your servers and related code are well organized following the Separation of Concerns (type or concepts based)
• Cons: all traffic comes through the gateway, which represents a bottleneck - and a SPOF
• Pros: your schema is distributed, and each service is responsible for well-defined types. Also, all your services are unified as a single GraphQL Schema.
• Cons: Apollo Federation does not support Subscriptions
• Pros/Cons: Apollo Federation is better used with Apollo Studio, which provides a set of great tools but also end-up in a vendor lock-in

Summary

• Migrate your React app without changing your APIs

• Migrating your API without rewriting it

• Rewriting your API in GraphQL

• Hasura is the go-to solution for a simple REST API based on Postgres with low business logic.
• Prisma is a great idea when it comes to avoiding the standard boilerplate of CRUD operations in a GraphQL API
• Finally, Apollo is providing all the tools for a complete from-scratch, production-ready and scalable API: from monolith to microservices-based APIs.