Graphql error on subfields with graphql-yoga

Question

I'm trying to query a graphql API via a proxy of another graphql API and am receiving an error. I'm using graphql yoga for my server and connecting to another graphql API from a CMS. Here is my code:

server.js

const { GraphQLServer } = require('graphql-yoga');
const Prismic = require('./prismic.config.js');
const gql = require('graphql-tag');

const typeDefs = `
  type Query {
    page(lang: String, uid: String): Page
  }

  type Page {
    page_title: [TextField]
  }

  type TextField {
    text: String
  }
`

const resolvers = {
  Query: {
    page: (parent, args, context, info) => {
      const query = gql`${context.request.body.query}`;

      const result = context.Prismic.query({
        query,
        variables: { ...args }
      })
      .then(resp => {
        return resp.data.page;
      })
      .catch(err => console.log(err));
      return result;
    }
  }
}

const server = new GraphQLServer({ 
  typeDefs, 
  resolvers,
  context: req => ({ ...req, Prismic })
})

server.start(() => console.log('Server is running on localhost:4000'))

Here is my query below from graphql playground that comes with Graphql Yoga:

query {
  page(lang: "en-gb", uid: "homepage") {
    page_title {
      text
    }
  }
}

The error i'm receiving is:

'Query does not pass validation. Violations:\n\nField \'page_title\' of type \'Json\' must not have a sub selection. (line 3, column 5):\n page_title {\n ^' } },

The strange thing is I can get a valid response if I hardcode the query without the nested text field as the error suggests on the server like so:

// const query = gql`${context.request.body.query}`;

const query = gql`
      query($uid: String!) {
        page(lang: "en-gb", uid: $uid) {
          page_title
        }
      }
    `;

Attempting to modify my query in graphql playground to not include the nested text field like so:

query {
  page(lang: "en-gb", uid: "homepage") {
    page_title
  }
}

Gives my the following error and does not allow me to make the request at all:

field "page_title" of type "[TextField]" must have a selection of subfields. Did you mean "page_title { ... }"?

The error suggests that I need to add the nested subfield of text which is intended but when I use this query instead of the hardcoded one on the server it gives me the error mentioned before.

Not sure if i've gone wrong somewhere in my setup?

Thanks

I feel like this is related to the resolver. I will try some stuff out later myself. — Jacob, Dec 10 '18 at 07:08
Try changing the typeDef `type Query { page(lang: String, uid: String): Page }` `type findPage { page(lang: String, uid: String): Page }` — Jacob, Dec 10 '18 at 07:12

Yevhenii Herasymchuk · Answer 1 · 2018-12-12T13:24:15.457

In your GraphQL schema page_title: [TextField] is not one of the Scalar Types

As a result, during making a query you need to define what exactly fields you need to fetch? And your fields in the query should be expanded to the level of having only scalar types, so GraphQL will know how to resolve your query.

So this is the only query that should be from the first level (from graphql playground that comes with Graphql Yoga) :

query {
  page(lang: "en-gb", uid: "homepage") {
    page_title {
     text
    }
  }
}

But the error from the server throws from your approach to make graphql query inside graphql resolver:

const result = context.Prismic.query({
      query,
      variables: { ...args }
   })

So I'm 100% sure that the page_title in Prismic has the custom scalar - JSON. As a result, you can't use the same query for this request.

Graphql error on subfields with graphql-yoga

server.js

1 Answers1