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

web 应用程序异步发送和检索数据（在后台）。ajax 允许网站在不刷新页面的情况下将内容加载到屏幕上。jquery 为 ajax 功能提供了多种方法，因此可以更轻松地使用 ajax。在本章中，我们将学习如何将 graphql 与 jquery 集成。

考虑使用客户端服务器架构的应用程序。我们可以构建一个前端网页，从 graphql 服务器请求数据。该网页将使用 jquery 对 graphql 服务器进行 ajax 调用。

为了将 graphql 与 jquery 集成，让我们检查 graphiql 请求标头并了解请求参数。

从简单的示例中，我们可以理解使用的http 方法是 post。现在在浏览器中，向下滚动到标题部分以查看 请求负载。

单击 view source 后，我们将在 chrome 的请求负载部分看到以下内容。

{"query":"{\n  greeting\n}","variables":null,"operationname":null}

让我们了解如何逐步将 graphql 与 jquery 集成。

设置服务器

我们将学习使用以下步骤设置服务器

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

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

二、 创建schema

在项目文件夹 jquery-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!!"
  }
}

设置客户端

由于我们已经设置了服务器，现在我们将学习如何设置客户端。

一、 在当前项目文件夹之外创建一个新文件夹 jquery-client-app

首先，我们将在项目文件夹外创建一个名为jquery-client-app的文件夹。

二、 为 jquery 集成创建一个 html 页面 index.html

我们将在 jquery 中创建一个客户端应用程序并调用这两个方法。以下是index.html 文件的代码 。 点击 index.html的 按钮时，页面将请求发送到服务器 greeting和sayhello的被点击。我们将使用 $.ajax() 函数发出异步请求。

   
      
      
   
   
   
      
      

      

         greet
         
 

         
 
      
      
      
 
 

      

      

         enter a name:
         sayhello
         
 
      
   

在浏览器中打开此文件并单击按钮以查看响应。输出将如下所示