Closed DanStockham closed 6 years ago
gatsby-source-contentful
exposes GraphQL fragments so you can use Contentful Images API easily with gatsby-image
. It’s briefly documented here.
Example in your case:
export const nextEventQuery = graphql`
query nextEventQuery {
allContentfulShow (
limit: 1
sort: { fields: [date], order:DESC }
) {
edges {
node {
name
date
slug
coverPrice
image {
sizes(maxWidth: 1280) {
...GatsbyContentfulSizes
}
}
}
}
}
}
`
const sizes = data.allContentfulShow.edges[0].node.image.sizes
<Img sizes={sizes} />
@ryanditjia I kinda get it now. I tried setting up a query similar to what you have on gatsby-node
to pull in my paginated shows however, I get an error stating the fragment doesn't exist:
GraphQLError: Unknown fragment "GatsbyContentfulResolutions"
I apologize if the fix for this is known. I'm not very familiar with graphql
Try moving the query into the page component.
If you’re getting the error inside GraphiQL, that’s because the fragment doesn’t work with it.
Feel free to ask if you still have more questions with GraphQL, it’s a lot of fun once you get the hang of it.
Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!
Summary
I've been looking at some ways to optimize the site I am building and came across the plugin
gatsby-image
It looks handy however, I'm little stumped as to how to implement it. I have two components that I want to use
gatsby-image
on: Upcoming event list, and Event Detail template.The event detail template is pulling data down from Contentful to populate the detail page. This is where I am getting stumped. The way I understand graphql requires you to be specific in your query. How can I both do a query for my contentful data and do the image optimization? This is the same case for the upcoming events, except the query is done on the layout.
Relevant information
EventDetail.js
UpcomingEvents.js
Layout.js