前端开发使用GraphQL——VUE3使用GraphQL
原创前端开发使用GraphQL——VUE3使用GraphQL
原创
之前一直都是使用vue2，最近有新的项目使用了vue3，这里记录下在vue3环境下，使用GraphQL的一些经验。如果你使用的是vue2，建议直接使用vue-apollo组件。
2. 前端开发使用GraphQL——Nestjs/GraphQL项目搭建
背景
新项目采用了vue3开发，而目前vue对应的QraphQL模块vue-apollo对使用typescript开发的vue3框架支持不是很好(目前正在开发的Vue Apollo 4 将支持 Vue 3)，没法利用typescript来检查GraphQL接口拉回来的数据，这里记录一下处理这些问题的方式。
一、创建apollo实例
创建一个apollo的实例，这里你可以定制化你的apollo实例，暂时我们先创建一个最简单的实例。
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接口返回的内容。
// 安装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类型文件，类似下面这样
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的同学去安装下对应的拓展，可以做到智能提示。参数这里
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)
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。