Save Hundreds of Lines of Code in Your Next GraphQL App With This One Weird Trick

Reducing boilerplate in GraphQL with new helper methods for creating mutations & subscriptions now available in the new version of the AWS AppSync SDK.

To learn more about AWS AppSync, click here or check out the docs here.

If you’ve ever worked with GraphQL in a client application, you’ve probably written your share of mutations with an optimistic UI, & subscriptions that update your UI as they come through.

These operations usually require quite a bit of repetitive logic, but for the most part do the exact same thing. For example, in a basic todo app, to create a mutation & provide an optimistic response you may have written the following code:

graphql(CreateTodo, {
    options: {
      update: (dataProxy, { data: { createTodo } }) => {
        const query = ListTodos
        const data = dataProxy.readQuery({ query })
        data.listTodos.items.push(createTodo)
        dataProxy.writeQuery({ query, data })
      }
    },
    props: props => ({
      createTodo: todo => props.mutate({
        variables: todo,
        optimisticResponse: () => ({
          createTodo: { id: uuidV4(), ...todo, __typename: 'Todo', version: 1 }
        }),
      })
    })
  }
)