How to use aws-appsync - 10 common examples

import Amplify, { Auth } from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';
import AWSAppSyncClient from 'aws-appsync';
import { Rehydrated } from 'aws-appsync-react';
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link';
import { Component } from 'react';
import { ApolloProvider } from 'react-apollo';
import Roundtrip from './Roundtrip';

const client = new AWSAppSyncClient({
  url: 'http://localhost:62222/graphql',
  // url:
    // 'https://sgdhr5dvovavfa6frgekxw3fi4.appsync-api.us-east-1.amazonaws.com/graphql',
  region: 'us-east-1',
  disableOffline: true,
  auth: {
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: async () =>
      (await Auth.currentSession()).getIdToken().getJwtToken(),
  },
});

console.log('>>> START');
Amplify.configure({
  Auth: {
    userPoolId: 'us-east-1_27WcML9k8',

import { withAuthenticator } from 'aws-amplify-react';
import AWSAppSyncClient from 'aws-appsync';
import { Rehydrated } from 'aws-appsync-react';
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link';
import { Component } from 'react';
import { ApolloProvider } from 'react-apollo';
import Roundtrip from './Roundtrip';

const client = new AWSAppSyncClient({
  url: 'http://localhost:62222/graphql',
  // url:
    // 'https://sgdhr5dvovavfa6frgekxw3fi4.appsync-api.us-east-1.amazonaws.com/graphql',
  region: 'us-east-1',
  disableOffline: true,
  auth: {
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: async () =>
      (await Auth.currentSession()).getIdToken().getJwtToken(),
  },
});

console.log('>>> START');
Amplify.configure({
  Auth: {
    userPoolId: 'us-east-1_27WcML9k8',
    userPoolWebClientId: 'q4ppu404sdiqlcjg21756hvap',
    region: 'us-east-1',
  },
});

class App extends Component {
  render() {

import { render } from "react-dom";
import ListItems from "./Components/listItems";
import AddItems from "./Components/addItems";
// The AppSync Import Bus
import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from "aws-appsync-react";
import { AUTH_TYPE } from "aws-appsync/lib/link/auth-link";
import { ApolloProvider } from "react-apollo";
import AppSync from "./AppSync.js";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const client = new AWSAppSyncClient({
  url: AppSync.graphqlEndpoint,
  region: AppSync.region,
  auth: {
    type: AUTH_TYPE.API_KEY,
    apiKey: AppSync.apiKey
  }
});

export default class App extends Component {
  state = { allItems: [] };

  render() {
    return (
      <div style="{styles}">
        <h2>Welcome to GraphQL + Amazon AppSync</h2>
        <em></em></div>

import NewDestinationsSubscription from './Queries/NewDestinationsSubscription';

import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from 'aws-appsync-react';
import { AUTH_TYPE } from "aws-appsync/lib/link/auth-link";
import { graphql, ApolloProvider, compose } from 'react-apollo';
import * as AWS from 'aws-sdk';
import AppSync from './aws-exports.js';
import AllDestinationsQuery from './Queries/AllDestinationsQuery';
import NewDestinationMutation from './Queries/NewDestinationMutation';

const client = new AWSAppSyncClient({
  url: AppSync.aws_appsync_graphqlEndpoint,
  region: AppSync.aws_appsync_region,
  auth: {
      type: AUTH_TYPE.API_KEY,
      apiKey: AppSync.aws_appsync_apiKey,

      // type: AUTH_TYPE.AWS_IAM,
      // Note - Testing purposes only
      /*credentials: new AWS.Credentials({
          accessKeyId: AWS_ACCESS_KEY_ID,
          secretAccessKey: AWS_SECRET_ACCESS_KEY
      })*/

      // Amazon Cognito Federated Identities using AWS Amplify
      //credentials: () => Auth.currentCredentials(),

      // Amazon Cognito user pools using AWS Amplify
      // type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
      // jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken(),
  },

ScrollView
} from 'react-native'
import ListItems from './Components/listItems'
import AddItems from './Components/addItems'
// The AppSync Import Bus
import AWSAppSyncClient from 'aws-appsync'
import { Rehydrated } from 'aws-appsync-react'
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link'
import { ApolloProvider } from 'react-apollo'
import AppSync from './AppSync.js'

const client = new AWSAppSyncClient({
  url: AppSync.graphqlEndpoint,
  region: AppSync.region,
  auth: {
    type: AUTH_TYPE.API_KEY,
    apiKey: AppSync.apiKey
  }
})

class App extends Component {
  state = { allItems: [] }
  render () {
    return (

import Search from './routes/Search';
import { Footer } from './components/helpers';

Amplify.configure({
  Auth: {
    region: process.env.REACT_APP_AWS_AUTH_REGION, // REQUIRED - Amazon Cognito Region
    userPoolId: process.env.REACT_APP_USER_POOL_ID, // OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: process.env.REACT_APP_CLIENT_APP_ID, // User Pool App Client ID
  },
});

const client = new AWSAppSyncClient({
  url: process.env.REACT_APP_GRAPHQL_ENDPOINT,
  region: process.env.REACT_APP_AWS_CLIENT_REGION,
  auth: {
    type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: async () =>
      (await Auth.currentSession()).getIdToken().getJwtToken(),
  },
});

const WithProvider = () => (
  
    
      
        
        
        
        <footer>
          Home
          <span> | </span>
          Search</footer>

constructor() {
     const client = new AWSAppSyncClient({
       url: aws_exports.aws_appsync_graphqlEndpoint,
       region: aws_exports.aws_project_region,
       auth: {
         type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
         jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken()
       }
     });
     // this.hc = client.hydrated;
     this._hc = client;
   }
   hc() {

setItem: function (key, value) {
    this.store[key] = value
  },
  // @ts-ignore
  removeItem: function (key) {
    delete this.store[key]
  }
};

import 'isomorphic-fetch';
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link';
import AWSAppSyncClient from 'aws-appsync';

const url = process.env.GRAPHQL;
const region = 'us-west-2';
const type = AUTH_TYPE.AWS_IAM;
import AWS from 'aws-sdk';
const credentials = AWS.config.credentials;

// Import gql helper and craft a GraphQL query
const gql = require('graphql-tag');
const mutation = gql(`
mutation PutImage($input: ImageInput!) {
  putImage(input: $input) {
    id
    name
    lastModified
    filename
    paths {
      path
      type
    }

this.store[key] = value
  },
  // @ts-ignore
  removeItem: function (key) {
    delete this.store[key]
  }
};

import 'isomorphic-fetch';
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link';
import AWSAppSyncClient from 'aws-appsync';
import { DocumentNode } from 'graphql';

const url = process.env.GRAPHQL;
const region = process.env.AWS_REGION;
const type = AUTH_TYPE.AWS_IAM;
import AWS from 'aws-sdk';

AWS.config.update({
  region,
  credentials: new AWS.Credentials(process.env.AWS_ACCESS_KEY_ID, process.env.AWS_SECRET_ACCESS_KEY, process.env.AWS_SESSION_TOKEN)
});

const credentials = AWS.config.credentials;

// Set up Apollo client
const client = new AWSAppSyncClient({
  url,
  region,
  auth: {
    type: type,
    credentials: credentials,

console.log(
                `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
            )
        );
    if (networkError) console.log(`[Network error]: ${networkError}`);
});

AWS.config.update({ region: "eu-west-1" });
const appSyncLink = createAppSyncLink({
    url:
        process.env.NODE_ENV === "development"
            ? process.env.REACT_APP_LOCAL_APPSYNC_URL
            : "https://vipqqwuxvfdn7gaos7u4aav3su.appsync-api.eu-west-1.amazonaws.com/graphql",
    region: "eu-west-1",
    auth: {
        type: AUTH_TYPE.AWS_IAM,
        credentials: new AWS.CognitoIdentityCredentials({
            IdentityPoolId: "eu-west-1:dffe4e03-9e89-4118-911f-ee327e257d9f"
        })
    }
});

const link = ApolloLink.from([authLink, errorLink, appSyncLink]);

const client = new AWSAppSyncClient({ disableOffline: true }, { link });

const app = (
    
        
            
                {client => }