通过复制和粘贴快速学习GraphQL：示例「个人介绍页面」

2 年 ago
逸, 科
2 minutes

首先

为了帮助初学者学习JavaScript，我准备了一个针对GraphQL的教程。这是一个非常简单的示例，只需要一页的网页内容，但你可以通过它学习如何在客户端和服务器端之间交换数据。

为了让您在理解之前先体验到”运动的感觉”，该教程几乎全部都是复制粘贴，进展迅速。

过去的内容 de

    • コピペで素早く学ぶ GraphQL、Apollo Server Getting Started

 

    コピペで素早く学ぶ GraphQL、Apollo Server Getting Resolver

预先准备

请确保已安装Node和npm。

克隆 git 存储库

请在终端中执行以下命令。

git clone https://github.com/richardimaoka/tutorial-apollo-app-self-intro.git
cd tutorial-apollo-app-self-intro

稍后我们将打开另一个终端，因此这个终端称为“主终端”。

1. 通过HTML确认样品完成后的外观。

我们稍后会使用React进行重新实现，但首先让我们以HTML简单示例的形式来确认样式完成。

请执行以下命令。

cp answers/step1-html/index1.html index.html
cp answers/step1-html/profile.png profile.png

请在浏览器中打开index.html。

2022-03-02_08h23_30.png

结果：只要出现以下内容即可称为OK。

2022-03-03_08h29_32.png

从本地文件服务器获取个人资料图片

请打开另一个终端，并执行以下命令。

cp -r answers/step1-file-server file-server
cd file-server
npm install

动作：请执行以下命令。

npm run start

结果：在 http://localhost:8080/ 上启动了文件服务器。

2022-03-05_19h09_43.png

请在主要终端上执行以下命令时，保持文件服务器运行。

cp answers/step1-html/index2.html index.html
rm profile.png

请刷新之前的浏览器界面。

结果：如果显示出相同的画面，则表示OK。

2022-03-03_08h29_32.png

2. 搭建React环境

请执行以下命令。

rm -f index.html

请打开一个新的终端，并执行以下命令。

cp -r answers/step2-client1 client
cd client
npm install
检查npm的Dependencies是否为最新操作：执行以下命令

React客户端终端
npx npm-check-updates

结果：如果显示如下结果，则表示正常。
所有的依赖关系与最新的包版本匹配 🙂

已经安装了package.json中指定的npm包的最新版本。
如果不是所有的依赖关系都与最新的包版本匹配，请如何处理？
apollo-server ^3.6.0 → ^3.6.2
graphql ^16.1.0 → ^16.3.0

运行命令npx npm-check-updates -u来升级package.json

操作：按照上述消息，执行以下命令

React客户端终端
npx npm-check-updates -u
npm install

这样就会安装最新版本的npm包。

请执行以下命令。

npm run start

结果：在http://localhost:3000/上会显示以下页面。

image.png
这是一个简化了的由create-react-app生成的React应用程序。按照https://create-react-app.dev/docs/getting-started的说明，运行以下命令，将生成一个React示例应用程序：
npx create-react-app client –template typescript

在完成上述步骤后，client目录中包含了从上述命令生成的应用程序中剔除了本教程不使用的部分，并简化了源代码的内容。

仅使用React完成样本时的外观构建。

下一步，我们将使用仅客户端的React，在不准备GraphQL服务器的情况下，构建样品完成时的外观。

请执行以下命令。

cp -r answers/step2-client2/src client
rm -f client/src/App.tsx

动作：请访问http://localhost:3000

结果：只需以以下方式显示即可。

2022-03-06_00h58_13.png
以下是关于React示例源代码的解释。查看client/src/components/MainComponent.tsx文件，可以看到在React组件中定义了以下的 profile：

const profile = {
imgSrc: “http://localhost:8080/images/profile.png”,
name: “エメラルド 君沢”,
jobTitle: “データベース エンジニア”,
residence: “東京都 南アザラシ区 ペンギン町”,
description:
” データベース エンジニアのエメラルド 君沢です。金融関連の会社の社内IT部門にて9年勤めたあと、3年ほどベンチャー企業を転々とし、いまは広告関連の会社でエンジニアをやっています。”,
};

然后将其传递给ProfileComponent.tsx组件。

 

现在，让我们将通过GraphQL服务器获取的Profile类型对象来替代在这个React组件中定义的profile的使用方式。

3. 启动GraphQL服务器

请在一个新的终端中执行以下命令。

cp -r answers/step3-server1 server
cd server
npm install

请执行以下命令。

npm run start

请在浏览器中打开 http://localhost:4000/

结果：将显示类似以下的Apollo Studio Explorer界面。

image.png

请点击“查询服务器”按钮。

结果：会转到以下这样的页面。

2022-03-06_09h04_06.png

请将以下查询内容粘贴到Apollo Studio Explorer页面上，然后点击”Run”按钮执行。

{
  me {
    name
    residence
    imgSrc
    jobTitle
    description
  }
}

结果：可以获得一个由字符串”Hello World”填充的响应作为模拟值。

image.png

从这一点开始，我们将使用解析器而不是模拟数据来从GraphQL服务器返回响应。

在GraphQL服务器中返回Profile对象。

请执行以下命令

cp answers/step3-server2/* server
解释源代码通过上述命令将data.json放置，并将其与下述GraphQL模式相对应。

schema.gql
type Query {
me: Profile
}

type Profile {
imgSrc: String
name: String
residence: String
jobTitle: String
description: String
}

在index.ts中加载data.json，并将其作为GraphQL服务器的响应直接使用。

index.ts
const jsonDataFile = __dirname.concat(“/data.json”);

请再次通过Apollo Studio Explorer的界面执行之前的查询操作。

结果：只需以以下方式显示即可。

2022-03-26_18h14_26.png

在React客户端中，使用从GraphQL服务器获取的响应。

请执行以下命令。

cp -r answers/step4-client1/* client

操作：请使用Ctrl+C停止React客户端的终端。

请执行以下命令。

npm install

请执行以下命令。

npm start

请访问 http://localhost:3000。

结果：如果显示如下内容，则表示一切正常。

2022-03-06_00h58_13.png

5. 概括

使用GraphQL服务器和React客户端来组合并构建应用程序的步骤已在此处介绍。

这个网页非常简洁，但它可以作为一个示范，告诉你应该如何在服务器端和客户端端设置GraphQL。

请您将其作为增加功能的框架来尝试使用。

下一个教程 (xià yī ge

 

请提供相关参考资料。
请给出相关的参考资料。
请提供相应的参考资料。
请提供相关资料的参考。
请提供相应的参考材料。

    • Apollo Basics 公式 https://www.apollographql.com/docs/

Apollo Server 公式 https://www.apollographql.com/docs/apollo-server/

Node.js http-server https://github.com/http-party/http-server

GraphQL 公式 https://graphql.org/

How to GraphQL https://www.howtographql.com/

✖
广告
将在 10 秒后关闭
bannerAds