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

Posted 2023-02-22

【中文标题】可以结合 apollo 查询（在 nuxt 内？）

【英文标题】：Possible to combine apollo queries (within nuxt?)

【发布时间】：2019-12-21 10:16:14

【问题描述】：

我正在使用 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

但这首先会引发错误

片段未知类型“根”

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

-

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

提前非常感谢您。 干杯

【参考方案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
        
    

</script>

【讨论】：

确实如此。我也确实找到了那个解决方案，我只是完全忘记了我的问题。

您的意思是将结果挂钩放在条目查询中吗？