【基础的基础篇】React + Express + GraphQL实现Hello World!

2 年 ago

清, 宇

2 minutes

首先

这篇文章以GraphQL的基础知识为基础，并实现了最基本的服务器端和客户端端实例，以实现通过GraphQL进行连接的功能。没有进行数据更新或连接数据库进行数据获取等操作。希望您能理解GraphQL客户端和服务器协作的概要。

来源

GraphQL是一种查询语言。

GraphQL是一种用于API的查询语言，有时也指代用于执行查询并调用数据的运行时。

GraphQL查询语言

GraphQL是将用于查询数据库的SQL思想应用到Internet上的一种方式。它使用单个GraphQL查询可以一次获取相关数据，还可以修改或删除数据。虽然SQL和GraphQL都是查询语言，但它们是完全不同的。

GraphQLのクエリはAPIに対して実行される（インターネットのための問い合わせ言語）

句子结构

SQL: INSERT/UPDATE/DELETE, GraphQL: Mutation

由於GraphQL是用於互聯網的查詢語言，因此還提供了一個命令以使用套接字通訊來監視數據變更。該命令稱為「Subscription」。

GraphQL服务器的实现

首先，作为服务器端，让我们创建一个简单的API（显示Hello World），这次我们选择的是Apollo Server作为开源软件，它非常容易设置，而且提供了许多可投入生产环境的功能。其中一些代表性功能包括订阅支持、文件上传、从现有服务的API获取数据的功能以及Apollo Engine云服务。

环境配置

目录结构

myappServer/
  ├ node_modules
  ├ src
    ├ resolbers
      ├ index.js
      └ Query.js
    ├ index.js
    └ typeDefs.graphql
  └ package.json

$ npm init -y // 初期化処理
$ npm install express apollo-server-express graphql-playground-middleware-express // モジュールのインストール

程序

const express = require("express");
const { ApolloServer } = require('apollo-server-express');
const { readFileSync } = require('fs');
const resolvers = require('./resolvers');

const typeDefs = readFileSync('./src/typeDefs.graphql', 'utf-8');

const app = express();

const server = new ApolloServer({typeDefs, resolvers});

server.applyMiddleware({ app })

app.get('/', (req, res) => res.end(`Welcome to the PhotoShare API`))

app.listen({ port: 4000 }, () => console.log(`GraphQL Server runnning @ http://localhost:4000{server.graphqlPath}`))

type Query {
    helloWorld: String!
}

const Query = require('./Query');

const resolvers = {
    Query
}

module.exports = resolvers

module.exports = {
    helloWorld: () => 'Hello World'
}

启动服务器

$ cd myappServer
$ node src/index.js

>>>
GraphQL Server runnning @ http://localhost:4000{server.graphqlPath}

GraphQL客户端的实现

接下来，让我们尝试从客户端访问刚刚创建的GraphQL服务器。

创建一个React项目

$ create-react-app myappClient

安装

$ npm install graphql graphql-request

graphql-request

有多个框架可用于将GraphQL操作发送到API。其中著名的”graphql-request”被用于此。它通过将fetch请求包装成Promise来发送请求到GraphQL服务器。此外，它还负责构建请求和解析数据的详细处理。

该程序

请将已创建的App.js按照下面的方式进行修改。

import { useState } from 'react';
import './App.css';
import { request } from 'graphql-request'

const url = 'http://localhost:4000/graphql'

const query = `
  query helloWorld {
    helloWorld
  }
`

function App() {
  const [hello, setHello] = useState('');

  const graphQL = async () => {
    const result = await request(url, query)
    setHello(result.helloWorld)
  }

  return (
    <div className="App">
      <button onClick={graphQL}>Click</button>
      <div>{hello}</div>
    </div>
  );
}

export default App;

接受url和query作为参数的request()函数将构建请求并发送到服务器，并返回结果数据。在这里，预期的响应数据将会是JSON数据，内容为{ “helloWorld”: “Hello World” }。

启动服务器

$ cd myappClient
$ npm start

当服务器启动后，浏览器会自动打开，并且当点击“click”按钮时，会显示“Hello World！”。