可以组合 apollo 查询（在 nuxt 内？）

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 我想知道这是否可能是 apollo 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

但这首先会引发错误

fragment Unknown type "Root"

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

-

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

在此先感谢您。干杯

Answer 1

其实这个问题是有办法解决的。我发现vue-apollo中的result hook解决了这个问题：

有效的示例代码：

<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
        }
    }
}
</script>

可以组合 apollo 查询（在 nuxt 内？）

Possible to combine apollo queries (within nuxt?)

javascript

apollo

vue.js

graphql

nuxt.js