title: GraphQL retrieve data for specific blocks - Gatsby + Wordpress
body: <p>I have a React + Gatsby JS project that retrieves data from a Wordpress site through their headless API. I'm a total newbie to Gatsby.</p>
  
  <p>Every page on my site is made up of blocks, which are in turn made up of fields. I'm using ACF to build these. </p>
  
  <p>I am currently able to retrieve every page and a list of the blocks within that page by using the following GraphQL query: </p>
  
  <pre><code> query ($id: String!) {
          currentPage: wordpressPage(id: {eq: $id}) {
              title
              acf {
                  page_blocks {
                   block_type {
                       acf_fc_layout
                   }
                  }
              }
          }
      }
  </code></pre>
  
  <p>This returns the following data for page with id <code>f4c4f4a7-ba0d-55b1-8877-16f543c22b80</code></p>
  
  <pre><code>{
    "data": {
      "wordpressPage": {
        "id": "f4c4f4a7-ba0d-55b1-8877-16f543c22b80",
        "acf": {
          "page_blocks": [
            {
              "block_type": [
                {
                  "acf_fc_layout": "page_title_and_text"
                },
                {
                  "acf_fc_layout": "two_column_media_and_text"
                }
              ]
            }
          ]
        }
      }
    }
  }
  </code></pre>
  
  <p>The blocks are next to <code>afc_fc_layout</code>. Both <code>page_title_and_text</code> and <code>two_column_media_and_text</code> are page blocks in that page. </p>
  
  <p>Now, I would think that the next step would be to make a React component for each of those blocks, passing in the custom field data for each, to that component. If a page doesn't have a block, then there wouldn't be a need for me to retrieve the fields for that block, right? </p>
  
  <p>Initially I thought I would run another query from my React component, requesting the fields for that particular block. But I realized I can't really add variables (page Id) to a static query within my components, per <a href="https://www.gatsbyjs.org/docs/use-static-query/" rel="nofollow noreferrer">Gatsby docs</a>, so I wouldn't be able to query that specific page for its fields. Please correct me if I'm wrong.</p>
  
  <p>I believe I have to retrieve those fields I need from my main query that I've shown you here, but it seems absolutely bonkers to have to query for every possible custom field on the site, when not all pages are going to have the same blocks. </p>
  
  <p>Ideally there would be some sort of syntax like </p>
  
  <pre><code>...
  acf {
      page_blocks {
          block_type {
              acf_fc_layout
              if (acf_fc_layout eq page_title_and_text) {
                  title 
                  text
              }
  
              if (acf_fc_layout eq two_column_media_and_text) {
                  media
                  text
              }
          }
      }
  }
  ...
  </code></pre>
  
  <p>And then I would pass those fields to their corresponding React component. </p>
  
  <p>What is the proper way to go about this? </p>
  
  <p>Note: I am currently at the point where I'm able to retrieve the fields from the API to render blocks. I am more wondering if there is any way my graphQL query can filter out the data for me, or if there is a way to customize the WP endpoint to show me field data filtered by the blocks that are actually on the page. </p>
  
  <p>Ex: the site queries the data in blocks 4,3,2,10,12,15.... even though the page only has block 2. </p>
  
  <p>I'm worried that devs that want to add blocks in the future will have to rewrite the query each time, hurting the site's scalability and potential performance. </p>