使用Apollo、TypeScript、Codegen和React进行文件上传

2 年 ago

雅, 悟

2 minutes

这是2021年GraphQL圣诞节日历的12/18日的文章。

我是自己介紹。

大家好，我是Hirasa。
我是目前在Cougar有限公司主要负责前端和后端的工程师。
我们是一家制作名为Rachel的虚拟人类助理的公司。

目前正在招募熱衷於工程領域的人才，如果您有興趣，請務必參考以下鏈接。
https://couger.co.jp/news/career/

关于本文

在使用以下设置来实现文件上传功能的前端和服务器方面的实现：
服务器端：Typescript、apollo-server、express
前端：Typescript、React、apollo-client
graphql模式定义生成：graphql-codegen
因此，本文将对此进行解释说明。

这是已经完成的源代码（如果您能为我点个星星，我会很高兴）。
https://github.com/hirasaki1985/ApolloFileUploadServerAndClient
以下是有关此存储库的解释。

基本知識

首先，GraphQL是什么？

在与服务器端的通信中加入类型信息（架构）或者一次调用多个端点等等，有很多优点。

codegen 是什么?

这篇文章非常清楚地解释了，总的来说，它是根据.graphql文件生成了包含TypeScript类型、函数、类等内容的文件。

“React”的意思是什么？

express是什么意思？

阿波罗是什么？

安装步骤

请参考此存储库下的README.md文件：https://github.com/hirasaki1985/ApolloFileUploadServerAndClient

使用方法

通过健康检查确认连接

确认文件上传

各种解释 (Gè

根目录的结构

ディレクトリ名説明/core共通で使用するファイルを格納。/frontfront側のソースコード。react, typescriptで実装/serverserver側のソースコード。nodejs, express, typescriptで実装

核心的解释

存储着与前端和服务器共同使用的.graphql文件在这里。
如果想更新graphql模式，请在更新此处的.graphql文件之后，

$ (cd core && yarn install)
$ (cd core && yarn generate-server)
$ (cd core && yarn generate-front)

使用graphql-codegen工具可以执行以下操作，从.graphql文件中生成相应的ts文件。
前端和服务器将使用这些生成的文件来进行ts实现。
由于前端和服务器所需的类型定义不同，因此我们使用front_codegen.yml和server_codegen.yml来分别设置配置文件。

server和front分别会在以下位置生成：
服务器：/server/src/web_server/graphql/types/ApolloServerTypes.ts
前端：/front/src/types/graphql/ApolloClientTypes.ts

/front 的解释

该项目由 react、react-redux 和 react-router-dom 构成。

ディレクトリ名役割data_sourcesデータの取得先をまとめたもの、ApolloClientはこちらに格納される。pagesrouterから呼ばれる大元のコンポーネントrouterrouterの設定stores/actionsstoreを操作するActionをまとめたもの。pagesから呼ばれ、データ取得や更新などをおこなった後、storeに結果を反映する。stores/statestore(状態)の構成や設定。types型を管理。scalars.tsはgraphqlに追加するスカラー型を定義している。utils汎用ライブラリを格納。

在前端的情况下，文件的类型信息会变成 File，所以我们在这个链接的 scalars 文件中将 graphql 文件和浏览器上的 File 类型进行关联。

实际的文件上传处理由这里完成，使用 graphql-codegen 生成的函数进行上传处理。
https://github.com/hirasaki1985/ApolloFileUploadServerAndClient/blob/main/front/src/stores/actions/FileUploadActionHook.ts#L20
实际的文件上传处理是在这里完成的，使用 graphql-codegen 生成的函数进行上传处理。
https://github.com/hirasaki1985/ApolloFileUploadServerAndClient/blob/main/front/src/stores/actions/FileUploadActionHook.ts#L20

在文件上传的情况下，好像需要使用apolloClient来切换链接。我已经在这里添加了切换的处理。

服务器说明

ディレクトリ名役割domain/controllers処理の大まかな流れをコントロールするdomain/services機能を提供する。実際のファイルの保存処理などはここに書いている。utils汎用ライブラリを格納。web_server/apisapiのエンドポイントを定義。web_server/graphqlgraphqlの型定義を格納。scalars.tsはgraphqlに追加するスカラー型を定義している。web_server/server.tsgrapqlサーバのインスタンスを生成して返すindex.tsサーバを起動している

如果是服务器端，需要将graphql-upload库与scalar关联起来，所以我们在这里进行了定义。
https://github.com/hirasaki1985/ApolloFileUploadServerAndClient/blob/main/server/src/web_server/graphql/scalars.ts#L3

文件上传的解析器在此处进行定义，这里是文件上传 API 的初始执行部分。
https://github.com/hirasaki1985/ApolloFileUploadServerAndClient/blob/main/server/src/web_server/apis/resolvers/FileUploadResolver.ts

随后，控制器将信息传递给服务，
https://github.com/hirasaki1985/ApolloFileUploadServerAndClient/blob/main/server/src/domain/services/FileUploadService.ts#L40
在这里进行文件保存。

我大致解释了一下，就是这样了。