vue.js - 如何使用 @vue/composition-api 和 nuxt.js 获取 vue-apollo 实例
问题描述
如何配置vue-apollo
, 结合使用or@vue/apollo-composable
来完善?@vue/composition-api
Vue3.0
因为虽然我apolloClient
通过 using获得了默认值@nuxtjs/apollo
:
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
client
使用@vue/apollo-composable
或如何context.root.$apollo
在第一手创建?
解决方案
这是我目前在 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'
],
推荐阅读
- regex - Perl 或 Python 任意正则表达式替换与捕获
- xcode - Xcode 目录中无法识别 Podfile
- python - Django如何在更新数据后重定向回分页页面?
- reactjs - 如何在步进器中提交表单
- applescript - 使用 AppleScript 打开电子邮件中发送的链接
- c# - 如何在一对多关系类中获取asp.net核心实体中的特定字段
- angular - custom-theme.scss 的未声明的 mixin mat-core angular-material-theme
- javascript - 如何使用 node.js 正确抓取 YouTube?
- javascript - 使用 str.match() 仅匹配完整的单词
- unix - 在 unix awk 命令中搜索确切的单词