Use AWS AppSync with JavaScript apps ·

AWS AppSync Links for Apollo V3 (Maintenance mode)

React / React Native

Using Authorization and Subscription links with Apollo Client V3 (No offline support)

import{createAuthLink}from"aws-appsync-auth-link";import{createSubscriptionHandshakeLink}from"aws-appsync-subscription-link";import{ApolloProvider,ApolloClient,InMemoryCache,HttpLink,ApolloLink,}from"@apollo/client";importappSyncConfigfrom"./aws-exports";/* The HTTPS endpoint of the AWS AppSync API(e.g. *https://aaaaaaaaaaaaaaaaaaaaaaaaaa.appsync-api.us-east-1.amazonaws.com/graphql*).[Custom domain names](https://docs.aws.amazon.com/appsync/latest/devguide/custom-domain-name.html) can also be supplied here (e.g. *https://api.yourdomain.com/graphql*).Custom domain names can have any format, but must end with `/graphql`(see https://graphql.org/learn/serving-over-http/#uris-routes). */consturl=appSyncConfig.aws_appsync_graphqlEndpoint;constregion=appSyncConfig.aws_appsync_region;constauth={type:appSyncConfig.aws_appsync_authenticationType,apiKey:appSyncConfig.aws_appsync_apiKey,// jwtToken: async () => token, // Required when you use Cognito UserPools OR OpenID Connect. token object is obtained previously// credentials: async () => credentials, // Required when you use IAM-based auth.};consthttpLink=newHttpLink({uri:url});constlink=ApolloLink.from([createAuthLink({ url, region, auth}),createSubscriptionHandshakeLink({ url, region, auth},httpLink),]);constclient=newApolloClient({  link,cache:newInMemoryCache(),});constApolloWrapper=({ children})=>{return<ApolloProviderclient={client}>{children}</ApolloProvider>;};

Queries and Subscriptions using Apollo V3

importReact,{useState,useEffect}from"react";import{gql,useSubscription}from"@apollo/client";import{useMutation,useQuery}from"@apollo/client";import{v4asuuidv4}from"uuid";constinitialState={name:"",description:""};constApp=()=>{constLIST_TODOS=gql`    query listTodos {      listTodos {        items {          id          name          description        }      }    }  `;const{loading:listLoading,data:listData,error:listError,}=useQuery(LIST_TODOS);constCREATE_TODO=gql`    mutation createTodo($input: CreateTodoInput!) {      createTodo(input: $input) {        id        name        description      }    }  `;// https://www.apollographql.com/docs/react/data/mutations/const[addTodoMutateFunction,{error:createError}]=useMutation(CREATE_TODO);asyncfunctionaddTodo(){try{addTodoMutateFunction({variables:{input:{ todo}}});}catch(err){console.log("error creating todo:",err);}}constDELETE_TODO=gql`    mutation deleteTodo($input: DeleteTodoInput!) {      deleteTodo(input: $input) {        id        name        description      }    }  `;const[deleteTodoMutateFunction]=useMutation(DELETE_TODO,{refetchQueries:[LIST_TODOS,"listTodos"],});asyncfunctionremoveTodo(id){try{deleteTodoMutateFunction({variables:{input:{ id}}});}catch(err){console.log("error deleting todo:",err);}}constCREATE_TODO_SUBSCRIPTION=gql`    subscription OnCreateTodo {      onCreateTodo {        id        name        description      }    }  `;const{data:createSubData,error:createSubError}=useSubscription(CREATE_TODO_SUBSCRIPTION);return(// Render TODOs);};exportdefaultApp;

AWS AppSync JavaScript SDK based on Apollo V2 (Maintenance mode)

Installation

npm

npm install --save aws-appsync

yarn

yarn add aws-appsync

React Native Compatibility

npm install --save @react-native-community/netinfo@5.9.4 @react-native-community/async-storage

yarn add @react-native-community/netinfo@5.9.4 @react-native-community/async-storage

npx pod-install

Creating a client with AppSync SDK for JavaScript V2 (Maintenance mode)

importAWSAppSyncClientfrom"aws-appsync";importAppSyncConfigfrom"./aws-exports";import{ApolloProvider}from"react-apollo";import{Rehydrated}from"aws-appsync-react";// this needs to also be installed when working with ReactimportAppfrom"./App";constclient=newAWSAppSyncClient({/* The HTTPS endpoint of the AWS AppSync API  (e.g. *https://aaaaaaaaaaaaaaaaaaaaaaaaaa.appsync-api.us-east-1.amazonaws.com/graphql*).  [Custom domain names](https://docs.aws.amazon.com/appsync/latest/devguide/custom-domain-name.html) can also be supplied here (e.g. *https://api.yourdomain.com/graphql*).  Custom domain names can have any format, but must end with `/graphql`  (see https://graphql.org/learn/serving-over-http/#uris-routes). */url:AppSyncConfig.aws_appsync_graphqlEndpoint,region:AppSyncConfig.aws_appsync_region,auth:{type:AppSyncConfig.aws_appsync_authenticationType,apiKey:AppSyncConfig.aws_appsync_apiKey,// jwtToken: async () => token, // Required when you use Cognito UserPools OR OpenID Connect. Token object is obtained previously// credentials: async () => credentials, // Required when you use IAM-based auth.},});constWithProvider=()=>(<ApolloProviderclient={client}><Rehydrated><App/></Rehydrated></ApolloProvider>);exportdefaultWithProvider;

Queries

importgqlfrom"graphql-tag";import{graphql}from"react-apollo";constlistPosts=gql`  query listPosts {    listPosts {      items {        id        name      }    }  }`;classAppextendsComponent{render(){return(<div>{this.props.posts.map((post,index)=>(<h2key={post.id ?post.id :index}>{post.name}</h2>))}</div>);}}exportdefaultgraphql(listPosts,{options:{fetchPolicy:"cache-and-network",},props:(props)=>({posts:props.data.listPosts ?props.data.listPosts.items :[],}),})(App);

Mutations & optimistic UI (with graphqlMutation helper)

importgqlfrom"graphql-tag";import{graphql,compose}from"react-apollo";import{graphqlMutation}from"aws-appsync-react";constCreatePost=gql`  mutation createPost($name: String!) {    createPost(input: { name: $name }) {      name    }  }`;classAppextendsComponent{state={name:""};onChange=(e)=>{this.setState({name:e.target.value});};addTodo=()=>this.props.createPost({name:this.state.name});render(){return(<div><inputonChange={this.onChange}placeholder="Todo name"/><buttononClick={this.addTodo}>Add Todo</button>{this.props.posts.map((post,index)=>(<h2key={post.id ?post.id :index}>{post.name}</h2>))}</div>);}}exportdefaultcompose(graphql(listPosts,{options:{fetchPolicy:"cache-and-network",},props:(props)=>({posts:props.data.listPosts ?props.data.listPosts.items :[],}),}),graphqlMutation(CreatePost,listPosts,"Post"))(App);

Mutations & optimistic UI (without graphqlMutation helper)

importgqlfrom"graphql-tag";importuuidV4from"uuid/v4";import{graphql,compose}from"react-apollo";constCreatePost=gql`  mutation createPost($name: String!) {    createPost(input: { name: $name }) {      name    }  }`;classAppextendsComponent{state={name:""};onChange=(e)=>{this.setState({name:e.target.value});};addTodo=()=>this.props.onAdd({id:uuidV4(),name:this.state.name});render(){return(<div><inputonChange={this.onChange}placeholder="Todo name"/><buttononClick={this.addTodo}>Add Todo</button>{this.props.posts.map((post,index)=>(<h2key={post.id ?post.id :index}>{post.name}</h2>))}</div>);}}exportdefaultcompose(graphql(listPosts,{options:{fetchPolicy:"cache-and-network",},props:(props)=>({posts:props.data.listPosts ?props.data.listPosts.items :[],}),}),graphql(CreatePost,{options:{update:(dataProxy,{data:{ createPost}})=>{constquery=listPosts;constdata=dataProxy.readQuery({ query});data.listPosts.items.push(createPost);dataProxy.writeQuery({ query, data});},},props:(props)=>({onAdd:(post)=>{props.mutate({variables:post,optimisticResponse:()=>({createPost:{ ...post,__typename:"Post"},}),});},}),}))(App);

Subscriptions (with buildSubscription helper)

importgqlfrom"graphql-tag";import{graphql}from"react-apollo";import{buildSubscription}from"aws-appsync";constlistPosts=gql`  query listPosts {    listPosts {      items {        id        name      }    }  }`;constPostSubscription=gql`  subscription postSubscription {    onCreatePost {      id      name    }  }`;classAppextendsReact.Component{componentDidMount(){this.props.data.subscribeToMore(buildSubscription(PostSubscription,listPosts));}render(){return(<div>{this.props.posts.map((post,index)=>(<h2key={post.id ?post.id :index}>{post.name}</h2>))}</div>);}}exportdefaultgraphql(listPosts,{options:{fetchPolicy:"cache-and-network",},props:(props)=>({posts:props.data.listPosts ?props.data.listPosts.items :[],data:props.data,}),})(App);

Subscriptions (without buildSubscription helper)

importgqlfrom"graphql-tag";import{graphql}from"react-apollo";constlistPosts=gql`  query listPosts {    listPosts {      items {        id        name      }    }  }`;constPostSubscription=gql`  subscription postSubscription {    onCreatePost {      id      name    }  }`;classAppextendsReact.Component{componentDidMount(){this.props.subscribeToNewPosts();}render(){return(<div>{this.props.posts.map((post,index)=>(<h2key={post.id ?post.id :index}>{post.name}</h2>))}</div>);}}exportdefaultgraphql(listPosts,{options:{fetchPolicy:"cache-and-network",},props:(props)=>({posts:props.data.listPosts ?props.data.listPosts.items :[],subscribeToNewPosts:(params)=>{props.data.subscribeToMore({document:PostSubscription,updateQuery:(prev,{subscriptionData:{data:{ onCreatePost},},})=>({          ...prev,listPosts:{__typename:"PostConnection",items:[onCreatePost,              ...prev.listPosts.items.filter((post)=>post.id!==onCreatePost.id),],},}),});},}),})(App);

Complex objects with AWS AppSync SDK for JavaScript (Maintenance mode)

amplify add auth#Select default configurationamplify add storage#Select S3 with read/write accessamplify add api#Select Cognito User Pool for authorization type

typeTodo@model {id:ID!name:String!description:String!file:S3Object}typeS3Object {bucket:String!key:String!region:String!}inputCreateTodoInput {id:IDname:String!description:Stringfile:S3ObjectInput # This input type will be generated for you}

constclient=newAWSAppSyncClient({url:ENDPOINT,region:REGION,auth:{ ...},//Can be User Pools or API KeycomplexObjectsCredentials:()=>Auth.currentCredentials(),});(async()=>{letfile;if(selectedFile){// selectedFile is the file to be uploaded, typically comes from an <input type="file" />const{ name,type:mimeType}=selectedFile;const[,,,extension]=/([^.]+)(\.(\w+))?$/.exec(name);constbucket=aws_config.aws_user_files_s3_bucket;constregion=aws_config.aws_user_files_s3_bucket_region;constvisibility='private';const{ identityId}=awaitAuth.currentCredentials();constkey=`${visibility}/${identityId}/${uuid()}${extension&&'.'}${extension}`;file={      bucket,      key,      region,      mimeType,localUri:selectedFile,};}constresult=awaitclient.mutate({mutation:gql(createTodo),variables:{input:{name:'Upload file',description:'Uses complex objects to upload',file:file,}}});})();

Offline configuration with AWS AppSync SDK for JavaScript (Maintenance mode)

Error handling

constclient=newAWSAppSyncClient({url:appSyncConfig.graphqlEndpoint,region:appSyncConfig.region,auth:{type:appSyncConfig.authenticationType,apiKey:appSyncConfig.apiKey,},offlineConfig:{callback:(err,succ)=>{if(err){const{ mutation, variables}=err;console.warn(`ERROR for${mutation}`,err);}else{const{ mutation, variables}=succ;console.info(`SUCCESS for${mutation}`,succ);}},},});

Custom storage engine

import*aslocalForagefrom"localforage";constclient=newAWSAppSyncClient({url:appSyncConfig.graphqlEndpoint,region:appSyncConfig.region,auth:{type:appSyncConfig.authenticationType,apiKey:appSyncConfig.apiKey,},offlineConfig:{storage:localForage,},});

Offline helpers

Vue sample with AWS AppSync SDK for JavaScript (Maintenance mode)

main.js

importVuefrom"vue";importAppfrom"./App";importrouterfrom"./router";importAWSAppSyncClientfrom"aws-appsync";importVueApollofrom"vue-apollo";importAppSyncConfigfrom"./aws-exports";constconfig={url:AppSyncConfig.graphqlEndpoint,region:AppSyncConfig.region,auth:{type:AppSyncConfig.authType,apiKey:AppSyncConfig.apiKey,},};constoptions={defaultOptions:{watchQuery:{fetchPolicy:"cache-and-network",},},};constclient=newAWSAppSyncClient(config,options);constappsyncProvider=newVueApollo({defaultClient:client,});Vue.use(VueApollo);newVue({el:"#app",  router,components:{ App},provide:appsyncProvider.provide(),template:"<App/>",});

App.vue

<template><divid="app"v-if="hydrated"><router-view/></div></template><script>exportdefault{name:'App',data:()=>({hydrated:false}),asyncmounted(){awaitthis.$apollo.provider.defaultClient.hydrated()this.hydrated=true},}</script>

connected component

importgqlfrom"graphql-tag";importuuidV4from"uuid/v4";constCreateTask=gql`  mutation createTask($id: ID!, $name: String!, $completed: Boolean!) {    createTask(input: { id: $id, name: $name, completed: $completed }) {      id      name      completed    }  }`;constDeleteTask=gql`  mutation deleteTask($id: ID!) {    deleteTask(input: { id: $id }) {      id    }  }`;constListTasks=gql`  query listTasks {    listTasks {      items {        id        name        completed      }    }  }`;constUpdateTask=gql`  mutation updateTask($id: ID!, $name: String!, $completed: Boolean!) {    updateTask(input: { id: $id, name: $name, completed: $completed }) {      id      name      completed    }  }`;// In your component (Examples of queries & mutations)exportdefault{name:"Tasks",methods:{toggleComplete(task){constupdatedTask={        ...task,completed:!task.completed,};this.$apollo.mutate({mutation:UpdateTask,variables:updatedTask,update:(store,{data:{ updateTask}})=>{constdata=store.readQuery({query:ListTasks});constindex=data.listTasks.items.findIndex((item)=>item.id===updateTask.id);data.listTasks.items[index]=updateTask;store.writeQuery({query:ListTasks, data});},optimisticResponse:{__typename:"Mutation",updateTask:{__typename:"Task",              ...updatedTask,},},}).then((data)=>console.log(data)).catch((error)=>console.error(error));},deleteTask(task){this.$apollo.mutate({mutation:DeleteTask,variables:{id:task.id,},update:(store,{data:{ deleteTask}})=>{constdata=store.readQuery({query:ListTasks});data.listTasks.items=data.listTasks.items.filter((task)=>task.id!==deleteTask.id);store.writeQuery({query:ListTasks, data});},optimisticResponse:{__typename:"Mutation",deleteTask:{__typename:"Task",              ...task,},},}).then((data)=>console.log(data)).catch((error)=>console.error(error));},createTask(){consttaskname=this.taskname;if(taskname===""){alert("please create a task");return;}this.taskname="";constid=uuidV4();consttask={name:taskname,        id,completed:false,};this.$apollo.mutate({mutation:CreateTask,variables:task,update:(store,{data:{ createTask}})=>{constdata=store.readQuery({query:ListTasks});data.listTasks.items.push(createTask);store.writeQuery({query:ListTasks, data});},optimisticResponse:{__typename:"Mutation",createTask:{__typename:"Task",              ...task,},},}).then((data)=>console.log(data)).catch((error)=>console.error("error!!!: ",error));},},data(){return{taskname:"",tasks:[],};},apollo:{tasks:{query:()=>ListTasks,update:(data)=>data.listTasks.items,},},};

Creating an AppSync Project

License