apollo-elements/apollo-elements

View on GitHub
docs/blog/next-evolution/_assets/multiple-controllers/graphql.documents.ts

Summary

Maintainability
A
40 mins
Test Coverage
import { ApolloClient, InMemoryCache, gql, TypedDocumentNode } from '@apollo/client/core';
import { SchemaLink } from '@apollo/client/link/schema';
import { makeExecutableSchema } from '@graphql-tools/schema';

import '@material/mwc-textfield';
import '@material/mwc-linear-progress';
import '@material/mwc-list';
import '@material/mwc-button';

interface User {
  id: number;
  name: string;
  picture?: string;
}

export const UsersQuery: TypedDocumentNode<{ users: User[] }> = gql`
query Users {
  users {
    id
    name
    picture
  }
}
`;
export const AddUserMutation: TypedDocumentNode<{ addUser: User }, { name: string }> = gql`
mutation AddUser($name: String) {
  addUser(name: $name) {
    id
    name
  }
}
`;

async function randomDelay(range = 2000) {
  await new Promise(r => setTimeout(r, Math.floor(Math.random() * range)));
}

const USERS: User[] = [
  { id: 1, name: 'Neil', picture: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Neil_Armstrong_pose.jpg/1024px-Neil_Armstrong_pose.jpg?1623601441968' },
  { id: 2, name: 'Buzz', picture: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Buzz_Aldrin.jpg/1024px-Buzz_Aldrin.jpg?1623601483170' },
  { id: 3, name: 'Michael', picture: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Michael_Collins_%28S69-31742%2C_restoration%29.jpg/1024px-Michael_Collins_%28S69-31742%2C_restoration%29.jpg?1623601522599' },
];

const nextID = () => (Math.max(...USERS.map(x => x.id)) ?? 0) + 1;

window.__APOLLO_CLIENT__ = new ApolloClient({
  cache: new InMemoryCache(),
  link: new SchemaLink({
    schema: makeExecutableSchema({
      resolvers: {
        User: {
          async picture({ name, picture }) {
            return picture ?? await fetch(`https://ui-avatars.com/api/?background=random&name=${name.replace(/\s/g, '+')}`).then(r => r.url)
          },
        },
        Query: {
          async users() {
            await randomDelay();
            return USERS;
          },
        },
        Mutation: {
          async addUser(_, { name }) {
            const user = { name, id: nextID() };
            USERS.push(user);
            await randomDelay();
            return user;
          },
        },
      },
      typeDefs: `
        type User {
          id: ID!
          name: String!
          picture: String
        }

        type Query {
          users: [User]
        }

        type Mutation {
          addUser(name: String!): User
        }
      `,
    }),
  }),
});