How to query Wordpress relational fields with GraphQL?

Question

I am facing an issue while trying to query Custom Post Type of type "relation ship" from Wordpress with GraphQL .

When I try to query this kind of field of type "post" it just results into this error, and it breaks all the query:

"message": "Abstract type WpPostObjectUnion must resolve to an Object type at runtime for field WpPage_HomepageContent_heroSlider.buttonLink with value { typename: "ActionMonitorAction" }, received "undefined". Either the WpPostObjectUnion type should provide a "resolveType" function or each possible type should provide an "isTypeOf" function.",

This is the part of the query making troubles:

query HomePageQuery {
  allWpPage(filter: {slug: {eq: "home"}}) {
    nodes {
      slug
      homepage_content {
        heroSlider {
          buttonText
          buttonLink {
            __typename
            ... on WpPost {
              id
            }
          }
        }
      }
    }
  }
}

Any idea about how to solve this or a direction to do some researches ?

Thanks!

Answer 1

I found a solution to get the datas I need for Acf field of type "Relational : Link to page or article" like that:

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
      type WpPage_HomepageContent_heroSlider implements Node {
        buttonLink: WpPost
      }
    `
  createTypes(typeDefs)
}
exports.createResolvers = ({ createResolvers }) => {
  const resolvers = {
    Query: {
      allButtonLink: {
        type: ["WpPage_HomepageContent_heroSlider"],
        resolve(source, args, context, info) {
          return context.nodeModel.getAllNodes({ type: "ActionMonitorAction" })
        },
      },
    },
  }
  createResolvers(resolvers)
}

But it's an heavy solution and I think that would involve do the same for each Acf field of this type...

The best solution: I finnaly decided to set our ACF link field to type "Relational: Link". This way it's simpler, I don't need any "createSchemaCustomization" or "createResolvers" workaround to get my slug in my buttonLink field in GraphQL and contributors can still easely select articles in Wordpress backoffice.

buttonLink now return me:

 "buttonLink": {
   "url": "/2020/09/04/article-test/",
   "target": "",
   "title": "Article test avec image en avant"
}

And that's all what I need