javascript - 可以组合 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"

1. 那么最好的结合方式是什么？
2. 为什么请求失败
3. 是否有激活批处理的选项，如下所述: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>