मैं 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
JoeSchr 16 पद 2019, 21:12

1 उत्तर

सबसे बढ़िया उत्तर

यहाँ nuxt में vue-apolo को स्थापित करने का मेरा वर्तमान तरीका है। यह संभवतः एक गतिशील लक्ष्य होगा क्योंकि ये दोनों पैकेज अपेक्षाकृत नए हैं और सक्रिय विकास में हैं।

पैकेज संस्करण हैं

"@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'
  ],
2
Austio 16 पद 2019, 19:39