graphql cache 缓存——迹忆客-ag捕鱼王app官网

graphql cache 是将数据存储在称为缓存的临时存储区域中的过程 。当你返回到最近访问过的页面时，浏览器可以从缓存而不是原始服务器中获取这些文件。这可以节省您的时间，并使网络免于额外流量的负担。

与 graphql 交互的客户端应用程序负责在其末端缓存数据。一种可能的模式是将一个字段（如 id）保留为全局唯一标识符。

内存缓存

inmemorycache 是 graphql 客户端应用程序中常用的规范化数据存储，不使用其他库（如 redux）。

下面给出了将 inmemorycache 与 apolloclient 一起使用的示例代码

import {apolloclient, httplink, inmemorycache} from 'apollo-boost'
const cache = new inmemorycache();
const client = new apolloclient({
   link: new httplink(),
   cache
});

inmemorycache 构造函数有一个可选的参数，这个参数是一个对象，对象中有配置项

我们将在 reactjs 中创建一个带有两个选项卡的单页应用程序——一个用于ag捕鱼王app官网主页选项卡，另一个用于学生选项卡。学生选项卡将从 graphql 服务器 api 加载数据。当用户从ag捕鱼王app官网主页选项卡导航到学生选项卡时，应用程序将查询学生数据。结果数据将由应用程序缓存。

我们还将使用gettime字段查询服务器时间以验证页面是否已缓存。如果数据从缓存返回，页面将显示发送到服务器的第一个请求的时间。如果数据是向服务器发出新请求的结果，它将始终显示来自服务器的最新时间。

设置服务器

以下是设置服务器的步骤

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

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

二、 创建schema

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

schema.graphql

type query {
   students:[student]
   gettime:string
}
type student {
   id:id!
   firstname:string
   lastname:string
   fullname:string
}

三、创建解析器

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

resolvers.js

const db = require('./db')
const query = {
      students:() => db.students.list(),
      gettime:() => {
      const today = new date();
      var h = today.gethours();
      var m = today.getminutes();
      var s = today.getseconds();
      return `${h}:${m}:${s}`;
   }
}
module.exports = {query}

四、运行应用程序

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

在编辑器中输入以下查询

{
   gettime
   students {
      id
      firstname
   }
}

示例响应显示学生姓名和服务器时间。

{
  "data": {
    "gettime": "11:6:48",
    "students": [
      {
        "id": "s1001",
        "firstname": "feng"
      },
      {
        "id": "s1002",
        "firstname": "kannan"
      },
      {
        "id": "s1003",
        "firstname": "kiran"
      }
    ]
  }
}

设置 reactjs 客户端

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

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

在客户端，输入以下命令

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

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

使用以下命令安装 react 的路由器模块

$ npm install react-router-dom

二、启动 hello-world-client

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

三、安装 apollo 客户端库

要安装 apollo 客户端，打开一个新终端并位于当前项目文件夹路径中。输入以下命令

$ npm install apollo-boost graphql

这将下载客户端的 graphql 库以及 apollo boost 包。我们可以通过在 apollo-boost 依赖项中输入 npm view 来交叉检查。这将有许多依赖项，如下所示

apollo-cache-inmemory: ^1.6.6 apollo-link: ^1.0.6
apollo-cache: ^1.3.5          graphql-tag: ^2.4.2
apollo-client: ^2.6.10        ts-invariant: ^0.4.0
apollo-link-error: ^1.0.3     tslib: ^1.10.0
apollo-link-http: ^1.3.1

我们可以清楚地看到安装了 apollo-client 库。

四、修改 index.js 文件中的 app 组件

只需要将index.js保存在src文件夹中，将 index.html 保存在 public 文件夹中；可以删除自动生成的所有其他文件。

目录结构如下

hello-world-client /
   -->node_modules
   -->public
         index.html
   -->src
         index.js
                 students.js
   -->package.json

添加一个包含学生组件的附加文件 students.js。学生详细信息通过学生组件获取。在 app 组件中，我们使用了 hashrouter。

以下是react 应用程序中的 index.js

index.js

import react, {component} from 'react';
import reactdom from 'react-dom';
import {hashrouter, route, link} from 'react-router-dom'
//components
import students from './students'
class app extends component {
   render() {
      return(
         

         
welcome to react application !! 
         
      )
   }
}
function gettime() {
   var d = new date();
   return d.gethours() ":" d.getminutes() ":" d.getseconds()
}
const routes = 
   

      
time from react app:{gettime()}
      

         
      
      
      
   

reactdom.render(routes, document.queryselector("#root"))

五、在 students.js 中编辑组件 students

在 students 组件中，我们将使用以下两种方法来加载数据

• fetch api (loadstudents_nocache) - 每次点击学生选项卡时都会触发一个新请求。
• apollo client (loadwithapolloclient) - 这将从缓存中获取数据。

添加一个函数loadwithapolloclient，它从服务器查询学生和时间。此功能将启用缓存。这里我们使用 gql 函数来解析查询。

async loadwithapolloclient() {
   const query = gql`{
      gettime
      students {
         id
         firstname
      }
   }`;
   const {data} = await  client.query({query})
   return data;
}

fetch api是获取资源的简单接口。与旧的 xmlhttprequest 相比，fetch 可以更轻松地发出 web 请求和处理响应。以下方法显示使用 fetch api 直接加载数据

async  loadstudents_nocache() {
      const response = await fetch('http://localhost:9000/graphql', {
      method:'post',
      headers:{'content-type':'application/json'},
      body:json.stringify({query:`{
         gettime
         students {
            id
            firstname
         }
      }`})
   })
   const rsponsebody = await response.json();
   return rsponsebody.data;
}

在 studentscomponent 的构造函数中，调用loadwithapolloclient方法。完整的 students.js 文件如下

import react, {component} from 'react';
import { link} from 'react-router-dom'
//apollo client
import {apolloclient, httplink, inmemorycache} from 'apollo-boost'
import gql from 'graphql-tag'
const client = new apolloclient({
   link: new httplink({uri:`http://localhost:9000/graphql`}),
   cache:new inmemorycache()
})
class students extends component {
   constructor(props) {
      super(props);
      this.state = {
         students:[{id:1,firstname:'test'}],
         servertime:''
      }
      this.loadwithapolloclient().then(data => {
         this.setstate({
            students:data.students,
            servertime:data.gettime
         })
      })
   }
   
   async  loadstudents_nocache() {
      const response = await fetch('http://localhost:9000/graphql', {
         method:'post',
         headers:{'content-type':'application/json'},
         body:json.stringify({query:`{
            gettime
            students {
               id
               firstname
            }
         }`})
      })
      const rsponsebody =  await response.json();
      return rsponsebody.data;
   }
   
   async loadwithapolloclient() {
      console.log("inside apollo client function")
      const query = gql`{
         gettime
         students {
            id
            firstname
         }
      }`;
      const {data} = await  client.query({query})
      return data;
   }
   
   render() {
      return(
         

            
time from graphql server :{this.state.servertime}
            
following students found 
            

               

                  {
                     this.state.students.map(s => {
                        return(
                           

                              {s.firstname}
                           
                        )
                     })
                  }
               
            
         
      )
   }
}
export default students

六、使用npm start运行 react 应用程序

可以通过从ag捕鱼王app官网主页选项卡切换到学生选项卡来测试 react 应用程序。一旦学生选项卡加载了来自服务器的数据。它将缓存数据。我们可以通过多次从ag捕鱼王app官网主页切换到学生选项卡来测试。输出将如下所示

如果你首先通过输入 url http://localhost:3000/#/students 加载了学生页面 ，你可以看到 react 应用程序和 graphql 的加载时间大致相同。之后如果切换到ag捕鱼王app官网主页视图并返回到 graphql 服务器，时间将不会改变。这表明数据已缓存。

七、将 loadwithapolloclient 调用更改为 loadstudents_nocache

如果在studentcomponent的构造函数中将load方法改为loadstudents_nocache，输出将不会缓存数据。这显示了缓存和非缓存之间的区别。

this.loadstudents_nocache().then(data => {
   this.setstate({
      students:data.students,
      servertime:data.gettime
   })
})

从上面的输出可以清楚地看出，如果您在选项卡之间来回切换，graphql 服务器的时间将始终是最新的，这意味着数据不会被缓存。