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"
          }
        }
      ]
    }
  }
}

但是，在各个宣传片的模板中，我在所有四个宣传片上都获得了相同的内容，并且它仅从第一个节点返回数据，即所有四个不同的宣传片都以 'Buy One, Get One Free' 作为主要节点标题等。这是我的促销页面模板，包括上面的 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 in:

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

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

GraphQL only returning first node on Gatsby site

reactjs

graphql

gatsby

gatsby-plugin