React 作为 @vue/apollo-composable 的依赖项

Question

我有一个使用 Composition API 的 VueJs 应用程序。我想使用 apollo 查询我的 GraphQL 后端，但收到错误

Could not resolve "react"

。

我的依赖项是：

"@apollo/client": "^3.8.9"

、

"@vue/apollo-composable": "4.0.0-beta.12"

、

"graphql": "^16.8.1"

和

"graphql-tag": "^2.12.6"

。

我在

apollo/index.ts

中定义我的ApolloCLient：

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

const httpLink = new HttpLink({ uri: import.meta.env.VITE_GRAPHQL_URL });

export default new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
})

它通过

registerPlugins

函数提供给应用程序：

//...
import apollo from '../apollo'
import { DefaultApolloClient } from '@vue/apollo-composable'

// Types
import type { App } from 'vue'

export function registerPlugins (app: App) {
  app
    //...
    .provide(DefaultApolloClient, apollo)
}

当我尝试用vite运行测试服务器时，我得到了几个

[ERROR] Could not resolve "react"

，例如：

[ERROR] Could not resolve "react"

    node_modules/.pnpm/@[email protected][email protected]/node_modules/@apollo/client/react/context/ApolloContext.js:1:23:
      1 │ import * as React from "react";
        ╵                        ~~~~~~~

  You can mark the path "react" as external to exclude it from the bundle, which will remove
  this error.

我有一个使用

@vue/apollo-option

的不同应用程序，运行没有问题。我有一个优雅的解决方案可以用

vue-apollo

来解决这个问题，请也写下来，我根本没有这方面的经验。如有任何帮助，我们将不胜感激。

Answer 1

我通过从

@apollo/client/core

导入

apollo/index.ts

解决了这个问题。