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

Posted 2023-03-08

【中文标题】GraphQL 仅返回 Gatsby 站点上的第一个节点

【英文标题】：GraphQL only returning first node on Gatsby site

【发布时间】：2021-03-20 04:58:18

【问题描述】：

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

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

【问题讨论】：

您需要在上下文中传递 graphql 变量 - 请参阅 gatsbyjs.com/tutorial/part-seven/#creating-pages ... 为什么要将 id 与标题 (filter: id: eq: $ad_title 进行比较？你需要 $ad_title 变量然后ad_title 在需要的上下文中......但可能你需要循环节点并使用node.id 作为$id 变量（node.id 在上下文中作为id 传递）当然还有@987654332 @在查询中

您可以通过this.props.pageContext记录（或渲染）上下文

【参考方案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
        
      
    
  
`;

【讨论】：

这就是票。谢谢！