前端开发使用GraphQL——VUE3使用GraphQL

之前一直都是使用vue2，最近有新的项目使用了vue3，这里记录下在vue3环境下，使用GraphQL的一些经验。如果你使用的是vue2，建议直接使用vue-apollo组件。

1. 前端开发使用GraphQL——服务端技术选型

2. 前端开发使用GraphQL——Nestjs/GraphQL项目搭建

背景

新项目采用了vue3开发，而目前vue对应的QraphQL模块vue-apollo对使用typescript开发的vue3框架支持不是很好(目前正在开发的Vue Apollo 4 将支持 Vue 3)，没法利用typescript来检查GraphQL接口拉回来的数据，这里记录一下处理这些问题的方式。

一、创建apollo实例

创建一个apollo的实例，这里你可以定制化你的apollo实例，暂时我们先创建一个最简单的实例。

代码语言：javascript复制

import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

// 与 API 的 HTTP 连接
const httpLink = createHttpLink({
  // 你需要在这里使用绝对路径
  uri: 'http://localhost:3000/graphql',
})

// 缓存实现
const cache = new InMemoryCache()

// 创建 apollo 客户端
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

export default apolloClient;

二、安装graphql-codegen

graphql-codegen可以根据GraphQL的协议文件，生成typescript的type。后面我们就可以使用这些type去校验GraphQL接口返回的内容。

代码语言：javascript复制

// 安装graphql-codegen
npm i graphql-codegen --save--dev
// package.json 里面的script 添加
"scripts": {
   "dev": "vite --port 3333",
   "generate": "graphql-codegen --config ./src/codegen.yml"
},
//添加codegen.yml文件
schema: http://127.0.0.1:3000/graphql
generates:
  ./src/types/graphql/types.d.ts:
    plugins:
      - typescript

执行npm run generate之后，会生成GraphQL数据的typescript类型文件，类似下面这样

代码语言：javascript复制

export type Maybe<T> = T | null;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
  ID: string;
  String: string;
  Boolean: boolean;
  Int: number;
  Float: number;
};

export type Feed = {
  __typename?: 'Feed';
  content: Scalars['String'];
  id: Scalars['Int'];
  title: Scalars['String'];
};

export type Query = {
  __typename?: 'Query';
  feed: Feed;
};

export type QueryFeedArgs = {
  id: Scalars['Float'];
};

三、编写调用GraphQL的函数

编写调用函数，引入上一步生成的类型，这样我们就可以使用typescript的类型检查检查我们的数据，这里建议使用webstorm和vscode的同学去安装下对应的拓展，可以做到智能提示。参数这里

代码语言：javascript复制

import client from '../apollo'
import gql from 'graphql-tag';
import { Feed } from "../types/graphql/types";

type resFeed = {
  data: {
    feed: Feed;
  };
};

export function getFeedById(id: number): Promise<resFeed> {
  return client.query({
    query: gql`
      query feed($id: Float!) {
        feed(id: $id) {
          id
          title
          content
        }
      }`,
    variables: {
      id
    },
  });
}

四、小结

到这里，我们可以实现在vue3里面调用GraphQL的服务，同时对返回的数据使用typescript进行类型检查，不用再额外去写typescript的数据类型。

代码可以参考我的github: xyc-cn/nestjs-graphql-demo at vue3-apollo (github.com)

node.js typescript

0 人点赞