[DeepDive] GraphQL, Apollo, AWS AppSync, Fauna, etc

[0xdevalias]

GraphQL

• https://graphql.org/
  • https://graphql.org/learn/
  • https://graphql.org/learn/schema/
  • https://graphql.org/learn/schema/#type-system
  • https://graphql.org/learn/schema/#object-types-and-fields
  • https://graphql.org/learn/schema/#arguments
  • https://graphql.org/learn/schema/#the-query-and-mutation-types
  • https://graphql.org/learn/schema/#scalar-types
  • https://graphql.org/learn/schema/#enumeration-types
  • https://graphql.org/learn/schema/#interfaces
  • https://graphql.org/learn/schema/#union-types

    • Note that members of a union type need to be concrete object types; you can't create a union type out of interfaces or other unions.

  • https://graphql.org/learn/schema/#lists-and-non-null
  • https://graphql.org/learn/schema/#input-types
  • https://graphql.org/graphql-js/
    • https://graphql.org/graphql-js/basic-types/
    • https://graphql.org/graphql-js/constructing-types/
• https://github.com/graphql/graphql-spec/
  • Proposal: Support union scalar types graphql/graphql-spec#215

    • Proposal: Support union scalar types

• https://www.howtographql.com/

Apollo GraphQL

• https://www.apollographql.com/
  • https://www.apollographql.com/docs/
    • https://www.apollographql.com/docs/tutorial/introduction/
    • https://www.apollographql.com/docs/react/
      • https://www.apollographql.com/docs/react/get-started/
        • https://www.apollographql.com/docs/react/get-started/#apollo-boost
      • https://www.apollographql.com/docs/react/data/queries/
        • useQuery
        • useLazyQuery
      • https://www.apollographql.com/docs/react/data/mutations/
        • useMutation
      • https://www.apollographql.com/docs/react/integrations/webpack/

        • The package graphql-tag comes with a loader easy to setup and with some benefits:

          • Do not process GraphQL ASTs on client-side

          • Enable queries to be separated from logic

      • https://www.apollographql.com/docs/react/performance/babel/
        • babel-plugin-graphql-tag
        • graphql-tag.macro
        • babel-plugin-import-graphql
      • API
        • https://www.apollographql.com/docs/react/api/apollo-client/
        • https://www.apollographql.com/docs/react/api/react-hooks/
          • useQuery, useLazyQuery, useMutation, useSubscription, useApolloClient
        • https://www.apollographql.com/docs/react/api/react-ssr/
        • https://www.apollographql.com/docs/react/api/react-testing/
        • https://www.apollographql.com/docs/react/api/react-components/
        • https://www.apollographql.com/docs/react/api/react-hoc/
        • https://www.apollographql.com/docs/react/api/react-common/
    • https://www.apollographql.com/docs/ios/
    • https://www.apollographql.com/docs/apollo-server/
      • https://www.apollographql.com/docs/apollo-server/data/subscriptions/
    • https://www.apollographql.com/docs/graph-manager/

      • Apollo Graph Manager (formerly Apollo Engine) is a cloud service that helps you manage, validate, and secure your organization's data graph.

• https://github.com/apollographql
  • https://github.com/apollographql/apollo-client
  • https://github.com/apollographql/react-apollo
  • https://github.com/apollographql/apollo-ios
  • https://github.com/apollographql/apollo-android
  • https://github.com/apollographql/apollo-server
  • https://github.com/apollographql/apollo-tooling
  • https://github.com/apollographql/apollo-link
    • https://www.apollographql.com/docs/link/
      • apollo-link-http, apollo-link-state, apollo-link-rest, apollo-link-error, apollo-link-context, apollo-link-retry, apollo-link-ws, apollo-link-batch-http, apollo-link-dedup, apollo-link-schema
  • https://github.com/apollographql/graphql-subscriptions

AWS AppSync

AppSync is a managed service that uses GraphQL to make it easy for applications to get exactly the data they need.

• https://aws.amazon.com/appsync/
• https://aws-amplify.github.io/docs/js/api
  • Amplify GraphQL client

    • The API category provides a GraphQL client for working with queries, mutations, and subscriptions. This client does not support offline programming.

  • AWS AppSync SDK

    • The following documentation outlines how to use the Apollo client with AWS AppSync and important client APIs to understand.

• https://github.com/awslabs/aws-mobile-appsync-sdk-js

  • This SDK can be used with the Apollo JavaScript client

    • https://github.com/apollographql/apollo-client
  • https://github.com/awslabs/aws-mobile-appsync-sdk-js#using-authorization-and-subscription-links-with-apollo-client-no-offline-support
    • Mutations fail using aws-appsync with @apollo/react-hooks 3.0.0 awslabs/aws-mobile-appsync-sdk-js#450 (comment)
      • seems very similar to the setup in the readme
    • Mutations fail using aws-appsync with @apollo/react-hooks 3.0.0 awslabs/aws-mobile-appsync-sdk-js#450 (comment)
      • talks about separating the 'links' packages used in the readme example
    • Mutations fail using aws-appsync with @apollo/react-hooks 3.0.0 awslabs/aws-mobile-appsync-sdk-js#450 (comment)
      • https://github.com/wolfeidau/appsync-apollo-links
        • this seems to be a pretty solid canonical example, potentially better than the one in the readme, though very similar in practice
        • includes Cognito UserPool support
        • https://github.com/wolfeidau/appsync-apollo-links#code
• https://www.yannisspyrou.com/querying-app-sync-using-react-hooks
  • this is another example, but possibly not as good as the one above from the awslabs/aws-mobile-appsync-sdk-js readme/related issues

Example: React + Apollo + AppSync

Note that we alias apollo-client to point to @apollo/client here because aws-appsync-subscription-link has a peerDependency on "apollo-client": "2.x":

package.json

{
  "dependencies": {
    "@apollo/client": "^3.0.0-beta.41",
    "apollo-client": "npm:@apollo/client@^3.0.0-beta.41",
    "aws-amplify": "1.1.31-preview.111",
    "aws-appsync-auth-link": "^2.0.1",
    "aws-appsync-subscription-link": "^2.0.1",
    "graphql": "^15.0.0",
    "graphql-tag": "^2.10.3",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

import React from 'react'
import ReactDOM from 'react-dom'

import { Auth, Hub } from 'aws-amplify'

import {
  ApolloProvider,
  ApolloClient,
  ApolloLink,
  InMemoryCache,
} from '@apollo/client'

import { createAuthLink } from 'aws-appsync-auth-link'
import { createSubscriptionHandshakeLink } from 'aws-appsync-subscription-link'

// https://aws-amplify.github.io/docs/js/hub
Hub.listen(/.*/, ({ channel, payload }) =>
  console.debug(`[hub::${channel}::${payload.event}]`, payload)
)

// https://aws-amplify.github.io/docs/js/authentication#manual-setup
Auth.configure({
  region: process.env.REACT_APP_AUTH_REGION,
  userPoolId: process.env.REACT_APP_AUTH_USER_POOL_ID,
  userPoolWebClientId: process.env.REACT_APP_AUTH_USER_POOL_CLIENT_ID,

  // Cognito Hosted UI configuration
  oauth: {
    domain: process.env.REACT_APP_AUTH_DOMAIN,
    scope: ['email', 'profile', 'openid'],
    redirectSignIn: document.location.origin,
    redirectSignOut: document.location.origin,
    responseType: 'code',
  },
})

const getAccessToken = async () =>
  Auth.currentSession().then(session => session.getAccessToken().getJwtToken())

const url = process.env.REACT_APP_APPSYNC_URL
const region = process.env.REACT_APP_APPSYNC_REGION

const loggedInAuth = {
  type: 'AMAZON_COGNITO_USER_POOLS',
  jwtToken: getAccessToken,
}

const anonymousAuth = {
  type: 'API_KEY',
  apiKey: process.env.REACT_APP_APPSYNC_API_KEY,
}

const searchParams = new URLSearchParams(window.location.search)
const isClient = searchParams.has('client')

const auth = isClient ? loggedInAuth : anonymousAuth

// https://github.com/awslabs/aws-mobile-appsync-sdk-js#using-authorization-and-subscription-links-with-apollo-client-no-offline-support
const link = ApolloLink.from([
  createAuthLink({ url, region, auth }),
  createSubscriptionHandshakeLink({ url, region, auth }),
])

const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
})

ReactDOM.render(
  <ApolloProvider client={apolloClient}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
)

Type GraphQL (TypeScript)

Create GraphQL schema and resolvers with TypeScript, using classes and decorators!

• https://typegraphql.com/
  • https://typegraphql.com/docs/introduction.html
• https://github.com/MichalLytek/type-graphql
  • https://github.com/typestack/class-validator

    • Validation made easy using TypeScript decorators.

Fauna

The database built for serverless, featuring native GraphQL

• https://fauna.com/
  • https://fauna.com/blog
    • https://fauna.com/blog/jamstack
  • https://fauna.com/pricing
  • https://docs.fauna.com/fauna/current/start/graphql
  • https://docs.fauna.com/fauna/current/api/graphql/
  • https://fauna.com/blog/getting-started-with-graphql-part-1-importing-and-querying-your-schema
  • https://fauna.com/blog/getting-started-with-graphql-part-2-relations
  • https://fauna.com/blog/getting-started-with-graphql-part-3-the-unique-directive
  • https://fauna.com/blog/getting-started-with-graphql-part-4-updating-your-schema

Unsorted

• https://github.com/taion/graphql-type-json

See Also

• [DeepDive] Serverless Web App + Chat Bot + Mobile App (iOS) + Desktop App (Catalyst, Electron) #10