Help with accessing fields from a group of linked documents with the GraphQuery API

Developing with Prismic
1

Hi there, hoping someone can help with a quick question! :star:

I am using the GraphQuery API to access the data in my repo which works brilliantly, however there is one piece of data that I can't seem to access. It is a group of linked documents, in my content model the JSON looks like this, with the readers group clearly defined with customtypes applied.

{
  "Main" : {
    "uid" : {
      "type" : "UID",
      "config" : {
        "label" : "uid",
        "placeholder" : "00"
      }

    ...

    "readers" : {
      "type" : "Group",
      "config" : {
        "fields" : {
          "reader" : {
            "type" : "Link",
            "config" : {
              "select" : "document",
              "customtypes" : [ "reader" ],
              "label" : "Reader"
            }
          }
        },
        "label" : "Readers"
      }
    },

    ...

  }
}

And below is the Prismic GraphQuery I am using to access the name field. While it doesn't crash or exit with a 500 response it also doesn't return the appropriate data (the name field)! I'm hoping someone is able to help with this as I feel I've really wrestled with the docs to find an answer! :pray:

const readingsGraphQuery = `{
  readings {
    reading {
      ...on reading {
        readers {
          reader {
            ...on reader {
              ...readerFields
              name
            }
          }
        }
      }
    }
  }
}`;
2

Hey @idealpress welcome to the community!

I'll be happy to help you with this. Could you please share with us the following info so we can run a test on our end?

  • The URL of your repository
  • The complete GraphQuery. I see that the object of the query starts from the Group fields API ID. There seems to be something missing at the beginning, that would be the name of the Custom Type. For example: { blog { } }
4

Hi @Pau, thank you so much for getting back to me so quickly!

The URL is: https://hi-zero.prismic.io/api/v2

I'm using next.js as a framework so the complete query is:

export async function getStaticProps() {
  const readings =
    (await Client().query(Prismic.Predicates.at("document.type", "reading"), {
      graphQuery: readingsGraphQuery,
      orderings: "[my.reading.uid]",
      pageSize: 100,
    })) || {};
  return {
    props: {
      readings,
    },
  };
}

Please let me know if you need anything else for troubleshooting :slightly_smiling_face:

5

Hi @Pau – reading back over your response I'm not sure what you mean by:

...the object of the query starts from the Group fields API ID.

In the request I am trying to get multiple entries for the custom type reading, so I am using readings at the beginning of the GraphQuery.

6

Hey Jack. I've tested GraphQuery in your endpoint. This is the syntax you need to retrieve the name field from the reader's document:

{
  reading {
    readers {
      reader {
        ... on reader {
          name
        }
      }
    }
  }
}

Let me know if it works

7

Hi Pau, thanks so much for this!

I've given it a go and I don't seem to be able to get the name field still though :frowning_face:

I'm now using:

const readingsGraphQuery = `{
  readings {
    reading {
      readers {
        reader {
          ... on reader {
            name
          }
        }
      }
    }
  }
}`;

...which doesn't seem to give me a data property on individual readers (which would contain the name). If I swap it out for exactly what you have above, it doesn't seem to work at all? Is there something I'm missing from the syntax? Also to clarify, I'm trying to use this to retrieve all (>100) of the readings, not a single one (which is why I think the readings is necessary?)

8

Yes, the syntax is important because you need to use spaces instead of tabs when writing the query to avoid errors.

The query that I shared with you works, let me show you how to test it out in the API browser of your repository: https://hi-zero.prismic.io/api/v2

You need to click on Search documents first, and then you can start testing your GraphQueries. For example, to create the query that I showed you before (This one is returning the reading documents with the name field of the linked docs that you need. But please note that GraphQl will return only 20 results. You can allow up to 100 documents per page by using pagination) I used this tool to remove the whitespaces of the query and then used an encoder to paste it in the &graphQuery= param of the URL:

https://hi-zero.prismic.io/api/v2/documents/search?ref=YTH2_xEAACsABSMk&graphQuery=%7B%0A%20%20reading%20%7B%0A%20%20%20%20readers%20%7B%0A%20%20%20%20%20%20reader%20%7B%0A%20%20%20%20%20%20%20%20...%20on%20reader%20%7B%0A%20%20%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D#format=json
11

I still cannot resolve my query, I think it must be something to do with the way I am implementing the JS library – would it be possible to discuss this further?

13

Hello @idealpress, of course.

The first thing you can do is test the query in your endpoint's API browser.

18

This thread has been closed due to inactivity. Flag to reopen.