开场白

自2020年春季开始使用Amplify并完成了一些项目。我认为它是一个能在小规模开发中发挥出相当生产力的平台。

在使用Amplify API（GraphQL）期间遇到的主要问题是很难增加项目成员。

我正在思考如何使团队开发变得更加舒适。

放大API（GraphQL）

Amplify可以自动生成GraphQL客户端，非常方便。

只是导入(import)很麻烦或者很冗长。

import { API, graphqlOperation } from "aws-amplify";
import {
  listCategorys,
} from "graphql/queries";

    async function fetchCategories() {
      const res = await API.graphql(
        // @ts-ignore
        graphqlOperation(listCategorys, {})
      );
      _setCategories(res.data.listCategorys.items);
    }

对于那些熟悉之前的API开发的人来说，这个响应可能有些特殊。

将共同处理事项都放入库中试试看。

如果使用生成的代码进行调用

• import 文はだいたい同じ

API.graphql ~ res.data 以降の記述は同じパターンで

需要写很多这样的代码。

我试着总结了一下，看起来可以总结一下。

列出

import { * as apiUtil} from "src/apiUtil";

const categories = await apiUtil.listQuery("Category", {});

突变.

import { * as apiUtil} from "src/apiUtil";

await api.createQuery("read", {
   userID: currentUser.id,
   reportID: r.id,
});

获取

import { * as apiUtil} from "src/apiUtil";
const user = await apiUtil.getQuery("user", onUpdateUser.id);

删除

import { * as apiUtil} from "src/apiUtil";

 await apiUtil.deleteQueries("like", { id: like.id });

大多数的代码都遵循同一模式，只要有模型名称就可以生成。

我已经掌握了与使用axios类似的技巧，
所以我期望即使是对Amplify没有经验的人，也能够阅读和编写（？！）。

进一步整合生成的代码意义何在？

我认为每个人都有自己的喜好，但我觉得在团队开发中有许多优点。

• Amplify GraphQL に明るくない人でも、axiosぐらいの感覚で呼び出せるようになる。（メンバーが増やしやすくなる！！

• 多くのモデルにアクセスしたい時にコードが読みやすくなる。

共通処理が入れれるようになる。エラー表示など。

你在其中进行了什么处理？

将查询以变量的形式展开，并通过参数获取。
在处理列表时，我曾担心会变得很繁琐，但幸好它只是简单地在最后添加一个 “s” 的规则。

学习 – 没有像 study ⇨ studies 那样的处理是很好的…

export async function getQuery(target: string, id: string) {
  let res;
  const queryName = `get${pascalCase(target)}`;
  try {
    //@ts-ignore
    res = await API.graphql(graphqlOperation(queries[queryName], { id }));
    //@ts-ignore
    const data = res.data[queryName];
    // console.log(`getQuery ${target} ${id}`, data);
    return data;
  } catch (error) {
    store.dispatch(app.actions.setError("通信エラーが発生しました"));
    console.error(error);
    return null;
  }
}

如果可以从目标中动态获取Type，我觉得会很好，但是我想不出好的方法。（如果你有任何想法，请一定留下评论）

额外）创建数组

最令人讨厌的是使用数组创建模式，但我也为此做出了简洁的处理。

      const parmas = formActivities.map((activity: any, index: number) => {
        return {
          id: activity.id,
          userID: currentUser.id,
        };
      });

      await createQueries("Activity", parmas);

实施的代码

export async function createQueries(
  target: string,
  variables: any[],
  noGroup?: boolean
) {
  const tasks = [] as any[];

  variables.forEach(async (variable) => {
    const queryName = getQueryName(target, variable);
    const input = await getInput(variable, noGroup);
    console.log(target, queryName, input);

    const task = API.graphql(
      //@ts-ignore
      graphqlOperation(mutations[queryName], {
        input,
      })
    );

    tasks.push(task);
  });

  let resAll;
  try {
    resAll = await Promise.all(tasks);
    console.log("result:", resAll);
  } catch (error) {
    store.dispatch(app.actions.setError("通信エラーが発生しました"));
    console.error(target, error);
  }
  return resAll;
}

在代码中，我正在使用Promise.all函数。

创建的公共函数

我想将它变成图书馆资源，但是时间不够，无法完成。

我们正在招募团队成员！

我现在在 O 公司中，使用 Amplify、React Native 和 React Native Web 开发sass。

我们现在正在招募成员。
对于对Amplify感兴趣并希望尝试的人，请随意申请！
无需有工作经验，兼职和远程都可以。
如果您想在实际工作中尝试使用Amplify，请务必申请！