如何使用 @vue/composition-api 和 nuxt.js 获取 vue-apollo 实例

Posted 2023-03-10

【中文标题】如何使用 @vue/composition-api 和 nuxt.js 获取 vue-apollo 实例

【英文标题】：How to get an vue-apollo instance with @vue/composition-api and nuxt.js

【发布时间】：2020-04-09 05:51:05

【问题描述】：

如何配置vue-apollo，与@vue/apollo-composable结合，与@vue/composition-api或Vue3.0结合？

因为虽然我通过使用@nuxtjs/apollo 获得了默认的apolloClient：

import  DefaultApolloClient  from "@vue/apollo-composable";
const myPlugin: Plugin = (context, inject) => 
  const defaultClient = ctx.app.apolloProvider.defaultClient;
   // do stuff with defaultClient, e.g. provide()


export default myPlugin

它仍然是空的，而不是填充我来自nuxt.config.ts 的设置。

如何使用@vue/apollo-composable 创建一个有效的vue-apollo client 或如何直接创建context.root.$apollo？

【参考方案1】：

这是我目前在 nuxt 中设置 vue-apollo 的方法。这很可能是一个不断变化的目标，因为这两个软件包都相对较新并且正在积极开发中。

包版本是

"@vue/apollo-composable": "4.0.0-alpha.1"
"@vue/composition-api": "version": "0.3.4"

阿波罗设置

//apolloClient.js
import  ApolloClient  from 'apollo-client';
import  InMemoryCache  from 'apollo-cache-inmemory';
import link from './link';

export default function apolloClient(_, inject) 
  const cache = new InMemoryCache();

  const client = new ApolloClient(
    // Provide required constructor fields
    cache,
    link,
    // Provide some optional constructor fields
    name: 'apollo-client',
    queryDeduplication: false,
    defaultOptions: 
      watchQuery: 
        fetchPolicy: 'cache-and-network',
      ,
    ,
  );

  inject('apollo', client);


// link.js
import  split  from 'apollo-link';
import  HttpLink  from 'apollo-link-http';
import  WebSocketLink  from 'apollo-link-ws';
import  getMainDefinition  from 'apollo-utilities';
import fetch from 'unfetch';
const httpLink = new HttpLink(
  uri: 'http://localhost:8080/v1/graphql',
  credentials: 'same-origin',
  fetch,
);

const wsParams = 
  uri: `ws://localhost:8080/v1/graphql`,
  reconnect: true,
;

if (process.server) 
  wsParams.webSocketImpl = require('ws');


const wsLink = new WebSocketLink(wsParams);

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
  // split based on operation type
  ( query ) => 
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  ,
  wsLink,
  httpLink,
);

export default link;

然后通过上述方法，您将 apollo 作为插件包含在您的 nuxtconfig 中

  plugins: [
    '~/plugins/vue-composition-api',
    '~/plugins/apolloClient'
  ],