reactjs - GraphQL - Gatsby.js- React 组件。 - 如何查询变量/参数？

Question

我有一个需要查询数据的 React 组件。我想将参数/变量传递给查询。但我不知道该怎么做。

例如。我有这个博客项目轮播，它想要查询 x 数量的项目和 x 数量的偏移量(跳过第一个 x 数字)。

这就是我现在的大致情况。但是我不知道如何在 GraphQL 查询中传递变量

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;
  }

问题

如何将参数传递给组件的 Gatsby GraphQL 查询？

Answer 1

这个问题是Known limitation of Gatsby's useStaticQuery而不是 GraphQL 本身。

GraphQL clearly defines a way to use variables in a query .这需要以下 3 个步骤:

1. 将查询中的静态值替换为$variableName
2. 将$variableName声明为query接受的变量之一
3. 在单独的、特定于传输的(通常是 JSON)变量字典中传递 variableName: value

在您的情况下，我建议在传递给 useStaticQuery() 函数之前获取参数并使用字符串插值来创建查询