Views: 9

Query to Connect Gatsby with WordPress ACF Field

Using ACF Galerie 4 field instead of Gallery

query GetPageWithAcfFields {
  pageBy(uri: "/home/") {
    title
    homePage {
      bannersSliders {
        id
        fullFileUrl
        fullFile
        fullHeight
        fullWidth
        fullMimeType
        postDate
        postTitle
      }
    }
  }
}

Explaination of above code

query GetPageWithAcfFields { /* Query Starting */
  pageBy(uri: "/home/") { /* calling page by URL */
    title /* title is the page title calling it by node or key */
    homePage { /* GraphQL Type Name given in Field Group of ACF */
      bannersSliders { /* Name of the field (key value) */
        id /* calling id of the images added for homepage using ACF */
        fullFileUrl /* similarly all nodes/keys following used to call ACF data */
        fullFile
        fullHeight
        fullWidth
        fullMimeType
        postDate
        postTitle
      }
    }
  }
}

Query to get Page Data by Page Slug or Permalink,

query GetPageWithAcfFieldsByPageURL {
  pageBy(uri: "/home-page/") {
    seo {
      title
      metaDesc
    }
    title
    content
    homePageSections {
      bannersSliders {
        id
        fullFileUrl
        fullFile
        fullHeight
        fullWidth
        fullMimeType
        postDate
        postTitle
      }
      section01
    }    
    schemaACF {
      schemaGqlFN
    }
  }
}

Query to get Page Data by Page ID,

query GetPageWithAcfFieldsByPageID {
  pageBy(pageId: 6) {
    seo {
      title
      metaDesc
    }
    title
    content
    homePageSections {
      bannersSliders {
        id
        fullFileUrl
        fullFile
        fullHeight
        fullWidth
        fullMimeType
        postDate
        postTitle
      }
      section01
    }    
    schemaACF {
      schemaGqlFN
    }
  }
}

Note : pageBy Query is deprecated.

Plugin used alternate for ACF Pro Gallery : https://wordpress.org/plugins/acf-galerie-4/