GraphQL 仅返回 Gatsby 站点上的第一个节点

Question

我正在使用gatsby-source-mysql 从内部工具中提取一些数据，我们的用户可以在该工具中创建可以在我们的消费者网站上显示的广告。我目前为测试设置了四个促销，这是我必须提取数据的 GraphQL 查询：

query PromoQuery($id: String) {
    allMysqlPromos(filter: { id: { eq: $id } }) {
      edges {
        node {
          ad_title
          ad_filename
          ad_body
          URL_ext
          phone
          id
        }
      }
    }
  }

这就是返回的内容。它正在获得所有四个促销，这正是我所需要的。

{
  "data": {
    "allMysqlPromos": {
      "edges": [
        {
          "node": {
            "ad_title": "Buy One, Get One Free",
            "ad_filename": "ad_002910.jpg",
            "ad_body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis quam venenatis porta sed. Aliquet eget lobortis quam ut dignissim eget quam lobortis. Elementum, at nullam tincidunt viverra pulvinar ac porta sed mauris. Sit leo imperdiet turpis morbi arcu, posuere odio sit.",
            "URL_ext": "/promo-one",
            "phone": "19167137108",
            "id": "mysql__Promos__2910"
          }
        },
        {
          "node": {
            "ad_title": "Buy Two, Get Two Free",
            "ad_filename": "ad_002911.jpg",
            "ad_body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis quam venenatis porta sed. Aliquet eget lobortis quam ut dignissim eget quam lobortis. Elementum, at nullam tincidunt viverra pulvinar ac porta sed mauris. Sit leo imperdiet turpis morbi arcu, posuere odio sit.",
            "URL_ext": "/promo-two",
            "phone": "19165451660",
            "id": "mysql__Promos__2911"
          }
        },
        {
          "node": {
            "ad_title": "Buy Three, Get Three Free",
            "ad_filename": "ad_002912.jpg",
            "ad_body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis quam venenatis porta sed. Aliquet eget lobortis quam ut dignissim eget quam lobortis. Elementum, at nullam tincidunt viverra pulvinar ac porta sed mauris. Sit leo imperdiet turpis morbi arcu, posuere odio sit.",
            "URL_ext": "/promo-three",
            "phone": "19168243634",
            "id": "mysql__Promos__2912"
          }
        },
        {
          "node": {
            "ad_title": "New Year's Special",
            "ad_filename": "ad_002913.jpg",
            "ad_body": "Our amazing New Year's Special will guarantee you 50% off of 150 doors. If your house is big enough to have 150 doors then you deserve several thousand dollars off.",
            "URL_ext": "/promo-four",
            "phone": "19163654393",
            "id": "mysql__Promos__2913"
          }
        }
      ]
    }
  }
}

但是，在各个促销的模板中，我在所有四个上都获得了相同的内容，并且它仅从第一个节点返回数据，即所有四个不同的促销都有“买一送一”作为主标题等。这是我的促销页面模板，包括上面的 GraphQL 查询。

/* eslint-disable react/display-name */
import React, { useContext, useEffect } from 'react';

import ShareImage from 'assets/images/one-day-share-slogan.png';
import { SEO } from 'components/seo/SEO';
import { Row } from 'containers/row/Row';
import { CallRail } from 'contexts/callrail-context/CallRailContext';
import { graphql } from 'gatsby';

import { Content } from './promo/content/_Content';
import { CallToAction } from './promo/cta/_CallToAction';
import { Hero } from './promo/hero/_Hero';

export default (props: any) => {
  const document = props.data.allMysqlPromos.edges[0];
  if (!document) return null;

  const { changeNumber } = useContext(CallRail);

  const number = document.node.phone;

  useEffect(() => {
    changeNumber(number);
  });

  console.log(document.node.ad_title);

  return (
    <>
      <SEO
        title={document.node.ad_title}
        desc={document.node.ad_body.substr(0, 150) + '...'}
        banner={ShareImage}
      />
      <Hero document={document.node} />

      <Row>
        <CallToAction />
        <Content>{document.node.ad_body}</Content>
      </Row>
    </>
  );
};

export const query = graphql`
  query PromoQuery($ad_title: String) {
    allMysqlPromos(filter: { id: { eq: $ad_title } }) {
      edges {
        node {
          ad_title
          ad_filename
          ad_body
          URL_ext
          phone
          id
        }
      }
    }
  }
`;

我做错了什么，我需要更改哪些内容才能为每个促销页面获取正确的数据？

Answer 1

您应该传递via context your filter value，在这种情况下，应该传递ad_title 字段。因此，在您的 gatsby-node.js 中，您应该有类似的内容：

createPage({
  path: `/promo/${URL_ext}`, // or your value
  component: individualPromoComponent, // or your component
  context: {
    ad_title: node.ad_title,
  },
})

现在，您可以在您的组件中使用ad_title，在其中使用$ad_title：

export const query = graphql`
  query PromoQuery($ad_title: String) {
    allMysqlPromos(filter: { id: { eq: $ad_title } }) {
      edges {
        node {
          ad_title
          ad_filename
          ad_body
          URL_ext
          phone
          id
        }
      }
    }
  }
`;