Ошибка запроса GraphQL - неизвестный аргумент 'slug'

Question

Я пытаюсь связать свою страницу index.js с шаблоном статьи для отображения данных с сайта промежуточного ПО Drupal, используя slug и createPages.У меня правильно отображаются данные на моей странице index.js, и у моего createPages, похоже, нет ошибок после изменения пути к файлу на ./src/templates/article.js.

Я сталкиваюсь с этой ошибкой GraphQL при компиляции:

error GraphQL Error Произошла ошибка при компиляции запросов GraphQL вашего сайта.Ошибка: RelayParser: Обнаружены 1 ошибка (и): - Неизвестный аргумент 'slug'.Источник: документ usersBrooksrelytHtdocsRepositoryGatsbyGraphqlGatsbySrcTemplatesArticleJs4119530598 файл: GraphQL request

  GraphQL request (3:12)
  2:   query($slug: String!) {
  3:     umdHub(slug: { eq: $slug }) {
                ^
  4:       articles {

Мой код article.js:

import React from 'react'
import { graphql } from 'gatsby'
import { ListGroup, ListGroupItem } from 'reactstrap';

// eslint-disable-next-line
import Layout from "../components/layout"
import Header from "../components/header"
import Footer from "../components/footer"


export default ({ data }) => {
  return (
    <div>
      <Header />
      <div className="container spaces article">
        <div className="row">
          <section className="col-md-9">
            <div className="tag-list">
              <ul class="list-inline">
                <li class="list-inline-item"><a href="/">Highlighted</a></li>
                <li class="list-inline-item"><a href="/">Innovation</a></li>
                <li class="list-inline-item"><a href="/">Web Only</a></li>
                <li class="list-inline-item">February 28, 2019</li>
              </ul>
            </div>
            <h1>{data.title}</h1>
            {data.hero_image.map((hero, i) => (
              <div key={i}>
                <img className="img-fluid no-pad-top med-spaces" src={hero.url_1200_630} alt=" " />
              </div>
            ))}
            <div className="row article-content">
              <div className="col-md-10 offset-md-1">
                <h2 className="subheader">{data.subtitle}</h2>
                <div className="author"> 
                  <p>By <a href="/">Jane Doe</a> | Photos by <a href="/">ISTOCK</a></p>
                  <hr />
                </div>
                <div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
              </div>
            </div>
          </section>
          <aside className="col-md-3">
            <div>
              <ListGroup flush>
                <ListGroupItem disabled tag="a" href="#">Recent Posts</ListGroupItem>
                <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
                <span>February 27, 2019</span>
                <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
                <span>February 27, 2019</span>
                <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
                <span>February 27, 2019</span>
                <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
                <span>February 27, 2019</span>
              </ListGroup>
            </div>
          </aside>
        </div>
      </div>


      <Footer />
    </div>

  )
}


export const query = graphql`
  query($slug: String!) {
    umdHub(slug: { eq: $slug }) {
      articles {
        data {
          id
          title
          subtitle
          body
          summary
          hero_image {
            url_1200_630
          }
          authorship_date {
            formatted_short
            unix
            unix_int
            formatted_long
            formatted_short
            time
          }
          slug
        }
      }
    }
  }
`

Мой gatsby-node.js:

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  const articleTemplate = path.resolve(`./src/templates/article.js`)
  return graphql(`
    {
        umdHub {
          articles {
            data {
              id
              title
              subtitle
              body
              summary
              hero_image {
                url_1200_630
              }
              authorship_date {
                formatted_short
                unix
                unix_int
                formatted_long
                formatted_short
                time
              }
              slug
            }
          }
        }
      }
  `).then(result => {
    if (result.errors) {
      throw result.errors
    }

    result.data.umdHub.articles.data.forEach(data => {
      createPage({
        path: `${data.slug}`,
        component: articleTemplate,
        context: {

        },
      })
    })
  })
}

Answer 1

Ярлык для filter работает только в поле непосредственного узла, т. Е. Вы можете фильтровать umdHub по articles. Поэтому, когда вы фильтруете по слагу, он ищет поле slug в umdHub, которого не существует, потому что слаг имеет значение umdHub.articles.data.

Это может помочь:

export const query = graphql`
  query($slug: String!) {

-   umdHub(slug: { eq: $slug }) {
+   umdHub(articles: { data: { slug: { eq: $slug } } }) {

      articles {
        data {
          slug
        }
      }
    }
  }