Get help on Discord

How to reference Sanity Slack thread response

9 replies
Last updated: Aug 22, 2021
AI Update

It looks like you've shared a Slack thread link, but I'm not able to access Slack conversations or view the content of that thread. Slack links require authentication and aren't publicly accessible.

If you have a question about Sanity that was discussed in that thread, I'd be happy to help! Just copy and paste the question here, and I'll do my best to provide a helpful answer. Whether it's about:

  • Setting up Sanity Studio
  • Writing GROQ queries
  • Integrating with frameworks like Next.js
  • Content modeling
  • Deployment issues
  • Or anything else Sanity-related

Just share the details and I'll assist you!

Show original thread
9 replies
What you describe here is essentially a data structure that consists of a quote (a text string) and an author name (a text string). Portable Text lets you insert custom data structures in between paragraphs (which also are their own objects really. The way I’d do this would be to first define a new object type:
// quote.js
export default {
  name: 'quote',
  type: 'object',
  title: 'Quote',
  fields: [
    {
      name: 'text',
      type: 'text', // <= This can also be a Portable Text field
      title: '',
    },
    {
      name: 'author',
      type: 'string', // <= This could be a reference to an author document type, if you had that
      title: 'Author',
    }
  ]
}
Remember to import this into your schemas in 
schema.js
and then you can add the following to your Portable Text field (I’ve made a simple one here:
// portableText.js
export default {
  name: 'portableText',
  type: 'array',
  title: 'Portable Text',
  of: [
    {
      type: 'block',
    },
    {
      type: 'quote',
    }
  ]
}

Come think of it, you could also add support for an URL in the quote (reasoning in a bit):
// quote.js
export default {
  name: 'quote',
  type: 'object',
  title: 'Quote',
  fields: [
    {
      name: 'text',
      type: 'text', // <= This can also be a Portable Text field
      title: '',
    },
    {
      name: 'author',
      type: 'string', // <= This could be a reference to an author document type, if you had that
      title: 'Author',
    },
    {
      name: 'url',
      type: 'url',
      title: 'URL',
      description: 'Source on the web', 
     }
  ]
}

Amazing! This was really helpful and I’ve already got it set up in my codebase now. Very quick and easy to implement 😀👍
And the serializer for this in the frontend can be something like this:
// portableText.js
const serializers = {
  type: {
    quote: ({ text, author, url }) => {
      return (
        <figure>
          <blockquote cite={url}>
            {text}
          </blockquote>
          {author && <figcaption>{author}</figcaption>}
        </figure>
      )
    }
  }
}
Just went on a
🐰 🕳️ on how to properly markup this with HTML5. Not super obvious tbh. This seems like a reasonable solve .
Any idea why the above code wouldn’t work?
I’m getting the data through in my block content as I can see the quote in GrapQL.

When I add the word ‘test’ in after the {text} variable, in the serializer, that’s showing up i.e.:

<blockquote>{text} test</blockquote>
But the actual text and author is not showing up.

The serializers are in a separate js file and are piped into my block content like:

<BlockContent serializers={serializers} />
oh, I forgot the pattern should be
// portableText.js
const serializers = {
  type: {
    quote: ({node: { text, author, url }}) => {
      return (
        <figure>
          <blockquote cite={url}>
            {text}
          </blockquote>
          {author && <figcaption>{author}</figcaption>}
        </figure>
      )
    }
  }
}
That is including 
node
in 
({node: { text, author, url }})
sorry about that
Lovely, that’s working now. Thanks again, this was really helpful 👍

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?