Question

我已经在vue中集成了apollo-graphql（没有nuxt），并且有效。

但是现在我试图从Nuxt开始。在文件夹插件中，我包含了一个带有阿波罗初始化的js文件。

然后在一个vue文件中，我使用以下文件导入文件：/** * @Route("/", name="salle_home", methods={"GET"}) * @Route("/hall-{id}", name="salle_show", methods={"GET"}) * @Entity("salle", expr="repository.customQuery()") * @param Request $request * @param Salle|null $salle * @return Response */ public function show(Request $request, Salle $salle=null): Response {（我从这里得到的想法：Apollo, GraphQL, Vue and Nuxt shenanigans）

我遇到很多错误，例如无法使用localStorage。为此，我安装了一个名为npm i nuxt-storage的软件包。

但随后执行split命令：

import '~/plugins/apollo-client'

我收到此错误：const link = split( ({ query }) => { const { kind, operation } = getMainDefinition(query) return kind === 'OperationDefinition' && operation === 'subscription' }, wsLink, httpLink, )

这个问题解决后，恐怕会出现更多错误。

我在做什么错了？

我应该将main.js中拥有的代码放在哪里？

谢谢。

Answer 1

如果您不使用nuxt-apollo，那就更好了。

您得到的错误一定是由于缺少步骤所致。

npm i @nuxtjs/apollo &&
npm install --save @nuxtjs/apollo
# if you are using *.gql or *.graphql files add graphql-tag to your dependencies 
npm install --save graphql-tag

您需要如上所述进行设置，

在nuxt.config.js中：

export default {
  ...
  modules: ['@nuxtjs/apollo'],
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://api.graph.cool/simple/v1/cj1dqiyvqqnmj0113yuqamkuu' //link to your graphql backend.
      }
    }
  }
}

进行查询

在gql/allCars.gql中：

{
  allCars {
    id
    make
    model
    year
  }
}

在组件中使用graphql

在pages/index.vue中：

<script>
import allCars from '~/apollo/queries/allCars'
export default {
  apollo: {
    allCars: {
      prefetch: true,
      query: allCars
    }
  },
  head: {
    title: 'Cars with Apollo'
  }
}
</script>

Nuxt。尝试使用apollo-graphql我遇到了一些Vue并没有出现的错误

1 个答案: