使用GraphQL从Gatsby.js中的WP获取ACF灵活内容

时间:2017-11-29 15:22:04

标签: javascript wordpress reactjs graphql gatsby

我正在使用Gatsby.js和Wordpress插件来查询Wordpress REST-API。我无法弄清楚如何使用一个查询的结果来创建另一个动态查询,该查询有效地循环返回的数组。

由于我在wordpress中使用ACF Flexible Content,因此在进行第一次查询之前,我无法知道数据的结构。第一个查询返回已在CMS中添加的灵活布局的__typenames数组,然后我执行第二个查询,该查询返回上述每个布局的ID。

这是我进入砖墙的地方 - 如何循环访问ID数组并使用现在已知的__typename进行查询以获取ACF Flexible内容中列出的所有字段?

 {
   wordpressPage(title : {eq:"About"}) {
     acf {
       components_page {
         __typename  
         // This returns an array of types 
         // eg [ 
         //     __typename : WordPressAcf_image_and_copy,
         //     __typename : WordPressAcf_body_copy
         //    ]
       }
     }
     children {
       id 
       // This returns an array of IDs 
       // eg [ 
       //     id : 4d2dac46-889e-593b-a00b-4a5ccaa87dfa2componentsWordPressAcf_image_and_copy, 
       //     id : 4d2dac46-889e-593b-a00b-4a5ccaa87dfa1componentsWordPressAcf_body_copy
       //    ]
     }
   }

   /* 
   ** This is the kind of query that I need to generate dynamically
   ** using the type returned above along with the ID returned above :
   */
   wordPressAcfImageAndCopy(id : {eq: "4d2dac46-889e-593b-a00b-4a5ccaa87dfa3componentsWordPressAcf_image_and_copy"}) {
     title
     subtitle
     body_copy
   }
 }

如果我没有非常清楚地解释这一点,我深表歉意 - 我感谢任何人都可以给出的任何指示。

1 个答案:

答案 0 :(得分:1)

github.com/pieh上发布的issue解决方案是:

query homeQuery {
  wordpressPage(title: {eq: "About"}) {
    children {
      __typename
      ... on WordPressAcf_hero {
        title
        subtitle
      }
    }
  }
}