摸索graphQL在前端vue中使用过程

Posted 2023-03-19

如何动态的传入一个参数去请求？

上面探索过程中，我们直接将参数写死在了查询字符串当中了。但是在很多应用中，字段的参数可能是动态的。你可能会想到说直接去“修改查询字符串”，后面再把它序列化为Graphql专用的格式。其实，GraphQL 拥有一级方法将动态值提取到查询之外，然后作为分离的字典传进去。这些动态值即称为变量。

---

UI界面调试器

其工作方式跟类型语言中函数的参数定义一样。它以列出所有变量，变量前缀必须为 ​​$​​，后跟其类型。

1. 构建查询数据接口
2. ①括号内表示这个传入的​​$code​​​必须是​​ID​​​类型，并且后面加了一个感叹号​​！​​，表示变量是一定必要的。
3. 所以如果想要传递一个复杂对象到一个字段上，你必须知道服务器上其匹配的类型。可以从Schema页面了解更多关于输入对象类型的信息。

变量

代码设置为默认参数,可以通过在查询中的类型定义后面附带默认值的方式，将默认值赋给变量。当所有变量都有默认值的时候，你可以不传变量直接调用查询。

如果任何变量作为变量字典的部分传递了，它将覆盖其默认值。如下图，给他传入了一个参数​​"ca"​​。

代码内部执行

/**
 * @Author: 勇敢 牛牛
 * @description: 根据code值请求地区的值全名
 * @return *
 */
 export function getLanguage(params)
  return apolloClient.query(
    query:gql`query($value:ID!)
              language(code:$value)
                name,
                code 
              
          `,
    variables:params
    )

---

Prmise实例接受参数。

getLanguage(value:"am").then(res=>
  console.log(res);
).catch(err=>
  console.log("错误捕获",err);   
)

带有默认参数的查询：

export function getLanguage(params)
  return apolloClient.query(
    query:gql`query($value:ID!="am")
              language(code:$value)
                name,
                code 
              
          `,
    variables:params
    )

---

再不重新书写一个查询方法的请求下，如何动态的挑剔数据？

也就是说在请求阶段就通过某个参数嘎掉这个数据。

涉及到一个概念：“指令”。

强调这里的的不可为空的类型感叹号：“!”.如果后面有了利用这个参数的地方，切记加上不可为空的类型标识。

例如：

当我某个需要请求的选项在指令表示为false时，他就不会出现在我请求序列当中。而且传入了参数的话就需要使用这个参数，不然会报错

代码中表示为：（实现了一个次级选择）

这样的话，就是一个指令（Directives）

我们用了 GraphQL 中一种称作指令的新特性。一个指令可以附着在字段或者片段包含的字段上，然后以任何服务端期待的方式来改变查询的执行。GraphQL 的核心规范包含两个指令，其必须被任何规范兼容的 GraphQL 服务器实现所支持：

@include(if: Boolean) 仅在参数为 true 时，包含此字段。

@skip(if: Boolean) 如果参数为 true，跳过此字段。

指令在你不得不通过字符串操作来增减查询的字段时解救你。服务端实现也可以定义新的指令来添加新的特性。

①指令一
export function getLanguagePart(params)
  return apolloClient.query(
    query:gql`query($value:ID!="am",$is:Boolean!)
              language(code:$value)
                name,
                 # 查询可以有备注！表示code依据is的参数表示是否需要
                code @include(if:$is),
                native 
              
          `,
    variables:params
    )

②指令二
export function getLanguagePart(params)
  return apolloClient.query(
    query:gql`query($value:ID!="am",$is:Boolean!)
              language(code:$value)
                name,
                 # 如果参数为 true，跳过此字段。
                code @skip(if:$is)
                native 
              
          `,
    variables:params
    )


 getLanguagePart(value:"ca",is:false).then(res=>
        console.log("CA动态挑剔出数据",res);
      ).catch(err=>
        console.log("错误捕获",err);
      )

别名（Aliases）

后来，我需要在一个同一个模型的接口中找出指定的两个code的详细信息，那么他们属于同与一个类型，如何更具参数把他们两个分开你，当然可以在写一个接口模型去查询，但是吧，graphql提供了这样的一个能力，你想在一个查询模型中，获取不同的类目下的字段结果。但是直接写两个类目模型就会存在冲突，于是分别给他们一个别名

在程序中就可以这样写：

export function getLanguageOther(params)
  return apolloClient.query(
    query:gql`query($code1:ID!="am",$code2:ID!="am")
      one:language(code:$code1)
        native,
        name,
        code
      
      two:language(code:$code2)
          native,
          name,
          code
        
    `,
    variables:params
  )


getLanguageOther(code1:"ca",code2:"et").then(res=>
  console.log("Other别名的数据:",res);
).catch(err=>
  console.log("错误捕获",err);
)

这可以让你重命名结果中的字段为任意你想到的名字。

片段（Fragments）

片段使你能够组织一组字段，然后在需要它们的地方引入。
场景：就像刚才上面的别名，我最最终是需要选择同一样的字段，但是如果字段复杂，我可能会丢失或者写错某些字段，造成不必要的排查。那么是这里需要的是同一样的字段，就要作为共同的使用的代码，就可以提取出来为代码的片段。

片段的概念经常用于将复杂的应用数据需求分割成小块，特别是你要将大量不同片段的 UI 组件组合成一个初始数据获取的时候。片段可以访问查询或变更中声明的变量，只需要定义好。

在代码如何去编写这样的代码

export function getLanguageOther(params)
  return apolloClient.query(
    query:gql`query($code1:ID!="am",$code2:ID!="am")
      one:language(code:$code1)
          ...contentPart  
      
      two:language(code:$code2)
          ...contentPart
        
    ,
    fragment contentPart on Language
      native,
        name,
        code
    `,
    variables:params,
    context:name:"勇敢牛牛",
  )

以上就是第二次学习Graphql的积累

请求头的配置

在代码中有：

import ApolloClient from apollo-boost;

const apolloClient = new ApolloClient(
  // 你需要在这里使用绝对路径
  uri: https://countries.trevorblades.com/,
  headers:"Authorization":"Basic aW5zaWdodHM6MTIz","content-type":"application/json",
  request:(e)=>
    // 买次请求之前执行了，但是没有拦截的意义，我将继续探索
    console.log("before=>",e.getContext());

  ,
  onError:(e)=>
    // 失败错误信息打印
    console.log("err=>",e.networkError.message)
  ,
  clientState:
    
  ,
)

export default apolloClient;

解析Nuxt.js Vue服务端渲染摸索

本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，欢迎批评指正。

Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。
Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。
我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使网站无法在搜索引擎中被用户搜索到。（2）用户体验。大型webApp打包之后的js会很庞大，于是就有了按模块加载，像require.js一样，异步请求。webpack盛行，就变成了代码分割。即便如此，受制于用户设备，页面初次渲染还是有可能很慢，白屏等待时间太长，对日益挑剔的用户群体来说，无法接受。
因此，对于那些展示宣传型页面，如官网，必须进行服务端渲染（SSR）。安装 nuxt.js

$ vue init nuxt-community/starter-template <你项目的名字>
// 后面 安装依赖你懂的
// 安装koa版本
$ vue init nuxt/koa <你的项目名字>

运行

npm run dev

应用现在运行在 http://localhost:3000
注意：Nuxt.js 会监听 pages 目录中的文件变更并自动重启， 当添加新页面时没有必要手工重启应用。

路由

nuxt 是根据pages 目录结构生成路由配置

异步数据asyncData

注意必须要页面组件才能调用asyncData(就是components下是不能调用，必须路由的页面才行)

异步数据beforeCreate，created

注意：在任何vue组件的生命周期内，只有beforeCreate和created这两个钩子会在浏览器端和服务端均被调用；其他的钩子都只会在浏览器端调用。

使用插件mint-ui

首先我们需要在plugins文件夹中添加插件文件 mint-ui.js

import Vue from "vue";
import Mint from "mint-ui";
//欢迎加入前端全栈开发交流圈一起学习交流：864305860 
Vue.use(Mint);

在nuxt.config.js中配置plugins字段

/**
 * 配置第三方插件
 */
 plugins: [{ src: "~plugins/mint-ui", ssr: true }],
 //欢迎加入前端全栈开发交流圈一起学习交流：864305860
//同时nuxt还支持区分只在浏览器中运行和只在服务端运行的插件
 
//只在浏览器运行：配置nuxt.config.js中plugins字段，将引入的插件属性设置为ssr： false
//只在服务端运行：直接在webpack打包server.bundle.js文件中，将process.SERVER_BUILD设置为true即可

layout布局

1.nuxt.js实现了一个新的概念，layout布局，我们可以通过layout布 局方便的实现页面的多个布局之间方便的切换。本项目中实现了三种常用的布局，即：1）两栏布局，左栏固定，右栏动态宽度；2、错误页提示，页面中间一个提示框的布局方案；3、纯白页面布局。
具体开发的页面中，如果使用默认布局，则不需指定页面的布局，nuxt框架会自动对没有指定布局的页面和default布局进行关联。如果需要指定布局，则在layout字段中对布局进行指定。如图在login页面中对full布局进行了指定。

结语

感谢您的观看，如有不足之处，欢迎批评指正。

原文地址：https://segmentfault.com/a/1190000017383562