CODEWITHSUNDEEP
javascriptvue.jsgraphqlnuxt.jsapollo
Merc
Merc

Reputation: 4560

Possible to combine apollo queries (within nuxt?)

I am using nuxt and apollo together with: https://github.com/nuxt-community/apollo-module

I have a working GraphQL query (tested in GraphiQL): (Because I want to fetch the info about my page and also some general SEO information)

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

I want to fetch this data as well with apollo in nuxt:

So I tried:

<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
    }
  },
…

If I do that I will get an error message:

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

I then found this issue https://github.com/apollographql/apollo-tooling/issues/648 and I would like to know if ths could be a problem of the apollo nuxt module. Because following that fix indicated in the issue does not resolve anything.

I further tried to combine the two calls into one:

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

But this would first throw an error

fragment Unknown type "Root"

  1. So what is the best way to combine?
  2. Why are the requests failing
  3. is there an option to activate batching like described here: https://blog.apollographql.com/query-batching-in-apollo-63acfd859862

-

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

thank you so much in advance. Cheers

Upvotes: 2

Views: 2366

Answers (1)

Merc
Merc

Reputation: 4560

There is actually a solution to this problem. I found out that the result hook in vue-apollo solves this problem:

Example code that works:

<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>

Upvotes: 1

Related Questions