GatsbyJS - Adding Variables to graphQL

Question

I'm building a dynamic gatsby app where users can log in and see a list of categories, and for each category a list of products. When a user clicks on a category, I want to dynamically render the relevant products through a graphQL query. How I want to do this is through grabbing the category slug from the URL and passing that to a graphQL query, but I keep getting errors when I pass a variable.

I've pasted my query below without a variable. Instead of "Serverless", I want a variable ${slug}.

export const query = graphql`
{ 
    fauna {
        slugMap (slug: "serverless"){
                data{
            name
            companies{
            data{
                name
                website
                description
            }
            }
        }

        }
  }
}
`

Gatsby-node.js

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // Only update the `/app` page.
  if (page.path.match(/^\/map/)) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = "/map/*"
    // Update the page.
    createPage(page)
  }
}

xadm · Accepted Answer · 2020-05-23 21:31:05Z

2

Gatsby queries are used for querying internal state during development or build process - it's not active (not exists) after deploying.

For dynamic querying you need active/live data source - f.e. some graphql server. You can use either graphql client (f.e. apollo) or fetch (POST json graphql requests). This is explained in gatsby dosc - data-fetching

answered May 23, 2020 at 21:31

xadm

8,4463 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user13132197 · Accepted Answer · 2020-05-23 18:50:58Z

1

To do that, you need to change your graphql query to look something like this:

export const query = graphql`
{ 
    query FaunaBySlug($slug: String!) {
        fauna {
            slugMap (slug: {eq: $slug }){
                data {
                    name
                    companies {
                    data {
                        name
                        website
                        description
                    }
                }
            }
        }
    }
}

Then in your gatsby-node you need to pass the slug via context.

  createPage({
    path: 'page/',
    component: template,
    context: {
      slug: category.slug,
    }
 });

answered May 23, 2020 at 18:50

user13132197

4 Comments

lernbr Over a year ago

Thank you! See I'm not using Gatsby-node, I'm using gatsby-plugin-create-client-paths, is it possible to do it that way?

lernbr Over a year ago

Also, could you explain how I'd pass the selected category slug to gatsby-node.js ? Thanks @CodeTisans

user13132197 Over a year ago

@LukeByrne No clue how to do it using client-paths. However, if you wanted to do this using gatsby-node, you'd simply have to fetch the category from GraphQL in the gatsby-node, then pass it to createPage, as shown in my comment. This has to be done on the build-time

lernbr Over a year ago

Thank you! I've updated my question to include my gatsby-node.js as I'm still not sure how/where to implement your suggestions, I'd appreciate any feedback.

Collectives™ on Stack Overflow

GatsbyJS - Adding Variables to graphQL

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related