search

0xdevalias / devalias.net

Source for devalias.net
http://www.devalias.net/
48 stars 10 forks source link

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

Open 0xdevalias opened 4 years ago

0xdevalias commented 4 years ago

GraphQL

Apollo GraphQL

AWS AppSync

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

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!

Fauna

The database built for serverless, featuring native GraphQL

Unsorted

See Also