How to remove GraphQL fields according to other fields, in Gatsby?

Question

I have a page query that returns a video playlist. Some videos have 'public' set to true, some false. For the videos that have their public field set to false, I do not want to include the URL of that video in the payload that Gatsby sends to the page because access to those videos is paid for.

Example:

export const query = graphql`
    query MyQuery {
        courses: allSanityCourses {
            nodes {
                price
                name
                playlist {
                    title
                    url
                    public
                }
            }
        }
    }
`

And the data it returns:

[
    {
        "price": 149,
        "name": "Master VS Code",
        "playlist": [
            {
                "title": "Intro",
                "url": "https://youtu.be/qwertyuiop",
                "public": true
            },
            {
                "title": "Principles Part 1",
                "url": "https://youtu.be/poiuytrewq",
                "public": false
            }
        ]
    }
]

How can I prevent Gatsby from sending the second URL (which has public set to false) to the page?

I'm not sure Query Filters work as they seem to only allow filtering/removing fields based on the content of those same fields. What I need is to filter/remove the URL field based on another sibling field "public".

score 1 · Answer 1 · answered Aug 13 '21 at 05:02

1

I think you are looking for:

export const query = graphql`
    query MyQuery {
        courses: allSanityCourses(
        filter: {
          playlist: {
            public: { eq: true }
          }
        },
        ){
            nodes {
                price
                name
                playlist {
                    title
                    url
                    public
                }
            }
        }
    }
`

The filter filter (quite redundant) and the eq (equals) option should do the trick for you. Check it in the localhost:8000/___graphql playground the tweak/refine it if needed.

You can check for further filters in https://www.gatsbyjs.com/docs/query-filters/

answered Aug 13 '21 at 05:02

Ferran Buireu

28,630
6
39
67

I tried it with query MyQuery { courses: allSanityCourses( filter: { playlist: { elemMatch: { public: { eq: true} } } }, ){ nodes { price title playlist { title url public } } } } and it still returns all the playlist elements, public: false included. – André Casal Aug 13 '21 at 14:29
I solved it [here](https://stackoverflow.com/questions/68733466/how-to-create-custom-resolvers-for-gatsby-page-queries/68734000#68734000), but if I can do this with GraphQL itself, it would be better. – André Casal Aug 13 '21 at 14:30
Have you tried mine? (eq instead of elemMatch) – Ferran Buireu Aug 13 '21 at 15:14
Yeah, sorry I forgot to tell you it resulted in an error: Field "public" is not defined by type "SanityVideoFilterListInput". – André Casal Aug 13 '21 at 17:18
Then you are not filtering for the `allSanityCourses` node – Ferran Buireu Aug 14 '21 at 11:24

How to remove GraphQL fields according to other fields, in Gatsby?

1 Answers1