AWS AppSync JavaScript SDK 使用指南

AWS AppSync JavaScript SDK 使用指南

aws-mobile-appsync-sdk-jsJavaScript library files for Offline, Sync, Sigv4. includes support for React Native项目地址:https://gitcode.com/gh_mirrors/aw/aws-mobile-appsync-sdk-js

项目介绍

AWS AppSync JavaScript SDK 是由 AWS 实验室开发的一个开源项目，它旨在简化前端应用（包括Web和React Native）对AWS AppSync GraphQL API的访问。该SDK支持Apollo客户端，特别是对于那些依赖于实时数据更新、复杂查询和离线工作的应用程序而言，提供了强大的功能集。随着版本的演进，V2已进入维护模式，推荐使用与Apollo V3兼容的新方法或继续在旧项目中维持现状。

项目快速启动

安装

首先，确保你的开发环境中已安装Node.js。然后，你可以通过npm或yarn来安装最新的SDK适用于与Apollo V3的集成：

# 使用npm
npm install --save aws-appsync @apollo/client

# 或者使用yarn
yarn add aws-appsync @apollo/client

配置与使用

接下来，在React应用中配置并使用AWS AppSync:

import React from 'react';
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
// 引入AWS AppSync相关的链接
import { AuthLink, ApolloLink } from 'aws-appsync-auth-link';
import { SubscriptionClient } from 'subscriptions-transport-ws';
import { ApolloProvider } from '@apollo/client';
import { Rehydrated } from 'aws-appsync-react';
import AppSyncConfig from './aws-exports'; // 假设这是自动导出的配置文件

const wsLink = new SubscriptionClient(AppSyncConfig.aws_appsync_wsEndpoint, {
    reconnect: true,
});
const httpLink = new HttpLink({
    uri: AppSyncConfig.aws_appsync_graphqlEndpoint,
});

const authLink = AuthLink.getAuthLink(AppSyncConfig);

const client = new ApolloClient({
    link: ApolloLink.from([
        authLink,
        wsLink.split(/(query|mutation)/),
        httpLink,
    ]),
    cache: new InMemoryCache(),
});

function MyApp() {
    return (
        <ApolloProvider client={client}>
            <Rehydrated>
                {/* 应用主体 */}
                <YourAppComponent />
            </Rehydrated>
        </ApolloProvider>
    );
}

export default MyApp;

记得替换YourAppComponent为你实际的应用组件。

应用案例与最佳实践

实时待办事项列表

一个常见的应用案例是构建一个带有实时更新的待办事项列表。利用AWS AppSync的订阅功能，可以实现实时添加、删除任务，并使所有客户端同步这些变更。

const DELETE_TODO_MUTATION = gql`
    mutation DeleteTodo($id: ID!) {
        deleteTodo(id: $id) {
            id
        }
    }
`;

const CREATE_TODO_SUBSCRIPTION = gql`
    subscription OnCreateTodo {
        onCreateTodo {
            id
            name
            description
        }
    }
`;

// 在你的组件内部使用useMutation和useSubscription

最佳实践之一就是充分利用图形查询语言(GQL)的强大功能来减少网络请求次数和数据冗余，通过批处理查询和使用只读字段来优化性能。

典型生态项目

在AWS生态系统内，除了直接使用此SDK外，开发者常常结合AWS Amplify框架，后者提供了一套全面的工具和服务，特别适合构建云原生的移动和Web应用。Amplify的@aws-amplify/datastore和@aws-amplify/api类别分别对应于直接与DynamoDB或非DynamoDB数据源交互时的离线优先和在线数据访问策略，当与AWS AppSync一起使用时，它们可以简化开发流程，并增强应用的数据管理能力。

记住，为了实现高效和健壮的AppSync应用，务必参考AWS官方文档和社区资源，以获取最新实践和技术指导。

aws-mobile-appsync-sdk-jsJavaScript library files for Offline, Sync, Sigv4. includes support for React Native项目地址:https://gitcode.com/gh_mirrors/aw/aws-mobile-appsync-sdk-js