安装

兼容性

• Vue 3
• Apollo Client 3

注意：@vue/apollo-composable 支持 Vue 2，这得益于 Vue Demi.

Vue CLI 插件

⚠️ 该插件尚未更新以支持新软件包。

手动安装

npm install --save graphql graphql-tag @apollo/client

或者

yarn add graphql graphql-tag @apollo/client

在您的应用程序中，创建一个 ApolloClient 实例

import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'

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

// Cache implementation
const cache = new InMemoryCache()

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

继续在 下一步 中安装。

IDE 集成

Visual Studio Code

如果您使用的是 VS Code，建议您安装 Apollo GraphQL 扩展.

然后通过在 Vue 项目的根文件夹中创建一个 apollo.config.js 文件来配置它

// apollo.config.js
module.exports = {
  client: {
    service: {
      name: 'my-app',
      // URL to the GraphQL API
      url: 'http://localhost:3000/graphql',
    },
    // Files processed by the extension
    includes: [
      'src/**/*.vue',
      'src/**/*.js',
    ],
  },
}

Webstorm

如果您使用的是 Webstorm，建议您安装 JS GraphQL 扩展.

然后通过在 Vue 项目的根文件夹中创建一个 .graphqlconfig 文件来配置它

{
  "name": "Untitled GraphQL Schema",
  "schemaPath": "./path/to/schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "http://url/to/the/graphql/api",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    }
  }
}

下一步

继续使用以下指南之一

• 选项（经典）API
• 组合（高级）API
• 组件 API
• 高级主题