Question

我正在将nuxt和apollo与https://github.com/nuxt-community/apollo-module

一起使用

我有一个工作的GraphQL查询（在GraphiQL中测试）：（因为我想获取有关我的页面的信息以及一些常规的SEO信息）

{
  entries(section: [pages], slug: "my-page-slug") {
    slug
    title
  }
  seomatic(uri: "/") {
    metaTitleContainer
    metaTagContainer
    metaLinkContainer
    metaScriptContainer
    metaJsonLdContainer
  }
}

我也想在nuxt中使用apollo来获取此数据：

所以我尝试了：

<script>
import page from '~/apollo/queries/page'
import seomatic from '~/apollo/queries/seomatic'

export default {
  apollo: {
    entries: {
      query: page,
      prefetch: ({ route }) => ({ slug: route.params.slug }),
      variables() {
        return { slug: this.$route.params.slug }
      }
    },
    seomatic: {
      query: seomatic,
      prefetch: true
    }
  },
…

如果这样做，我会收到一条错误消息：

GraphQL error: Cannot query field "seomatic" on type "Query".

然后我发现了这个问题 https://github.com/apollographql/apollo-tooling/issues/648 我想知道这是否可能是阿波罗nuxt模块的问题。因为遵循问题中指示的解决方案无法解决任何问题。

我进一步尝试将两个调用合并为一个：

fragment SeoMaticFragment on Root {
  seomatic(uri: "/") {
    metaTitleContainer
    metaTagContainer
    metaLinkContainer
    metaScriptContainer
    metaJsonLdContainer
  }
}

query myQuery($slug: String!) {
  entries(section: [pages], slug: $slug) {
    slug
    title
  }

  SeoMaticFragment
}

~/apollo/queries/page.gql

但这首先会引发错误

片段未知类型“根”

那么最好的组合方式是什么？
为什么请求失败
是否有一个激活批处理的选项，如此处所述：https://blog.apollographql.com/query-batching-in-apollo-63acfd859862

-

const client = new ApolloClient({
 // ... other options ...
 shouldBatch: true,
});

非常感谢您。干杯

Answer 1

实际上有解决此问题的方法。我发现vue-apollo中的result钩解决了这个问题：

有效的示例代码：

    <script>
    import gql from 'graphql-tag'

    const query = gql`
    {
        entries(section: [pages], slug: "my-example-page-slug") {
          slug
          title
        }
        seomatic(uri: "/") {
          metaTitleContainer
          metaTagContainer
          metaLinkContainer
          metaJsonLdContainer
        }
    }
    `

    export default {
    data: () => {
        return {
          page: false,
          seomatic: {}
        }
    },
    apollo: {
        entries: {
        query,
        prefetch: ({ route }) => ({ slug: route.params.slug }),
        variables() {
            return { slug: this.$route.params.slug }
        }
        },
        result(result) {
          this.entries = result.data.entries
          this.seomatic = result.data.seomatic
        }
    },

可以合并阿波罗查询（在nuxt中？）

1 个答案: