vue3+typescript+Apollo+Graphql（注入 Apollo 客户端）

代码下载

[demo【还未上传，等着】](https://)

版本信息

创建项目

// 创建vue项目npm create vite@latestmy-vue-ts-app----template vue-ts// 引入graphql,apollo-client,@vue/apollo-composablenpm install@vue/apollo-composable@apollo/client graphql

项目结构

配置Apollo

在src下新建一个文件夹【graphql】专门放graphql相关文件 src |- graphql-server

// src/graphql/server/index.tsimport{ApolloClient,InMemoryCache,createHttpLink,ApolloLink,from}from'@apollo/client';// HTTP连接consthttpLink=createHttpLink({uri:'graphql地址',});// // setContext 只适合：加 Token 头部// const authLink = setContext((_, { headers }) => {// return {// headers: {// ...headers,// authorization: localStorage.getItem('token') || '',// },// };// });/** * 多个http配置不同header */constauthLinkToken=newApolloLink((operation,forward)=>{constcontext=operation.getContext();operation.setContext(()=>({headers:{...context.headers,authorization:localStorage.getItem('token')||'token',},}));returnforward(operation);});// 修改返回response内部参数constformatDateLink=newApolloLink((operation,forward)=>{returnforward(operation).map((response)=>{// console.log(response);returnresponse;});});constapolloClient=newApolloClient({// link: authLink.concat(httpLink),link:from([authLinkToken,formatDateLink,httpLink]),cache:newInMemoryCache({}),});exportdefaultapolloClient;

全局注入Apollo 客户端

// src/server/global.tsimportapolloClientfrom'./index';import{provideApolloClient}from'@vue/apollo-composable';// 全局注入 Apollo 客户端provideApolloClient(apolloClient);export{apolloClient};

// src/main.tsimport'./graphql/server/global';