(In Gatsby) Error: The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID 51861011 inside data.links! (edited title)

[kestrada]

Trying to use the new StructuredText React component to render out an inline video in a Case Study’s content field (page template). Everything works fine for the rest of the content, like headings/paragraph elements but can’t seem to get the video rendered correctly. Seems like under the hood the StructuredText component is trying to match the records with their ID but is getting an error due to how the response is structured. The data being returned is formatted like ‘DatoComponentNameHere-5611846’ instead of just simply returning the id alone. Any thoughts on where I might be going wrong here? Had the idea of either mutating the response, or digging into the GraphQL query I’m using more but thought I’d reach out to see if anyone had similar experience - any direction at all would be highly appreciated! Please and thanks in advance~ cheers

Note: Here’s a link to the response I’m getting – also happy to provide any other information that might be helpful in debugging this

[roger]

Can you provide some sample code, please?

And that doesn’t quite look like the standard dato graphql response… are you perhaps using a special client or middleware (gatsby, etc.)?

[kestrada]

Can you provide some sample code, please?

Sample code can be found here for the query & the response here. And in the codebase, we’re doing something that looks like the screenshot I attached (here’s where we render out the components.) Let me know if this suffices

That doesn’t quite look like the standard response… are you perhaps using a special client or middleware?

Exactly! The middleware being Gatsby in this specific scenario. Strangely enough, the response looks just fine from the DatoCMS API explorer but seems to be mutating when queried through GraphQL. I’m assuming this has to do with how Gatsby is handling the response, but I’d love to hear the insight you could offer on what’s the best practice here: do we mutate the response once its received or?.. To me, this just seems counterintuitive but works in the meantime

[roger]

Sorry, I’m not familiar with Gatsby and how it works

Your GraphQL and React code look fine, though that doesn’t help you right now. A DatoCMS rep should be along shortly to help, hopefully! (In case it wasn’t clear, I don’t work for them – was just trying to help in case of a coding error or whatnot, which it doesn’t seem to be)

[fabrizio]

Hi

when you use gatsby with our “gatsby-source-datocms”, you are not actually doing any graphql request to our graphql endpoint (https://graphql.datocms.com), because gatsby embeds its own graphql server that fetches data from various “sources”.

“gatsby-source-datocms” plugin downloads all of your project records using our REST api under the hood.

So, yes it’s perfectly normal that the same query returns a different result when run inside the API Explorer and in the gatsby graphql explorer.

I think you are doing it in the right way, @kestrada .

More about structured texts with gatsby here: GitHub - datocms/gatsby-source-datocms: Official GatsbyJS source plugin to pull content from DatoC

[dthreatt]

I am having the same issue.

[clay1]

@dthreatt I think I can help! When you do your query in Gatsby, make sure that you are querying originalId with the alias id instead the normal id. Basically, gatsby-source-datocms is creating its own unique ids for imported data in order to avoid potential (however unlikely) overlap.

So in your query, do something like this:

query {
  datoCmsComponentName {
    id: originalId
    __typename
    ...otherProps
  }
}

[dthreatt]

I am using Astro and React however

[roger]

@dthreatt

I am using Astro and React however

Just answered this in your other thread, hopefully!

(Astro & React) The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified! (edited title)

Hey @dthreatt, You have to tell the <StructuredText/> component how to render your linked records using the renderLinkToRecord prop, like this: renderLinkToRecord={({ record, children, transformedMeta }) => { switch (record.__typename) { case 'TeamMemberRecord': return ( <a {...transformedMeta} href={`/team/${record.slug}`}> {children} </a> ); default: return null; …