Selecting which extendedGallery gets displayed on the homepage
jpvalery opened this issue · comments
I'd like to select which extendedGallery gets displayed on the homepage.
Either through selecting them or by excluding the ones with a certain tag.
I'm guessing I'd have to adapt the graphql query but I don't know where to start or how to phrase it.
allContentfulExtendedGallery(
limit: 20
sort: { fields: [publishDate], order: DESC }
filter: { tag: { eq: 'homePage' } } <--------- This here
) {
edges {
node {
title
id
slug
year
tags {
title
id
slug
}
publishDate(formatString: "DD MMM YYYY h:mm a")
heroImage {
title
fluid(maxWidth: 1000) {
...GatsbyContentfulFluid_withWebp
}
}
body {
childMarkdownRemark {
excerpt(pruneLength: 140)
}
}
}
}
}
What about a tag filter?
Yeah, the above should work. If you put the homepage tag only on the galleries that you want to display, then filter for that tag, the others should be hidden.
You'll want to add it to your homepage graphql query.
Try adding filter: { tag: { eq: 'homePage' } } after line 47 on the index page.
🤦♂️ the code you put in #6 (comment) wasn't showing properly when I was checking on my phone.
I made a branch for this https://github.com/jpvalery/portfolio/tree/homepage-filter
Instead of adding a tag Homepage which would be polluting the homepage, I tried selecting the two tags that would always be on the homepage:
filter: { tag: { in: ["Series","Project"]} }
which didn't work (I probably wrote that wrong).
This led me to think I could add a boolean on the ExtendedGallery model with would be
DisplayHome : True/False
and filter based on that condition (?) as it would be easier to manage (?)
I was getting a build error with your suggestion :
6:42:22 PM: error GraphQL Error Field "eq" is not defined by type contentfulExtendedGalleryConnectionTagsQueryList_2.
6:42:22 PM: file: /opt/build/repo/src/pages/index.js
6:42:22 PM: 1 |
6:42:22 PM: 2 | query Index {
6:42:22 PM: 3 | allContentfulExtendedGallery(
6:42:22 PM: 4 | limit: 20
6:42:22 PM: 5 | sort: { fields: [publishDate], order: DESC }
6:42:22 PM: > 6 | filter: { tags: { eq: "Series" } }
6:42:22 PM: | ^
6:42:22 PM: 7 | ) {
6:42:22 PM: 8 | edges {
6:42:22 PM: 9 | node {
6:42:22 PM: 10 | title
6:42:22 PM: 11 | id
6:42:22 PM: 12 | slug
6:42:22 PM: 13 | year
6:42:22 PM: 14 | tags {
6:42:22 PM: 15 | title
6:42:22 PM: 16 | id
Removing eq doesn't work either
6:47:35 PM: error GraphQL Error Expected type contentfulExtendedGalleryConnectionTagsQueryList_2, found "Series".
6:47:35 PM: file: /opt/build/repo/src/pages/index.js
6:47:35 PM: 1 |
6:47:35 PM: 2 | query Index {
6:47:35 PM: 3 | allContentfulExtendedGallery(
6:47:35 PM: 4 | limit: 20
6:47:35 PM: 5 | sort: { fields: [publishDate], order: DESC }
6:47:35 PM: > 6 | filter: { tags: "Series" }
6:47:35 PM: | ^
6:47:35 PM: 7 | ) {
6:47:35 PM: 8 | edges {
6:47:35 PM: 9 | node {
6:47:35 PM: 10 | title
6:47:35 PM: 11 | id
6:47:35 PM: 12 | slug
6:47:35 PM: 13 | year
6:47:35 PM: 14 | tags {
6:47:35 PM: 15 | title
6:47:35 PM: 16 | id
Tried with https://www.contentful.com/developers/docs/references/graphql/#/reference/collection-filters where (if I understood correctly) filter without operator means equals but it didn't work.
Trying to understand the first error with eq, I tried something else but it didn't work either:
7:02:22 PM: error GraphQL Error Field "name" is not defined by type contentfulExtendedGalleryConnectionTagsQueryList_2.
7:02:22 PM: file: /opt/build/repo/src/pages/index.js
7:02:22 PM: 1 |
7:02:22 PM: 2 | query Index {
7:02:22 PM: 3 | allContentfulExtendedGallery(
7:02:22 PM: 4 | limit: 20
7:02:22 PM: 5 | sort: { fields: [publishDate], order: DESC }
7:02:22 PM: > 6 | filter: { tags: { name: "Series"} }
7:02:22 PM: | ^
7:02:22 PM: 7 | ) {
7:02:22 PM: 8 | edges {
7:02:22 PM: 9 | node {
7:02:22 PM: 10 | title
7:02:22 PM: 11 | id
7:02:22 PM: 12 | slug
7:02:22 PM: 13 | year
7:02:22 PM: 14 | tags {
7:02:22 PM: 15 | title
7:02:22 PM: 16 | id
I probably messed that up completely all by myself with my limited knowledge and understanding of graphql 😅
Aaaaaand I reach the point where I'm definitely outranked by the problem :|
Let me know your thoughts and if you agree that a boolean DisplayHome would be an interesting solution ✌️
Hey, not sure I follow your earlier comment.
Instead of adding a tag Homepage which would be polluting the homepage,
I tried selecting the two tags that would always be on the homepage
If you already are using tags, how would an extra tag pollute the homepage?
https://github.com/jpvalery/portfolio/blob/homepage-filter/src/pages/index.js
allContentfulExtendedGallery(
limit: 20
sort: { fields: [publishDate], order: DESC }
filter: { tags: { name: "Series"} }
) {
edges {
node {
title
id
slug
year
tags {
title
id
slug
}
At first glance, I think the filter is malformed? I don't see a name field for your tags. Does it work if you use filter: { tags: {title: {eq: 'Series'} } }?
I do think the boolean would be an interesting solution. Emphasis on interesting. I'm not sure I see the appeal of building new functionality over something like extending the existing tag scheme(you don't need to display the tags just because you're filtering on them).
Try dumping your entire query into the GraphQL explorer: localhost:8000/___graphql
Then you can try manipulating the filter until content comes through.
Also, I would recommend checking out the Gatsby documentation for GraphQL references, like filtering: https://www.gatsbyjs.org/docs/graphql-reference/#filter
Sorry if this was unclear. I meant that I'd not want to have a tag "Homepage" being displayed on the homepage. I didn't know/think I could exclude it from being displayed... Hence, adding a boolean seemed like an interesting path to explore.
Thanks for the documentation link. I see I was consulting the wrong one...
filter: { tags: {title: {eq: 'Series'} } } returned the same error as earlier (about " instead of ').
And filter: { tags: {title: {eq: "Series"} } } returned 7:47:59 PM: error GraphQL Error Field "title" is not defined by type contentfulExtendedGalleryConnectionTagsQueryList_2..
I must confess that I'm confused right now 😅 Let me know if I missed something or if I made another mistake
I'm currently trying to build locally and play with the GraphQL explorer.
But, at this point, I don't know if I should keep trying to make the tags filter work or try the boolean as it'd seem the filter would be easier like filter: { DisplayHome: {eq: true}} 🤔
And thanks again for all the help! Really appreciate it man.
FYI, here's what I get when I run the query locally:
Yet if I remove the filter:
(which seem to show that tags have title
Yet again, if I try filtering only on the node title, it works
Which lead me to think that I could filter on the ExtendedGallery name then:
It's not pretty and definitely not as easy as just putting a tag or a boolean but it works? /shrug
[sorry for spamming your notifications]
I gave the boolean a try and it worked from the first try.
I'll go ahead and deploy that then ^^ Thanks for all the help
Confirming this is working live in production 🙌
https://jpvalery.photo/americana isn't displayed on the homepage as it's an ExtendedGallery with displayHome set to false.
Cool, glad the Boolean worked. Sorry the tag didn’t!