无需Amplify，浏览器端TypeScript连接AppSync所需依赖包咨询

核心依赖组合（无冲突，复用现有可用包） #

直接保留你当前正常工作的graphql-request和graphql-ws，额外添加两个轻量工具包即可，无需修改现有包版本：

• graphql-request: 继续用于HTTP端点请求
• graphql-ws: 继续用于WebSocket实时连接
• @aws-sdk/signature-v4: 生成AppSync要求的AWS签名认证
• @aws-sdk/credential-provider-browser: 浏览器环境下获取AWS凭证（比如Cognito、IAM角色等）
• @aws-crypto/sha256-js: 签名所需的哈希工具

关键实现示例 #

1. HTTP请求的签名封装（兼容现有graphql-request代码） #

import { GraphQLClient } from 'graphql-request';
import { SignatureV4 } from '@aws-sdk/signature-v4';
import { Sha256 } from '@aws-crypto/sha256-js';
import { defaultProvider } from '@aws-sdk/credential-provider-browser';

const APPSYNC_HTTP_ENDPOINT = '你的AppSync HTTPS端点';
const AWS_REGION = '你的AWS区域';

// 生成带签名的GraphQL客户端
async function getSignedGraphQLClient() {
  const url = new URL(APPSYNC_HTTP_ENDPOINT);
  const signer = new SignatureV4({
    credentials: defaultProvider(),
    region: AWS_REGION,
    service: 'appsync',
    sha256: Sha256,
  });

  const signedHeaders = await signer.sign({
    method: 'POST',
    hostname: url.hostname,
    path: url.pathname,
    headers: {
      'Content-Type': 'application/json',
    },
  });

  return new GraphQLClient(APPSYNC_HTTP_ENDPOINT, {
    headers: signedHeaders.headers,
  });
}

// 调用示例（和你现有代码逻辑一致）
async function fetchData() {
  const client = await getSignedGraphQLClient();
  const query = `query GetItems { ... }`;
  const data = await client.request(query);
  // 处理返回数据
}

2. WebSocket实时连接的签名处理（兼容现有graphql-ws代码） #

import { createClient } from 'graphql-ws';
import { SignatureV4 } from '@aws-sdk/signature-v4';
import { Sha256 } from '@aws-crypto/sha256-js';
import { defaultProvider } from '@aws-sdk/credential-provider-browser';

const APPSYNC_WS_ENDPOINT = '你的AppSync WebSocket端点';
const AWS_REGION = '你的AWS区域';

// 生成带签名的WS客户端
async function getSignedWSClient() {
  const url = new URL(APPSYNC_WS_ENDPOINT);
  const signer = new SignatureV4({
    credentials: defaultProvider(),
    region: AWS_REGION,
    service: 'appsync',
    sha256: Sha256,
  });

  // 对WS握手请求签名
  const signedRequest = await signer.sign({
    method: 'GET',
    hostname: url.hostname,
    path: url.pathname,
    query: url.searchParams,
  });

  // 拼接带签名参数的WS地址
  const signedWSUrl = new URL(APPSYNC_WS_ENDPOINT);
  signedRequest.query.forEach((value, key) => {
    signedWSUrl.searchParams.set(key, value);
  });

  return createClient({
    url: signedWSUrl.toString(),
    // 可根据需求添加连接配置（比如心跳、重试）
  });
}

// 订阅示例（和你现有graphql-ws逻辑一致）
async function subscribeToUpdates() {
  const client = await getSignedWSClient();
  const subscription = `subscription OnItemUpdate { ... }`;
  client.subscribe({
    query: subscription,
    next: (data) => { /* 处理实时数据 */ },
    error: (err) => { /* 处理错误 */ },
  });
}

方案优势 #

• 100%复用你当前正常工作的graphql-request和graphql-ws版本，无需调整依赖版本
• 依赖均为浏览器友好的工具包，不会出现Node.js全局变量缺失问题
• 不引入Amplify、Apollo Client等冗余依赖，保持代码轻量化

内容的提问来源于stack exchange，提问作者samp17