GraphQL - Gatsby.js - компонент React. - Как делать запросы с переменными / аргументами?

У меня есть компонент 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 для компонента?


person Tim    schedule 08.03.2020    source источник
comment
gatsbyjs.org/docs/data-fetching - содержит ссылку на пример с apollo   -  person xadm    schedule 08.03.2020


Ответы (1)


Эта проблема является известным ограничением useStaticQuery Гэтсби, а не с самим GraphQL.

GraphQL четко определяет способ использования переменных в запросе. Для этого потребуется 3 шага:

  1. Замените статическое значение в query на $variableName
  2. Объявить $variableName как одну из переменных, принимаемых query
  3. Передать variableName: value в отдельный словарь переменных для конкретного транспорта (обычно JSON).

В вашем случае я бы предложил получить аргументы и использовать строковую интерполяцию для создания запроса перед переходом к функции useStaticQuery()

person Aditya Singh    schedule 08.03.2020
comment
Арг ... это, мягко говоря, облом ... Но это сделало бы его крайне негибким. Я смотрел на вашу интерполяцию строк. Вы хотели бы изменить его на строку типа limit: ${args.limit}? Потому что это вызывает у меня ошибку: BabelPluginRemoveGraphQLQueries: String interpolations are not allowed in graphql fragments - person Tim; 08.03.2020