graphql react 集成——迹忆客-ag捕鱼王app官网

react 是一个用于构建用户界面的 javascript 库。本章解释了如何将 graphql 与 react 应用程序集成。

设置react项目最快捷的方法是使用 create react app 工具。在随后的部分中，我们将学习如何设置服务器和客户端。

设置服务器

要设置服务器，请按照以下步骤操作

一、 下载并安装项目所需的依赖项

创建一个名为react-server-app的文件夹。从终端将目录更改为 react-server-app。然后，按照开发环境的搭建中说明的步骤 3 到 5 完成下载和安装过程。

二、 创建schema

在项目文件夹 react-server-app 中添加 schema.graphql 文件并添加以下代码

schema.graphql

type query
{
   greeting: string
   sayhello(name:string!):string
}

该文件定义了两个查询greeting和sayhello。sayhello 查询接受一个字符串参数并返回另一个字符串。sayhello() 函数的参数不为空。

三、创建解析器

在项目文件夹中创建一个文件resolvers.js，并添加以下代码

resolvers.js

const query =
{
   greeting: () => 'hello graphql  from jiyik !!' ,
   sayhello:(root,args,context,info) =>  `hi ${args.name} graphql server says hello to you!!`
}
module.exports = {query}

在这里，greeting和sayhello是两个解析器。在 sayhello 解析器中，可以通过 args 访问传递给 name 参数的值。要访问模块外的解析器函数，必须使用module.exports导出 query 对象。

四、运行应用程序

创建 server.js 文件并参考开发环境的搭建章节中的步骤 8。下一步是在终端中执行命令 npm start。服务器将在 9000 端口上启动并运行。在这里，我们使用 graphiql 作为客户端来测试应用程序。打开浏览器并输入 url，http://localhost:9000/graphiql。

在编辑器中输入以下查询

{
   greeting,
   sayhello(name:"mohtashim")
}

来自服务器的响应如下

{
  "data": {
    "greeting": "hello graphql  from jiyik !!",
    "sayhello": "hi mohtashim graphql server says hello to you!!"
  }
}

设置客户端

为客户端打开一个新终端。在执行客户端应用程序之前，服务器终端应该保持运行。react 应用程序将在端口号 3000 上运行，服务器应用程序将在端口号 9000 上运行。

一、创建一个 react 项目 hello-world-client

在客户端，输入以下命令

$ npx create-react-app hello-world-client

这将安装典型 react 应用程序所需的一切。 npx 实用程序和 create-react-app 工具创建一个名为 hello-world-client 的项目。 安装完成后，在 vscode 中打开项目。

二、启动 hello-world-client

将终端中的当前文件夹路径更改为 hello-world-client。输入 npm start 启动项目。这将在端口 3000 运行开发服务器，并将自动打开浏览器并加载 index 页面。

三、修改应用程序组件

在 src 文件夹中的 app.js 中，添加两个函数，loadgreeting 和 loadsayhello 。

loadgreeting 函数，它发送 graphql 查询。

async function loadgreeting() {
   const response = await fetch('http://localhost:9000/graphql', {
      method:'post',
      headers:{'content-type':'application/json'},
      body:json.stringify({query:'{greeting}'})
   })
   const rsponsebody = await response.json();
   return rsponsebody.data.greeting;
}

以下loadsayhello函数

async function  loadsayhello(name) {
   const response = await fetch('http://localhost:9000/graphql', {
      method:'post',
      headers:{'content-type':'application/json'},
      body:json.stringify({query:`{sayhello(name:"${name}")}`})
   })
   const rsponsebody = await response.json();
   return rsponsebody.data.sayhello;
}

完整的app.js文件如下所示

import react, { component } from 'react';
import logo from './logo.svg';
import './app.css';
async function loadgreeting() {
   const response =  await fetch('http://localhost:9000/graphql', {
      method:'post',
      headers:{'content-type':'application/json'},
      body:json.stringify({query:'{greeting}'})
   })
   const rsponsebody =  await response.json();
   return rsponsebody.data.greeting;
   console.log("end of function")
}
async function  loadsayhello(name) {
   const response =  await fetch('http://localhost:9000/graphql', {
      method:'post',
      headers:{'content-type':'application/json'},
      body:json.stringify({query:`{sayhello(name:"${name}")}`})
   })
   const rsponsebody =  await response.json();
   return rsponsebody.data.sayhello;
}
class app extends component {
   constructor(props) {
      super(props);
      this.state =  {greetingmessage:'',sayhellomessage:'',username:''}
      this.updatename =  this.updatename.bind(this);
      this.showsayhellomessage =  this.showsayhellomessage.bind(this);
      this.showgreeting =  this.showgreeting.bind(this);
   }
   
   showgreeting() {
      loadgreeting().then(g => this.setstate({greetingmessage:g " :-)"}))
   }
   
   showsayhellomessage() {
      const name = this.state.username;
      loadsayhello(name).then(m => this.setstate({sayhellomessage:m}))
   }
   
   updatename(event) {
      this.setstate({username:event.target.value})
   }
   render() {
      return (
         

            

               
               
            
            


            

               greet
               
 

               

                  
               
            
            
            

            
            

               enter a name:
               sayhello
               

               user name is:{this.state.username}    

               

                  
               
            
         
      );
   }
}
export default app;

两个应用程序都运行后，单击欢迎按钮。接下来，在文本框中输入名称并单击 sayhello 按钮。输出将如下所示