Vue中对接Graphql的实践 ----- Vue Apollo

Graphql与Vue Apollo简介/

当 Facebook 构建 GraphQL 时，他们需要一个功能强大的数据获取 API，该 API 可以处理 Facebook 的所有任务，使其产品开发人员的学习和使用简单易行。 GraphQL 是一种描述与业务相关的数据模型的查询语言。 对于前端来讲，Graphql api作为API的网关，获取任何类型的数据都可以统一使用Graphql，再由Graphql与后端通信获取，后端解释之后，以JSON格式返回给前端。Vue Apollo是一个集成Apollo和Graphql的Vue组件，让你在Vue.js应用中集成Graphql。

为什么使用Graphql /

与REST相比，Graphql具有以下优点：

没有过度获取和获取不足的问题

没有过度获取和获取不足的问题，REST响应包含太多数据或有时数据不足，这会产生对另一个请求的需求。Graphql可以通过在单个请求中仅获取准确和特定的数据来解决这个问题。

适合复杂系统和微服务

GraphQL 的 API 后面可集成多个系统， 它统一了它们并隐藏了它们的复杂性。 GraphQL 服务器还用于从现有系统中获取数据并将其打包为 GraphQL 响应格式。 这对于规模庞大且难以维护和处理的遗留基础设施或第三方 API 最为有利；当我们必须从单体后端应用程序迁移到微服务架构时，GraphQL API 可以通过将多个微服务合并到一个 GraphQL 模式来帮助我们处理它们之间的通信。

强类型

GraphQL是一种强类型语言，其中 GraphQL 查询的每个级别对应特定类型，并且每个类型描述一组可用字段。

Vue Apollo快速入门 /

安装

npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag

新建apollo..js

import {  ApolloClient,  createHttpLink,  InMemoryCache,  split,} from "@apollo/client/core";import { WebSocketLink } from "@apollo/client/link/ws";import { getMainDefinition } from "@apollo/client/utilities";​export const newApolloClient = (httpUri: string, wsUri: string): any => {  // 与 API 的 HTTP 连接  const httpLink = createHttpLink({    // 你需要在这里使用绝对路径    uri: httpUri,  });

// 创建订阅的 websocket 连接  const wsLink = new WebSocketLink({    uri: wsUri,    options: {      reconnect: true,    },  });

// 使用分割连接的功能  // 你可以根据发送的操作类型将数据发送到不同的连接  const link = split(    // 根据操作类型分割    ({ query }) => {      const definition = getMainDefinition(query);      return (        definition.kind === "OperationDefinition" &&        definition.operation === "subscription"      );    },    wsLink,    httpLink  );

// 缓存实现  const cache = new InMemoryCache({ addTypename: false });

// 创建 apollo 客户端  return new ApolloClient({    link: link,    cache,  });};

在main.ts中添加

import { newApolloClient } from "./utils/apolloClient";
new Vue({      router,      store,      provide() {        return {          [DefaultApolloClient]: newApolloClient(            aesDecrypt(res.httpLinkUri),            aesDecrypt(res.wsLinkUri)          ),        };      },      render: (h) => h(App),    }).$mount("#app");

在根目录下创建vue.config.js文件

module.exports = {  chainWebpack: (config) => {    // GraphQL Loader    config.module      .rule("graphql")      .test(/\.(graphql|gql)$/)      .use("graphql-tag/loader")      .loader("graphql-tag/loader")      .end();  },  productionSourceMap:false,};

写接口

export const getAlertsInfo = gql`  query getAlertsInfo {    AlertDefinitions {      AlertDefinition {        id        cluster_name        service_name        label      }    }    AlertSummaryGrouped {      definition_id      definition_name      summary    }  }`;

在组件函数中使用

const { result: alertsInfo } = useQuery(getAlertsInfo, null, {    enabled: false,    fetchPolicy: "no-cache",  });