使用 Amplify × AppSync 来对 Subscription 进行过滤

总结

为了实时反映数据，我们使用订阅（subscription）。我们之前是通过@model自动生成订阅，但是自动生成的订阅不能进行筛选，导致显示了与相关性无关的数据。因此，我们现在改为手动创建订阅，并通过参数进行筛选。

实施

模式

之前我们是通过@model自动生成订阅的。

type Task
@model(subscriptions: { level: public })
{
  id: ID!
  name: String!
  detail: String
}

↓产生

export const onCreateTask = /* GraphQL */ `
  subscription OnCreateTask {
    onCreateTask {
      id
      name
      detail
    }
  }
`;

export const onUpdateTask = /* GraphQL */ `
  subscription OnUpdateTask {
    onUpdateTask {
      id
      sequence
      name
      detail
    }
  }
`;

export const onDeleteTask = /* GraphQL */ `
  subscription OnDeleteTask {
    onDeleteTask {
      id
      name
      detail
    }
  }
`;

然而，使用自动生成无法进行过滤。
因此，我将在@model中禁用自动生成订阅。

type Task
@model(subscriptions: null)
{
  id: ID!
  name: String!
  detail: String
}

然后在schema.graphql中添加自定义订阅。
订阅名称(参数): 类型 @aws_subscribe(mutations: [Mutation名称])的写法。

type Subscription {
  onCreateTaskByName(name: String): Task
    @aws_subscribe(mutations: ["createTask"])

  // Mutationのtypeはcreate・update・deleteの3種類。必要に応じて設定。
  onUpdateTaskByName(name: String): Task
    @aws_subscribe(mutations: ["updateTask"])
  onDeleteTaskByName(name: String): Task
    @aws_subscribe(mutations: ["deleteTask"])
}

↓产生

export const onCreateTaskByName = /* GraphQL */ `
  subscription OnCreateTaskByName($name: String) {
    onCreateTaskByName(name: $name) {
      id
      name
      detail
    }
  }
`;

export const onUpdateTaskByName = /* GraphQL */ `
  subscription OnUpdateTaskByName($name: String) {
    onUpdateTaskByName(name: $name) {
      id
      name
      detail
    }
  }
;`

export const onDeleteTaskByName = /* GraphQL */ `
  subscription OnDeleteTaskByName($name: String) {
    onDeleteTaskByName(name: $name) {
      id
      name
      detail
    }
  }
;'

通过这样做，现在可以将参数传递给订阅，并且可以进行筛选。

此外，还可以设置多个参数。若设置了多个参数，则只有在完全匹配这些参数时，才会进行订阅。

type Subscription {
  onCreateTaskByName(name: String, detail: String): Task
    @aws_subscribe(mutations: ["createTask"])
}

召唤

import Amplify, { API } from "aws-amplify";
import { subscriptions } from "src/graphql/subscriptions";

function subscribe() {
    const subscription = API.graphql({
      query: subscriptions.onCreateTaskByName,
      variables: {
        name: "Test",
      },
    }).subscribe({
      next: ({ provider, value }) => {
        console.log("Subscribe:", { provider, value });
        subscription.unsubscribe();
      },
      error: (error) => console.warn(error),
    });
};

现在只有在创建了名为”Test”的任务时才能进行订阅。

如果使用graphqlOperation，可以按照以下方式进行操作。

import Amplify, { API, graphqlOperation } from "aws-amplify";
import { subscriptions } from "src/graphql/subscriptions";

function subscribe() {
    const subscription = API.graphql(
      // TypeScriptを利用している場合は型定義も可能
      graphqlOperation(subscriptions.onCreateTaskByName as 型, {
        name: "Test",
      })
    ).subscribe({
      next: ({ provider, value }) => {
        console.log("Subscribe:", { provider, value });
        subscription.unsubscribe();
      },
      error: (error) => console.warn(error),
    });
};

请注意。

mockで動作しない

我现在陷入了困境…
有人提到了在该问题中模拟无法正常运行。尽管已关闭该问题，但似乎没有进行修复。因此，每次都需要执行codgen并推送更改。另外，有时codegen无法自动生成订阅。在这种情况下，启动一次模拟即可生成。 ＊截至2021/03。

问题：https://github.com/aws-amplify/amplify-cli/issues/6026

请用中文表示参考。

参考

(公式)
– 示例
– 实时数据
– 订阅数据
(博客)
– 使用AWS AppSync + Amplify，在Subscription中添加参数，并尝试仅接收部分通知

– 宮田國毅 –
我在O:inc.公司使用Amplify×React×React Native进行开发。在大学的研讨会上，我用Python进行统计学研究。我会分享在实习和研讨会上学到的信息，所以请务必关注我的账号并回关！