I need help with graphQuery use

Developing with Prismic
, ,
1

Hello to all,

I'm coming to you because I'm stuck with my requests to Prismic in my NextJS application.
I have a main request that calls my custom type homepage which contains all the slices on the page.

For the example I'm going to base it on the blog slice:
This slice contains static information that I can retrieve.

However, I have custom posts of type post inside this slice that appear in items but do not contain the post information (see below), post also contains a custom type cta.

I realized that I needed to use graphQuery to access the contents of post and cta.

The hierarchy of this part of the content giving :
blog ( slice ) => post ( content relationship, repeatable, custom type ) => cta ( content relationship, custom type )

For a better readability and less code I took only the query that retrieves my custom type post and must also retrieve the custom type cta inside

Note: My request works in the Prismic dashboard by testing it in: my-repo/graphql

I currently have this result:

{
    "id": "ZDQmzhAAACIADPKP",
    "type": "cta",
    "tags": [],
    "lang": "fr-fr",
    "slug": "discover-our-pms",
    "first_publication_date": "2023-04-10T15:10:14+0000",
    "last_publication_date": "2023-04-12T14:19:16+0000",
    "uid": "management",
    "link_type": "Document",
    "isBroken": false
}

I have this query currently:

export async function getStaticProps({ previewData }: GetStaticPropsContext) {
	const client = createClient({ previewData });

	// Query page
	const page = await client.getSingle("homepage");
	const posts = await client.getAllByType("post", {
		graphQuery: `{
		allPosts {
			edges {
				node {
					image
					icon
					title
					body
					list
					cta {
						... on Cta {
							text
							url {
								_linkType
							}
						}
					}
				}
			}
		}
	}
	`,
	});

	return {
		props: {
			page,
			posts,
		},
	};
}

Thank you very much for your help

2

Hey there.

You're seeing this error because you're using GraphQL instead of the GraphQuery syntax that you can use with REST queries.

Graphql is a query language for APIs and on the other hand, GraphQuery is a Prismic-specific query syntax that is used to fetch data from your repository's API. GraphQuery is similar to Graphql in that it allows you to retrieve specific data from the API but has syntax and functionality differences.

Here's a quick example of a GraphQuery:

graphQuery={
  post {
    cta {
      ...on cta {
        .text
      }
    }
  }
}

Check out the full documentation:

4

Thanks a lot, indeed I confused graphql and graphquery.
Now it works much better

1 Like