如何在Vue阿波罗v4中设置多个客户端？

Question

我有两个不同的服务器(graphql，rest)，并试图在我的vue应用程序中设置多个客户端。

这是我的设置apollo.provider.js

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
import { RestLink } from 'apollo-link-rest';
import { provide } from 'vue'
import { ApolloClients } from '@vue/apollo-composable'

// HTTP connection to the API
const httpLink = createHttpLink({
    uri: 'https://reqres.in/graphql'
})

// Set `RestLink` with your endpoint
const restLink = new RestLink({ 
    uri: "https://reqres.in"
});

// Cache implementation
const cache = new InMemoryCache()

// Create the graphql client
const graphqlClient = new ApolloClient({
    cache: cache,
    link: httpLink
})

// Create the rest client
const restClient = new ApolloClient({
    cache: cache,
    link: restLink
})

export const provider = provide(ApolloClients, {
    default: graphqlClient,
    restClient: restClient
  })

这不起作用，但是我可以通过以下方式单独使用每个客户端

import { createApolloProvider } from '@vue/apollo-option'

export const provider = createApolloProvider({
    defaultClient: graphqlClient // or restClient
})

请帮助我理解如何使用两个客户。

Answer 1

原来我把“选项API”和“组合API”混为一谈。

考虑到我的安装程序使用了"options“，这个解决方案可以工作。

export const provider = createApolloProvider({
    clients: {
        graphqlClient,
        restClient
    },
    defaultClient: graphqlClient,
})