Skip to content
Get help on SlackWatch Sanity demo

Troubleshooting obtaining internalUrl with @portableText React in Sanity.io

18 replies
Last updated: Mar 7, 2022
How do I obtain the markDef internalUrl with @portableText React the reference to the internal page?
Mar 7, 2022, 3:20 PM
Not sure exactly where you’re running into trouble but below is a simplified version of what I’m using:
Subset of schema:

annotations: [
  {
    name: 'internalLink',
    title: 'Internal link',
    type: 'object',
    fields: [
      {
        name: 'reference',
        title: 'Reference',
        type: 'reference',
        to: [
          { type: 'page' },
        ],
      },
    ],
  },
]
Subset of 
groq
query:
portableText[] {
  ...,
  markDefs[] {
    ...,
    _type == "internalLink" => {
      "path": "/" + reference->slug.current
    }
  }
}
Subset of 
components
prop for the portable text component
const components = {
  marks: {
    internalLink: ({ text, value }) => {
      return (
        <Link href={value.path}>
          <a>{text}</a>
        </Link>
      );
    },
  },
};

Mar 7, 2022, 3:31 PM
user J
Am I doing something wrong here?
{
            name: "internalLink",
            type: "object",
            title: "Internal link",
            blockEditor: {
              icon: icon.link,
            },
            fields: [
              {
                name: "reference",
                type: "reference",
                title: "Reference",
                to: [{ type: "page" }, { type: "author" }],
              },
            ],
          },

export const articleQuery = groq`*[_type == "article" && slug.current == $slug][0] {
    ...,
  portableText[] {
    ...,
    markDefs[] {
      ...,
      _type == "internalLink" => {
        "path": "/" + reference->slug.current
      }
    }
  },
    author -> {
      name,
      featuredImage,
    },
    "slug": slug.current,
}`;
Mar 7, 2022, 3:35 PM
keep getting the same:

{_key: '79d5d32f84d1', _type: 'internalLink', reference: {…}}
reference: {_ref: '74bcefc7-d19f-4538-b904-d2bd568493bb', _type: 'reference'}
_key: "79d5d32f84d1"
_type: "internalLink"
[[Prototype]]: Object

Mar 7, 2022, 3:38 PM
Looks alright at a quick glance.. 🤔Your portable text field’s name is 
portableText
right?
Mar 7, 2022, 3:41 PM
Yes I am using the @portableText/React the one with components instead of serializers.
Mar 7, 2022, 3:42 PM
export default {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    {
      title: "Block",
      type: "block",
      styles: [normal, h1, h2, h3, h4, quote, title],
      lists: [ol, li],
      marks: {
        decorators: [strong, emphasis, highlight, code],
        annotations: [
          {
            name: "link",
            type: "object",
            title: "External link",
            blockEditor: {
              icon: icon.link,
            },
            fields: [
              {
                name: "href",
                type: "url",
                title: "URL",
              },
              {
                title: "Open in new tab",
                name: "blank",
                description: "Read <https://css-tricks.com/use-target_blank/>",
                type: "boolean",
              },
            ],
          },

          {
            name: "internalLink",
            type: "object",
            title: "Internal link",
            blockEditor: {
              icon: icon.link,
            },
            fields: [
              {
                name: "reference",
                type: "reference",
                title: "Reference",
                to: [{ type: "page" }, { type: "author" }],
              },
            ],
          },
        ],
      },
    },
    image,
    video,
  ],
};

Mar 7, 2022, 3:44 PM
You mean the name of the PortableText field?
Mar 7, 2022, 3:44 PM
yeah, change 
portableText[] {
to 
blockContent[] {
in your groq query, that might fix it
Mar 7, 2022, 3:45 PM
I got this after running query:
Mar 7, 2022, 3:47 PM
trying changing 
blockContent[] {
to 
body[] {
🤞
Mar 7, 2022, 3:52 PM
Lets see on the front-end side
Mar 7, 2022, 3:56 PM
Ohhhh yeahhh.
user J
:cool_doge: 🙌:fast_parrot:
Mar 7, 2022, 3:57 PM
user J

Quick question I have a type "ImageWithAltText" I am trying to add the URL to the PortableText but not sure which prop I need to use.


2:
alt: "Dogs"
asset:
_ref: "image-a7bdedc14df4221fc204b17f2b21dab703f71105-1296x972-jpg"
_type: "reference"
[[Prototype]]: Object
markDefs: null
path: null
_key: "6dc2af8c00f1"
_type: "imageWithAltText"

body[] {
    ...,
    _type == "imageWithAltText" =&gt; {
        ...,
        "path": reference-&gt;slug.current
      },
    markDefs[] {
      ...,

      _type == "internalLink" =&gt; {
        "path": reference-&gt;slug.current
      }
    }
  },

Mar 7, 2022, 4:18 PM
What type of field is 
imageWithAltText
, can you share the schema?
Mar 7, 2022, 4:24 PM
_type == "imageWithAltText" =&gt; {
        ...,
        asset -&gt; {
          ...,
        },
    },

import { icon } from "./document-icons";

import { uploadLimitValidation } from "../../lib/helpers";

export default {
  name: "imageWithAltText",
  type: "image",
  title: "Image With Alt Text",
  icon: icon.image,
  options: {
    hotspot: true,
    accept: "image/*, .jpg, .jpeg",
  },
  fields: [
    {
      title: "Caption",
      name: "caption",
      type: "string",
      options: {
        isHighlighted: true,
      },
    },

    {
      title: "Alternative text",
      name: "alt",
      type: "string",
      validation: (Rule) =&gt;
        Rule.required().warning("Alt is recommended for SEO and accessiblity."),
      options: {
        isHighlighted: true,
      },
    },
  ],

  preview: {
    select: {
      title: "alt",
      image: "imageWithAltText",
    },
    prepare({ title = "Alternative text missing", image }) {
      return {
        title,
        media: image,
      };
    },
  },

  ...uploadLimitValidation,
};

types: {
      imageWithAltText: ({ asset, alt, width }: any) =&gt; (
        &lt;&gt;{console.log(asset)}&lt;/&gt;
      ),
    },

Mar 7, 2022, 4:25 PM
Sorry not fully understanding what you’re wanting to do, which url? the url for the asset?
Mar 7, 2022, 4:32 PM
the URL of the image which I have pasted inside the PortableText editor
Mar 7, 2022, 4:33 PM
body[] {
    ...,
    _type == "imageWithAltText" =&gt; {
        asset -&gt; {
          url,
        }
    },

    markDefs[] {
      ...,

      _type == "internalLink" =&gt; {
        "path": reference-&gt;slug.current
      }
    }
  },
I do get the URL of the asset but it's not working when i console log asset which is an object.
Mar 7, 2022, 4:38 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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 startedWatch demo

Was this answer helpful?

Categorized in