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

这是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

使用方法

image.png

通过健康检查确认连接

image.png

确认文件上传

image.png

各种解释 (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
在这里进行文件保存。

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