Graphql query works in playground not on client

Technologies GraphQL
#1

Hi there,

I've been writing some queries to fetch the "linked documents" to use in my slice components. I've managed to write the correct query (I think) and tested it in the playground.

However, when I try to use the same query in my code. The link document object won't fetch that last bit of data in order to use in the PrismicLink component. Any help would be nice.

query allHomePages {
allHomes(id: "YvKx6xAAACAAyZS0") {
edges {
node {
slices {
__typename
... on HomeSlicesProject_card {
type
label
variation {
__typename
... on HomeSlicesProject_cardDefault {
primary {
title
description
link {
_linkType
... on _ExternalLink {
url
target
}
... on _Document {
_meta {
id
uid
}
}
}
image
}
}
}
}
__typename
... on HomeSlicesTech_stack_card {
type
label
variation {
__typename
... on HomeSlicesTech_stack_cardDefault {
items {
icon
tech_name
}
primary {
title
description
}
}
}
}
__typename
... on HomeSlicesCall_to_action {
type
label
variation {
__typename
... on HomeSlicesCall_to_actionDefault {
primary {
title
description
button_text
link {
_linkType
__typename
}
image
}
}
}
}
__typename
... on HomeSlicesHome_hero {
type
label
variation {
__typename
... on HomeSlicesHome_heroDefault {
primary {
title
button
link {
_linkType
__typename
}
image
}
}
}
}
}
_meta {
id
uid
type
tags
lang
}
_linkType
}
}
}
}

#3

Hello @dirkkelderman, thanks for reaching out.
What do you see if you log the API response of the query, can you see the content of the link?

#4

Hi Pau,

In the console (or terminal) the nested link data doesn't show either.

Screenshot 2022-08-19 at 09.37.36
Screenshot 2022-08-19 at 09.37.36680×714 78.8 KB

#5

I see, could you send us the URL of your repository so we can run a test?

#6

https://dirk-portfolio-website.prismic.io

#7

Hi @Pau , any news on this perhaps? :smiley:

#8

Hello @dirkkelderman, we ran a test query on our end. We noticed that there's a missing set to call the nested content inside the link field, you need to go one level further down like this:

image
image926×706 43.6 KB

Aside from this, we couldn't see any problems with the API response.

#9

Hi Pau,

I'm trying to get the links of the "HomeSlicesProject_card". The query I run there is with the nested link you suggested. So this is where the problem starts. I get that data in the explorer, not in the client.

#10

Below you can see the query I do, and the response in the explorer. Here I fetch the nested data, linkType Link.document.

Screenshot 2022-08-26 at 21.35.53
Screenshot 2022-08-26 at 21.35.53706×324 21.4 KB

Below you can see the response, logged in the console (chrome devtools). It's missing this nested linkType (and the meta).

Screenshot 2022-08-26 at 21.36.22
Screenshot 2022-08-26 at 21.36.22782×490 104 KB

#11

I see. Can you share the complete page query?
I'm not sure why the content isn't getting displayed.

#13

Hi Pau,

I tried two querries:

query {
allHomes(id: "YvKx6xAAACAAyZS0") {
edges {
node {
slices {
__typename
... on HomeSlicesProject_card {
type
label
variation {
__typename
... on HomeSlicesProject_cardDefault {
primary {
title
description
link {
_linkType
... on _ExternalLink {
url
target
}
... on _Document {
_meta {
id
uid
}
}
}
image
}
}
}
}
__typename
... on HomeSlicesTech_stack_card {
type
label
variation {
__typename
... on HomeSlicesTech_stack_cardDefault {
items {
icon
tech_name
}
primary {
title
description
}
}
}
}
__typename
... on HomeSlicesCall_to_action {
type
label
variation {
__typename
... on HomeSlicesCall_to_actionDefault {
primary {
title
description
button_text
link {
_linkType
__typename
}
image
}
}
}
}
__typename
... on HomeSlicesHome_hero {
type
label
variation {
__typename
... on HomeSlicesHome_heroDefault {
primary {
title
button
link {
_linkType
__typename
}
image
}
}
}
}
}
_meta {
id
uid
type
tags
lang
}
_linkType
}
}
}
}

{
home(uid: "home", lang: "nl-nl") {
slices {
... on HomeSlicesProject_card {
variation {
... on HomeSlicesProject_cardDefault {
primary {
title
description
image
link {
_linkType
... on _Document {
_meta {
id
uid
}
}
... on _ExternalLink {
url
target
}
}
}
}
}
}
... on HomeSlicesTech_stack_card {
variation {
... on HomeSlicesTech_stack_cardDefault {
primary {
title
description
}
items {
icon
tech_name
}
}
}
}
... on HomeSlicesCall_to_action {
variation {
... on HomeSlicesCall_to_actionDefault {
primary {
title
description
button_text
image
link {
_linkType
}
}
}
}
}
... on HomeSlicesHome_hero {
variation {
... on HomeSlicesHome_heroDefault {
primary {
title
button
image
link {
... on _Document {
_meta {
id
uid
}
}
}
}
}
}
}
}
}
}

#15

I've tested it again and can't seem to see the error. If you want, you can send us the project code and the instructions to run it so we can see the err first hand.

#16

Sure thing!

You can find the repo right here: https://github.com/dirkkelderman/portfolio-website-dirk

Simple NextJS, npm/yarn and run dev to get it going.

#17

Hi @dirkkelderman, I identified the problem. Link fields in Slice Machine are designed to link external web pages only. To create links to documents that need to use Content Relationship fields.

I will add a note to our documentation backlog to clarify this detail.

#18

Hi Pau,

I tried that also, no luck. By the way, that still doesn't explains why the data in the chrome dev tool, and a console log, doesn't show the nested link documents. And the graphQL explorer does.

#19

Did you change the field to a Content Relationship field?

The GraphiQL tool probably still "reads" all fields equally.
We still need to standardize this functionality.