Clarification on typing data returned from GraphQuery

Developing with Prismic
,
1

Hi all,

I've been slowly converting a NextJS application to Typescript, and came across something I wasn't sure how to type properly.

While using the GraphQuery option, I'm trying to select only specific properties on my custom type. How can I reflect this in the type I return?

For instance in this query:

const posts = await client.getAllByType("blog_post", {
		graphQuery: `
			{
				blog_post{
					thumbnail_icon
					session_thumbnail
					blog_title
				}
			}
		`
	});

How would you ensure that only those three properties are available to the page?

I've read through the docs for NextJS and Typescript, and it looks like the Content Relationship section has something similar to what I'm after but not quite.

I know this is more of a Typescript question than a Prismic question, but maybe there's some type of helper in Prismic that I'm unaware of!

Thanks for the help!

2

Hey @crcollver, here's a similar topic that maybe answers your question. If you are using prismic-ts-codegen to generate types it's not supporting fetchLinks/GraphQuery yet, so I think you need to manually write the types.

4

Hi @Pau, that post does help. I will probably use that approach instead of the one I linked, simply because it gives me a bit better intellisense when picking the fields I need. However, I feel like I would prefer to have the type declaration a bit closer to where I'm fetching the data.

Unfortunately, I'm a bit stumped on how to apply that to fields that are not content relationships in as clean of way as the isFilled.contentRelationship function. In my original example, the thumbnail icon, session_thumbnail, and blog_title fields are being queried because I'm trying to limit the data I get back to only what I need for the page. So, I'm looking for some sort of way to maintain the original type generated by prismic-ts-codegen, but just limit the fields that are on the data property. I think it mostly comes down to my own newness with Typescript!

I will continue experimenting, and post back if I come up with something that satisfies that.

Thank you for the help!

1 Like