GraphQL - Gatsby.js- React component. - How to query with variables/arguments?

Question

I have a React Component that needs to query data. And I want to pass arguments/variables to the query. But I don't know how to do that.

For example. I have this blog item carousel that wants to query an x amount of items and an x amount of offset (skip first x number).

This is roughly what I have right now. But I don't know how to pass the variables inside the GraphQL query

import React from "react"
import {graphql, useStaticQuery} from "gatsby";
import BlockCarousel from "../blockCarousel/blockCarousel";


const BlockCarouselBlog = ({block,data}) => {

  let queryArgs = {
    limit: 10,
    skip: 0
  };
  
  block.blocks = GetBlogItems(queryArgs);

  return (
    <BlockCarousel block={block} data={data} />
  )
};
export default BlockCarouselBlog



const GetBlogItems = (args) => {

    let data = useStaticQuery(graphql`
      query {
        allSanityBlog(
          sort: { fields: [_createdAt], order: DESC }
          limit: 10 // this needs the variable
          skip: 0 // this needs the variable
        ) {
          ... rest of the data
        }


      }
    `)

    if (data.allSanityBlog.edges)
      return data.allSanityBlog.edges

    return null;
  }

The Question

How can I pass arguments into a Gatsby GraphQL query for a component?

gatsbyjs.org/docs/data-fetching - contains link to example with apollo — xadm
– xadm, Commented Mar 8, 2020 at 13:59

Aditya Singh · Accepted Answer · 2020-03-08 11:40:06Z

1

This problem is a Known limitation of Gatsby's useStaticQuery and not with GraphQL itself.

GraphQL clearly defines a way to use variables in a query. This require below 3 steps:

Replace the static value in the query with $variableName
Declare $variableName as one of the variables accepted by the query
Pass variableName: value in the separate, transport-specific (usually JSON) variables dictionary

In your case I would suggest to get the arguments and use string interpolation to create the query before passing to useStaticQuery() function

answered Mar 8, 2020 at 11:40

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

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

1 Comment

Tim Over a year ago

Arg... that's, slightly put, a bummer... But that would make it extremely inflexible. I was looking at your string interpolation. Would you mean changing it to a line like limit: ${args.limit} ? Because this throws me an error: BabelPluginRemoveGraphQLQueries: String interpolations are not allowed in graphql fragments

Collectives™ on Stack Overflow

GraphQL - Gatsby.js- React component. - How to query with variables/arguments?

The Question

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The Question

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related