验证 Apollo 客户端以使 AppSync 与 @aws_subscribe 一起使用

Question

我在 AppSync 中使用 API_KEY 身份验证，它适用于查询和突变。

很难让它与@aws_subscribe 订阅一起使用。以下是我尝试获取连接的方法：

import { WebSocketLink } from '@apollo/client/link/ws'
import { setContext } from '@apollo/client/link/context'

import {
  ApolloClient,
  InMemoryCache,
  HttpLink,
  split,
} from "@apollo/client"

import { getMainDefinition } from '@apollo/client/utilities'

import { API_URI, API_KEY, REALTIME_API_URI } from "@env"

const authLink = setContext((_, { headers }) => {
  const token = API_KEY
  return {
    headers: {
      ...headers,
      'X-Api-Key': API_KEY,
    },
  }
})

const httpLink = new HttpLink({
  uri: API_URI,
})

const wsLink = new WebSocketLink({
  uri: REALTIME_API_URI,
  options: {
    reconnect: true,
    lazy: true,
  },
})

const link = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return (
      kind === 'OperationDefinition'
      && operation === 'subscription'
    )
  },
  authLink.concat(wsLink),
  authLink.concat(httpLink),
)

export const gqlClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
})
// console.log({ API_URI }, { API_KEY })

据我所知，这个问题被问了很多 - 我仍然无法找到令人满意的答案。有证据表明最新的 Apollo 客户端不再与 Web 套接字的 AppSync 身份验证兼容，仍然想知道是否有某种变通方法（hack）将 API_KEY 传递给 appsync 订阅，因此它不会拒绝请求并建立联系。我真的很想避免使用 Amplify，以及自己构建 SNS pub sub。真的很好奇是否有人能够让这个更简单的用例工作并可以分享一些示例代码。

这是我在客户端中订阅的方式：

const subscription = CONST.gqlClient
      .subscribe({
        query: gql`
        subscription onSendMessage($chatUuid: String!) {
          onSendMessage (chatUuid: $chatUuid) {
            chatUuid
            createdAt
            messageUuid
            text
            updatedAt
            uuid          }
        }
        `,
        variables: {
          chatUuid,
        },
      })
      .subscribe({
        next(data) {
          console.log({ data })
        },
        error({ error }) {
          console.log({ error })
        },
        complete() { console.log("subs. DONE") }, // never printed
      })

当我运行它时，我确实在日志中看到：

Object {
  "subscription": Subscription {
    "_cleanup": Subscription {
      "_cleanup": [Function anonymous],
      "_observer": Object {
        "complete": [Function complete],
        "error": [Function error],
        "next": [Function next],
      },
      "_queue": undefined,
      "_state": "ready",
    },
    "_observer": Object {
      "complete": [Function complete],
      "error": [Function error],
      "next": [Function next],
    },
    "_queue": undefined,
    "_state": "ready",
  },
}

但是在那之后什么都没有发生，没有错误消息，没有订阅消息触发突变调用。 当我在 aws 控制台中订阅此订阅时——它确实触发得很好。我只是永远无法让它在客户端应用程序中工作。

Answer 1

我想出了一个可行的解决方案。 这就像使用不同的 Apollo 客户端进行“查询”和“变异”与“订阅”一样简单。 完整的解决方案可以在这里找到： https://www.echowaves.com/post/getting-apollo-client-to-work-with-aws_subscribe