Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

How Sanity's GraphQL Endpoint Resolves Portable Text to JSON

12 replies
Last updated: May 10, 2020
Hi! I was wondering, how does Sanity's GraphQL endpoint resolves Portable Text to raw (parsed) JSON? https://www.sanity.io/docs/graphql#portable-text-5ea9c0e79586 I am not an expert, and only asking for a co-worker. He only manages to send it as a JSON string, which means I have to use 
JSON.parse
in the frontend to be able to pass it to 
BlockContent
in my React app. We have a MongoDB, and using dotnet-graphql, although I do not know if these are relevant here. I am curious how it is done in JS anyway! If more context needed, please ask. 🙂
May 7, 2020, 8:38 AM
Until we have updated the Portable Text specification to be fully typed, I'm afraid that getting it as a JSON string that you have to parse in to JS objects is the way to go.
So

const doc = await fetch('GRAPHQL_ENDPOINT_WITH_QUERY')

const body = JSON.parse(doc.bodyRaw)

<BlockContent blocks={body} />
would be the way to go about it
May 10, 2020, 8:41 AM
Not sure of the implications or feasibility of it, but it would be nice if you could just pass the JSON string to the BlockContent component and have it deal with it.
May 10, 2020, 8:42 AM
☝️ This isn't totally correct. We send the data as JSON, not as a string of JSON. The bit about the typing holds true, though.
May 10, 2020, 6:35 PM
I also read this question a little differently: I think he's asking how we are managing to send the data from the GraphQL API as "untyped" JSON instead of as a string of JSON.
The way we do this is to declare a scalar called "JSON", which doesn't re-encode data. Here's one such implementation:
https://github.com/taion/graphql-type-json
May 10, 2020, 6:37 PM
If I pass it as a string wouldn't it need to rerender the whole tree as a new object will be generated each time?
May 10, 2020, 6:37 PM
Only if you re-fetch the data, but the same holds true for "pre-parsed" JSON, I guess.
May 10, 2020, 6:38 PM
Also not 100% sure how typed languages deal with a JSON scalar, so this may not be considered "best practise", but it's the best we have right now until we get properly typed GraphQL schemas for portable text fields.
May 10, 2020, 6:39 PM
Thanks, and yeah.. I am not sure if it is feasible in C# this way, but I'll forward this to our backend developer. So to type it, one must define a recursive type, I guess? I know it can be done in Typescript, we have to find out if it is a thing in C#.
May 10, 2020, 6:41 PM
I'm not sure what the best approach is in C# - let me know what you end up with though 🙂
May 10, 2020, 6:44 PM
Will do! Appreciate the help from both of you! 🙂
May 10, 2020, 6:46 PM
(Sorry about the confusion!)
May 10, 2020, 6:47 PM
No problem. :) Right now, I run JSON.parse when fetching the data. Hopefully doesn't need to do it on every render. I'll get back if we manage to solve this on the backend.
May 10, 2020, 6:49 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?