Incorporating nuxt and apollo together using the https://github.com/nuxt-community/apollo-module module has been a successful venture.
A GraphQL query was crafted and tested in GraphiQL to obtain information about a specific page along with general SEO details:
{
entries(section: [pages], slug: "my-page-slug") {
slug
title
}
seomatic(uri: "/") {
metaTitleContainer
metaTagContainer
metaLinkContainer
metaScriptContainer
metaJsonLdContainer
}
}
The goal was to retrieve this data using apollo in nuxt:
Initial attempts were made as per the following:
<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
}
},
…
However, the execution raised an error:
GraphQL error: Cannot query field "seomatic" on type "Query".
Subsequently, an issue was discovered at: https://github.com/apollographql/apollo-tooling/issues/648 which questioned if this could be attributed to the apollo nuxt module. Implementing the suggested fix did not rectify the situation.
An attempt was made to consolidate the two calls into a single query:
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
This approach initially encountered an error:
fragment Unknown type "Root"
- What is the optimal method to combine these queries?
- Why are the requests failing?
- Is there a way to enable batching as detailed here:
-
const client = new ApolloClient({
// ... other options ...
shouldBatch: true,
});
Your insights and assistance on this matter are greatly appreciated.