Need help using graphquery

Developing with Prismic
1

Can someone help me with this query?

I am calling a page that has a hero slice with a content relationship link called cta that has a field of action button text.

const page = await client.getAllByType("coming_soon", {
    graphQuery: `
    {
      page {
        slices {
          ... on hero_slice {
            variation {
              ... on details {
                primary {
                  cta {
                    ... on cta_email {
                      slices {
                        ... on call_to_action_slice {
                          variation {
                            ... on default {
                              primary {
                                action_button_text
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    
  `,
  });

{
  "id": "hero",
  "type": "SharedSlice",
  "name": "Hero",
  "description": "Hero",
  "variations": [
    {
      "id": "default",
      "name": "Default",
      "docURL": "...",
      "version": "initial",
      "description": "Default",
      "imageUrl": "",
      "primary": {
        "hero_title": {
          "type": "Text",
          "config": {
            "label": "Hero Title",
            "placeholder": ""
          }
        },
        "hero_description": {
          "type": "Text",
          "config": {
            "label": "Hero Description",
            "placeholder": ""
          }
        }
      },
      "items": {}
    },
    {
      "id": "heroWithSocialMediaHandles",
      "name": "HeroWithSocialMediaHandles",
      "docURL": "...",
      "version": "initial",
      "description": "Default",
      "imageUrl": "",
      "primary": {
        "hero_title": {
          "type": "Text",
          "config": {
            "label": "Hero Title",
            "placeholder": ""
          }
        },
        "hero_description": {
          "type": "Text",
          "config": {
            "label": "Hero Description",
            "placeholder": ""
          }
        }
      },
      "items": {
        "social_media_handle": {
          "type": "Link",
          "config": {
            "label": "Social Media Handle",
            "select": "document"
          }
        }
      }
    },
    {
      "id": "handlesCta",
      "name": "Handles & CTA",
      "docURL": "...",
      "version": "initial",
      "description": "Default",
      "imageUrl": "",
      "primary": {
        "hero_title": {
          "type": "Text",
          "config": {
            "label": "Hero Title",
            "placeholder": ""
          }
        },
        "hero_description": {
          "type": "Text",
          "config": {
            "label": "Hero Description",
            "placeholder": ""
          }
        },
        "cta": {
          "type": "Link",
          "config": {
            "label": "CTA",
            "select": "document"
          }
        }
      },
      "items": {
        "social_media_handle": {
          "type": "Link",
          "config": {
            "label": "Social Media Handle",
            "select": "document"
          }
        }
      }
    }
  ]
}

{
  "id": "cta_email",
  "label": "CTA",
  "format": "custom",
  "repeatable": true,
  "status": true,
  "json": {
    "Main": {
      "uid": {
        "config": {
          "label": "UID"
        },
        "type": "UID"
      },
      "paragraph": {
        "type": "Text",
        "config": {
          "label": "Paragraph",
          "placeholder": ""
        }
      },
      "button_label": {
        "type": "Text",
        "config": {
          "label": "Button Label",
          "placeholder": ""
        }
      },
      "form_placeholder": {
        "type": "Text",
        "config": {
          "label": "Form Placeholder",
          "placeholder": ""
        }
      },
      "slices": {
        "type": "Slices",
        "fieldset": "Slice Zone",
        "config": {
          "choices": {
            "call_to_action": {
              "type": "SharedSlice"
            }
          }
        }
      }
    }
  }
}

{
  "id": "call_to_action",
  "type": "SharedSlice",
  "name": "CallToAction",
  "description": "CallToAction",
  "variations": [
    {
      "id": "default",
      "name": "Default",
      "docURL": "...",
      "version": "initial",
      "description": "Default",
      "imageUrl": "",
      "primary": {
        "call_description": {
          "type": "Text",
          "config": {
            "label": "Call Description",
            "placeholder": ""
          }
        },
        "action_button_text": {
          "type": "Text",
          "config": {
            "label": "Action Button Text",
            "placeholder": ""
          }
        },
        "form_placeholder_text": {
          "type": "Text",
          "config": {
            "label": "Form Placeholder Text",
            "placeholder": ""
          }
        }
      },
      "items": {}
    }
  ]
}
3

Hi @theplaygroundmedia,

Taking a look, it seems that you need to update your graphQuery to match the IDs of your custom type, slices, & slice variation. The docs are a little confusing on this, and I will update them to make them more clear. By the looks of it, your query should be something like this:

const page = await client.getAllByType("coming_soon", {
    graphQuery: `
    {
      coming_soon {
        slices {
          ... on hero {
            variation {
              ... on handlesCta {
                primary {
                  cta {
                    ... on cta_email {
                      slices {
                        ... on call_to_action {
                          variation {
                            ... on default {
                              primary {
                                action_button_text
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    
  `,
  });

Give that a try and let me know if it works for you.

4

Ahh yes it worked, thank you.

1 Like
5

@Levi can you also give me the query to resolve the social media handle CR field in the items of the hero slice, so that I can retrieve the name, url, and etc?

{
  "id": "social_media_handle",
  "label": "Social Media Handle",
  "format": "custom",
  "repeatable": true,
  "status": true,
  "json": {
    "Main": {
      "uid": {
        "config": {
          "label": "UID"
        },
        "type": "UID"
      },
      "social_media_name": {
        "type": "Text",
        "config": {
          "label": "Social Media Name",
          "placeholder": ""
        }
      },
      "social_media_url": {
        "type": "Text",
        "config": {
          "label": "Social Media Url",
          "placeholder": ""
        }
      },
      "social_media_logo": {
        "type": "Image",
        "config": {
          "label": "Social Media Logo",
          "constraint": {},
          "thumbnails": []
        }
      }
    }
  }
}
6

Hi @theplaygroundmedia,

The query just needs to be updated to include that type and its fields. This should get you what you're looking for:

const page = await client.getAllByType("coming_soon", {
    graphQuery: `
    
    {
      coming_soon {
        slices {
          ... on hero {
            variation {
              ... on handlesCta {
                primary {
                  cta {
                    ... on cta_email {
                      slices {
                        ... on call_to_action {
                          variation {
                            ... on default {
                              primary {
                                action_button_text
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
                items {
                  social_media_handle {
                    ... on social_media_handle {
                      social_media_name
                      social_media_url
                      social_media_logo
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    
  `,
  });

Give that a try and let me know if it works for you.

Cheers,
Levi