GraphQL API responds "Query does not pass validation" for recent changed types

[jancassio (Jan Cássio)]

Hi all,

I created a new title field in a single type that was already published, but I can't fetch using this field in my query.

To test this field, I opened https://my-projec-dev.prismic.io/graphql (sample url), then paste the query and run that without errors there, even the new field was been returned properly with its respective values.

After this test, I ran the exactly same query, in my app, using a custom fetch and I got the following error:

Cannot query field 'action_label' on type 'HomeBodyWorksFields'. (line 20, column 17):
                action_label
                ^
Error: Failed to fetch API

To ensure the fetch is right, I copied the url provided to that and paste in a browser, it opens the graphql explorer with the exact same query, and it works in grapql explorer but not by fetch! Why?!

Here's the fetch solution I'm using:

const url = `${PRISMIC_GQL_ENDPOINT}?query=${encodeURIComponent(query)}&variables=${encodeURIComponent(JSON.stringify({ ...rest, lang }))}`
const res = await fetch(url,
  {
    headers: {
      'Content-Type': 'application/json',
      'Accept-Language': lang,
      'Prismic-Ref': ref ?? PRIMISC_CLIENT_ID,
      Authorization: `Token ${PRISMIC_ACCESS_TOKEN}`,
    },
  }
)

At all, I'm using graphql api to avoid make additional fetch to get details of relationships and I really like to continue using Prismic as CMS. If this doesn't work or been stable enough for production I have to change many of my clients projects to other Headless CMS solution unfortunately.

[Pau]

Hi again!

I'm not sure wha the problem could be, we can try and figure it out together. Could you share with me the URL of your repository along with the query that you're testing with , so that I can do a test on my side?

Thanks!

[Pau]

Update:

Solution shared by @jancassio

I pick all ids of the documents I need, then, I fetch for all those docs and finally I inject it as details in the response structure I need.

Something like this:

const response = await client.query(Prismic.Predicates.at('my.project.uid', uid))

const collabListIndex = response.results[0].data.body.findIndex(
  (slice) => slice.slice_type === 'collab_list'
)
const collabList = response.results[0].data.body[collabListIndex]
const collabIds = collabList.items.map(({ collaborator }) => collaborator.id)

const collaboratorDocs = await client.query(Prismic.Predicates.any('document.id', collabIds))

collabList.items = collabList.items.map(({ collaborator }) => ({
  collaborator: {
    ...collaborator,
    details: collaboratorDocs.results.find(({ id }) => id === collaborator.id),
  },
}))

response.results[0].data.body[collabListIndex] = collabList