1

Can static query using filter?

im using strapi as my config server

i will gather the config data on build time

And i have a component which need to query the config data by user data (e.g user group)

however it seem gatsby not allow me to pass any var to the query or even hard code the query with the param

e.g

graphql`
query MyQuery {
  allStrapiAvailableLanguageByMarkets(filter: {country: {code: {eq: "CA"}}}) {
    nodes {
      country {
        code
      }
      languages {
        code
        name
      }
    }
  }
}`

1 Answer 1

2

StaticQuery has it's own limitations (that's why it's are called static) and they do not allow any dynamic parameter. As it shows Gatsby documention:

How StaticQuery differs from page query

StaticQuery can do most of the things that page query can, including fragments. The main differences are:

  • page queries can accept variables (via pageContext) but can only be added to page components
  • StaticQuery does not accept variables (hence the name “static”), but can be used in any component, including pages
  • StaticQuery does not work with raw React.createElement calls; please use JSX, e.g.

Of course, you can filter using a hardcoded value, this is actually the only solution available for you can't filter using a dynamic value.

Check your localhost:8000/___graphql playground to see if your query works (it should). Usually chained values in GraphQL must be filtered using filter: { country__code: { eq:"CA" }}

Ideally, your useStaticQuery hook file should look like:

import { graphql, useStaticQuery } from 'gatsby';

export const useYourItems = () => {
  const yourItems  = useStaticQuery(
    graphql`
        query MyQuery {
            allStrapiAvailableLanguageByMarkets(filter: {country: {code: {eq: "CA"}}}) {
                nodes {
                    country {
                        code
                    }
                    languages {
                        code
                        name
                    }
                }
            }
        }`,
  );

  return yourItems.allStrapiAvailableLanguageByMarkets;
};

Then, in another component:

  const yourItems = useYourItems();
Sign up to request clarification or add additional context in comments.

13 Comments

Thx for the reply, i have read this too, but turn on it doesnt allow filter... even hardcode
Does your query works in the playground (localhost:8000/___graphql)? You can add automatically filters there. Did you checked filter: { country__code: { eq:"CA" }}?
it work in playground, but if use this static query in reactjs component -> it said × Error: The result of this StaticQuery could not be fetched. This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in github.com/gatsbyjs/gatsby/issues
You can reuse your useStaticQuery of course. I've provided an example using your query.
It's not a nested function so it won't break the rule. If you look at the usage of useStaticQuery by Gatsby's official documentation they provide a similar usage. In the end, a hook is a function. In addition, it allows you to reuse it as many times as you wish in different components. Try it and let me know.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.