Apollo GraphQL的订阅在Vuejs中不起作用。
创始人
2024-09-09 03:00:39
0

要在Vue.js中使用Apollo GraphQL的订阅功能,需要使用Apollo的apollo-link-ws库和subscriptions-transport-ws库。

首先,确保已安装所需的库:

npm install apollo-link-ws subscriptions-transport-ws

然后,根据以下示例代码来设置订阅功能:

import Vue from 'vue';
import VueApollo from 'vue-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import { SubscriptionClient } from 'subscriptions-transport-ws';

Vue.use(VueApollo);

const httpLink = new HttpLink({
  uri: 'https://your-graphql-endpoint',
});

const wsLink = new WebSocketLink(new SubscriptionClient('wss://your-graphql-endpoint', {
  reconnect: true,
}));

const link = split(
  // 根据操作类型切换链接
  ({ query }) => {
    const definition = getMainDefinition(query);
    return definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription';
  },
  wsLink,
  httpLink,
);

const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
});

new Vue({
  apolloProvider,
  // ...
});

在上面的示例代码中,我们创建了一个httpLink和一个wsLink,分别用于处理普通的GraphQL查询和订阅。然后,我们使用split函数根据操作类型来切换链接。如果操作是一个订阅操作,我们将使用wsLink,否则将使用httpLink

最后,我们将创建的Apollo客户端和Vue Apollo插件添加到Vue实例中。

现在,您可以在Vue组件中使用Apollo的ApolloConsumer组件来订阅数据。以下是一个使用订阅的示例组件:




在上面的示例组件中,我们使用ApolloConsumer组件来获取Apollo客户端实例,并使用subscribeToMore选项来订阅数据。在回调函数中,我们将新的订阅数据添加到现有的消息数组中。

这是设置Apollo GraphQL订阅的基本方法。您可以根据您的具体需求进行调整和扩展。

相关内容

热门资讯

安卓系统怎么连不上carlif... 安卓系统无法连接CarLife的原因及解决方法随着智能手机的普及,CarLife这一车载互联功能为驾...
oppo手机安卓系统换成苹果系... OPPO手机安卓系统换成苹果系统:现实吗?如何操作?随着智能手机市场的不断发展,用户对于手机系统的需...
iwatch怎么连接安卓系统,... 你有没有想过,那款时尚又实用的iWatch,竟然只能和iPhone好上好?别急,今天就来给你揭秘,怎...
iphone系统与安卓系统更新... 最近是不是你也遇到了这样的烦恼?手机更新系统总是失败,急得你团团转。别急,今天就来给你揭秘为什么iP...
安卓系统上滑按键,便捷生活与高... 你有没有发现,现在手机屏幕越来越大,操作起来却越来越方便了呢?这都得归功于安卓系统上的那些神奇的上滑...
安卓平板改windows 系统... 你有没有想过,你的安卓平板电脑是不是也能变身成Windows系统的超级英雄呢?想象在同一个设备上,你...
安卓系统连接耳机模式,蓝牙、有... 亲爱的手机控们,你们有没有遇到过这种情况:手机突然变成了“耳机模式”,明明耳机没插,声音却只从耳机孔...
希沃系统怎么装安卓系统,解锁更... 亲爱的读者们,你是否也像我一样,对希沃一体机上的安卓系统充满了好奇呢?想象在教室里,你的希沃一体机不...
安装了Anaconda之后找不... 在安装Anaconda后,如果找不到Jupyter Notebook,可以尝试以下解决方法:检查环境...
安卓换鸿蒙系统会卡吗,体验流畅... 最近手机圈可是热闹非凡呢!不少安卓用户都在议论纷纷,说鸿蒙系统要来啦!那么,安卓手机换上鸿蒙系统后,...