Getting 'Field "page" must not have a selection since type "JSON" has no subfields.' when try to retrieve properties from a reference with GraphQL

Technical Questions
,
1

I have the following two models:

Top Navigation Model
Properties:
Title - Text
Page - Reference

Page model
Properties:
Title - Text
Description - Long text

What I would like to do is get the Top Navigation Model with only the Title from the page reference (I don’t need the description). So I am trying with the following GraphQL query:

query {
  topNavigation(options: {includeRefs: true}) {
    data {
      title
      page {
        data {
          title
        }
      }
    }
  }
}

But I am getting an error message ‘Field “page” must not have a selection since type “JSON” has no subfields.’

So my question is - how to retrieve only one field from my page model, when it is parsing it as JSON, before I can make the selection?

2

Hey @vpvladimirov , querying the reference data is not possible in GraphQL. Since GraphQL treats JSON fields as a single object without directly accessible subfields, you’ll need to handle the filtering on the client side.

Here’s what you can do:

  1. Update the Query: Query the entire page field without selecting subfields.

    query {
  topNavigation{
 data {
   title
   page 
   }
  }
}

  2. Filter the Response on the Client Side: Once you receive the page field in your response as JSON, extract the title field programmatically in your application code.

    Here’s an example in JavaScript:

    const fetchBuilderContent = async () => {
  const response = await fetch('https://graphql.builder.io/api/v1/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_PUBLIC_API_KEY' // Replace with your API Key
    },
    body: JSON.stringify({
      query: `
        query {
          topNavigation {
            data {
                title
            }
          }
        }
      `
    })
  });

  const data = await response.json();

  // Extract the title from page if it exists
  const results = data.data.topNavigation.map(item => ({
    name: item.data.name,
    title: item.data.page?.title
  }));

  console.log(results);
};

fetchBuilderContent();

This approach retrieves the entire page JSON object and then extracts only the title property on the client side. This solution works around the limitation of accessing JSON subfields directly in GraphQL.