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

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

上面探索过程中，我们直接将参数写死在了查询字符串当中了。但是在很多应用中，字段的参数可能是动态的。你可能会想到说直接去“修改查询字符串”，后面再把它序列化为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;