Upgrade from AppSync SDK

If you're using AWS AppSync SDK for JavaScript (Maintenance mode), we recommend that you upgrade to the AWS Amplify API category or use the AWS AppSync Apollo links with the Apollo GraphQL client.

What does "Maintenance" mean? While in maintenance, the AWS AppSync SDK for JavaScript (V2) will continue to receive updates that ensure compatibility with backend services and security updates. No new features will be introduced in the AWS AppSync SDK for JavaScript (V2).

How long will Maintenance last? AWS AppSync SDK for JavaScript (V2) will be in Maintenance for 12 months i.e until June 30, 2024, after which no new updates will be made. This may result in the APIs going out of sync with the services and result in breaking production apps.

Option 1: Upgrade to AWS Amplify (Recommended)

AWS Amplify provides APIs for querying, mutating, and subscribing to data in AppSync with less configuration overhead. Here's an example of running a query in the AWS AppSync SDK for JavaScript (Maintenance mode) vs. AWS Amplify API category:

AWS AppSync SDK for JavaScript (Maintenance mode):

1import { createTodo } from './graphql/queries';
2import config from './amplifyconfiguration.json';
3import AWSAppSyncClient from 'aws-appsync';
4
5const client = new AWSAppSyncClient({
6  url: config.aws_appsync_graphqlEndpoint,
7  region: config.aws_appsync_region,
8  auth: {
9    type: config.aws_appsync_authenticationType,
10    apiKey: config.aws_appsync_apiKey
11  }
12});
13
14const result = await client.mutate({
15  mutation: gql(createTodo),
16  variables: {
17    input: {
18      name: 'New Todo',
19      description: 'Description of my new todo'
20    }
21  }
22});

AWS Amplify:

1import { Amplify } from 'aws-amplify';
2import { generateClient } from 'aws-amplify/api';
3import { createTodo } from './graphql/queries';
4import config from './amplifyconfiguration.json';
5
6Amplify.configure(config);
7
8const client = generateClient();
9
10client.graphql({
11  query: createTodo,
12  variables: {
13    input: {
14      name: 'New Todo',
15      description: 'Description of my new todo'
16    }
17  }
18});

Optimistic UI and cached data revalidation

If you've used the AWS AppSync SDK's caching capabilities for optimistic UI, then we recommend you to follow our Optimistic UI guide. In this guide, you'll learn how to use AWS Amplify's API category in conjunction with TanStack Query to achieve optimistic UI and cached data invalidation use cases.

Complex objects support

If you were using complex objects in the AWS AppSync SDK for JavaScript (Maintenance mode), then we recommend you to follow our Working with Files guide. This guide details the recommended path to store file metadata in your GraphQL API records and use Amplify Storage to store blob data in Amazon S3.

Option 2: Upgrade to Apollo Client with AppSync Links

Alternatively, you can upgrade to the Apollo GraphQL client and continue using the AppSync Apollo links to connect to your AppSync API. There are two supported Apollo links:

aws-appsync-auth-link: Link to setup authorization modes with AWS AppSync
aws-appsync-subscription-link: Link to setup real-time subscriptions for AWS AppSync

Here's an example on how to create your GraphQL client using AWS AppSync SDK for JavaScript (Maintenance mode) vs. using the Apollo GraphQL client and the AWS AppSync Apollo links (V3):

AWS AppSync SDK for JavaScript (Maintenance mode):

1import AWSAppSyncClient from 'aws-appsync';
2import config from './amplifyconfiguration.json';
3import { createtodo } from './graphql/queries';
4
5const client = new AWSAppSyncClient({
6  url: config.aws_appsync_graphqlEndpoint,
7  region: config.aws_appsync_region,
8  auth: {
9    type: config.aws_appsync_authenticationType,
10    apiKey: config.aws_appsync_apiKey
11  }
12});
13
14const result = await client.mutate({
15  mutation: gql(createTodo),
16  variables: {
17    input: {
18      name: 'New Todo',
19      description: 'Description of my new todo'
20    }
21  }
22});

Apollo GraphQL client using AWS AppSync Apollo links:

1import { createAuthLink } from 'aws-appsync-auth-link';
2import { createSubscriptionHandshakeLink } from 'aws-appsync-subscription-link';
3import {
4  ApolloClient,
5  InMemoryCache,
6  HttpLink,
7  ApolloLink
8} from '@apollo/client';
9import config from './amplifyconfiguration.json';
10import { createtodo } from './graphql/queries';
11
12const url = config.aws_appsync_graphqlEndpoint;
13const region = config.aws_appsync_region;
14const auth = {
15  type: config.aws_appsync_authenticationType,
16  apiKey: config.aws_appsync_apiKey
17};
18
19const httpLink = new HttpLink({ uri: url });
20
21const link = ApolloLink.from([
22  createAuthLink({ url, region, auth }),
23  createSubscriptionHandshakeLink({ url, region, auth }, httpLink)
24]);
25
26const client = new ApolloClient({
27  link,
28  cache: new InMemoryCache()
29});
30
31client.mutate({
32  mutation: gql(createTodo),
33  variables: {
34    input: {
35      name: 'New Todo',
36      description: 'Description of my new todo'
37    }
38  }
39});

Modify Amplify-generated resources

Troubleshooting