Filtering a GraphQl query or their result

[popeating]

I'm coding a gallery, the code is inside a page, i query in graphql my images (that are in subfolder p/) and return them to the page

const Pportfolio = ({ data }) => {
...
}
export const pquery = graphql`
  query {
    allFile(filter: { relativePath: { regex: "/p//" } }) {
      edges {
        node {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
              originalName
            }
          }
        }
      }
    }
  }
`;

this basically grab all the image and the print them out formatted, everything works as expected; s
my images are named by their category food_01.jpg, food_02.jpg music_01.jpg and so on (about 10 photos x 4 categories)
At the top of the page i have the category list (its statically typed in, don't need to have it dinamically generated for the moment)
but im struggling to filter the list of images; initiallyi was thinking to pass it to the graphql query (hence i used regex to pass things like food, music and so on) and typing it statically it works, but i cant figure out how to dinamically pass it to the query, i tried something like

export const pquery = (graphql`
  query myQuery($regex: String) {
    allFile(filter: { relativePath: { regex: $regex } }) {
      edges {
        node {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
              originalName
            }
          }
        }
      }
    }
  }
`, {regex: {myregex}});

but it is not working (even if passing regex as a string inside the query), to be clear, the query is in a page

my second approch was to filter our result once i got them all, but i'm not able to manage the resulting object
i was thinking something like

data.allFile.edges.map((dd) => {
      if (dd.node.childImageSharp.fluid.originalName === 'music_01.jpg') {
        //add the child in a copy of data object to use later
      }
    });

Any suggestion on how to approach my problem?
Thank you

[herecydev]

You need to pass it in the pageContext and then you will be able to use it in the page queries. Check out https://www.gatsbyjs.com/docs/creating-and-modifying-pages/#pass-context-to-pages

[popeating]

thank you for your reply, im already using the method you are suggesting for ‘blog’ pages that are generated. My scenario at the moment is quiete different, i have atound 50 images in a folder that my query (inside a page not a template) grabs and return, i need to hide/show some of the images on the fly on the page using buttons, i guess the best approach is the get all of them and the rebuild the data object based on the ‘filter’ i don’t probably need to requery again