如何为我的 vuejs 3 应用程序设置 GraphQL

Question

我是 VueJS 的新手，我一直在尝试用我的 vuejs 设置 graphql，但我似乎无法正确设置。有趣的是，除了 [Vue warn] 之外，我的控制台上没有任何错误 ：插件必须是函数或具有“安装”函数的对象。错误。

只有当我将vueapollo实例化为 use 方法时，才会出现这种情况。

这是我的 main.js 文件

import { createApp } from 'vue';
import ElementUI from 'element-plus';

import ApolloClient from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import VueApollo from 'vue-apollo';

import App from './App.vue';
import router from './router';
import store from './store';
import './assets/style/theme/index.css';

// HTTP connection to the API
const httpLink = createHttpLink({
  // You should use an absolute URL here
  uri: 'http://localhost:4999/graphql',
});

// Cache implementation
const cache = new InMemoryCache();

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
});

/* The provider holds the Apollo client instances 
that can then be used by all the child components. */
// eslint-disable-next-line
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
});

createApp(App)
  .use(ElementUI)
  .use(apolloClient)
  .use(store)
  .use(router)
  .mount('#app');

我有一个页面文件，目前我想到达我之前创建的“Hello”端点

<template>
  <div>
    <h1>Hello</h1>
    <h1>{{ hello }}</h1>
  </div>
</template>

<script>
import gql from 'graphql-tag';

export default {
  data() {
    return {
      hello: '',
    };
  },
  apollo: {
    // Simple query that will update the 'hello' vue property
    hello: gql`
      query {
        hello
      }
    `,
  },
};
</script>

Answer 1

几周前我也曾为此苦苦挣扎。
我不记得怎么做的，但我让它工作了。
我在这里发布我的代码，以防将来对任何人有帮助。

问题作者和我的代码之间的区别在于我如何将 Apollo 客户端传递给 create-app 设置函数。我不知道它是否正确，但它有效。

PS：我还在所有内容上使用 TypeScript。

我的 apollo-client.ts 文件

import { ApolloError } from '@apollo/client';
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core';
import { ErrorResponse } from '@apollo/client/link/error';
import { onError } from '@apollo/client/link/error';
import { logErrorMessages } from '@vue/apollo-util';

function getHeaders() {
    const headers = {
        'content-type': 'application/json',
    };
    /*  const token = window.localStorage.getItem('apollo-token');
    if (token) {
        headers['Authorization'] = `Bearer ${token}`;
    } */
    return headers;
}

// Create an http link:
const httpLink = new HttpLink({
    uri: 'http://localhost:3000/query',
    fetch: (uri: RequestInfo, options: RequestInit) => {
        options.headers = getHeaders();
        return fetch(uri, options);
    },
});

const errorLink = onError((error: ErrorResponse | ApolloError) => {
    if (process.env.NODE_ENV !== 'production') {
        logErrorMessages(error);
    }
});

// Create the apollo client
export const apolloClient = new ApolloClient({
    cache: new InMemoryCache(),
    connectToDevTools: true,
    link: errorLink.concat(httpLink),
});

我的 main.ts 文件：

import { apolloClient } from './apollo-client';
import { createApp, provide, h } from 'vue';
import { DefaultApolloClient } from '@vue/apollo-composable';
import { createApolloProvider } from '@vue/apollo-option';
import { loadFonts } from './plugins/webfontloader';
import App from './App.vue';
import router from './router';
import store from './store';
import vuetify from './plugins/vuetify';

// TODO: Auth
// import authPlugin from "./auth/authPlugin"

// Create a provider
const apolloProvider = createApolloProvider({
    defaultClient: apolloClient,
});

loadFonts();

const app = createApp({
    setup() {
        provide(DefaultApolloClient, apolloClient);
    },
    render: () => h(App),
});

app.use(router).use(store).use(vuetify).use(apolloProvider).mount('#app');