1

我正在使用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
        }
      }
    }
  }
`;

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

4

1 回答 1

0

您应该通过上下文传递您的过滤器值，在这种情况下，该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_titlein：

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
        }
      }
    }
  }
`;
于 2020-12-09T06:24:03.773 回答