google/react-schemaorg

JSON-LD scripts with "@graph" key

luckasnix opened this issue · 4 comments

luckasnix commented

I am using Organization and WebSite schema. I can add more than one schema if I add more script tags, but I can use "@graph" too. I have no idea how implement this with schema-dts types. There are some way to do this? Now I'm using "any" type:

<Head>
  <script
    {...jsonLdScriptProps<any>({
      '@context': 'https://schema.org',
      '@graph': [
        {
          '@type': 'Organization',
          name: 'Company LTDA',
          email: 'company@email.com',
          telephone: '000-111-222-333'
        },
        {
          '@type': 'WebSite',
          name: 'Company LTDA',
          url: 'https://company.com'
        }
      ]
    })}
  />
</Head>
Eyas commented

Yeah I've been meaning to support this, but still none yet.

But:

  • <any> is probably as close as you can get to it right now
  • any would cost you type checking though, so typically if you're writing objects inside of the graph inline, I'd recommend writing a helper like so:
import { Thing } from "schema-dts";

function array(...passthrough: readonly Thing[]): readonly Thing[] {
  return passthrough;
}

just to force the type checking to happen.

So basically:

<Head>
  <script
    {...jsonLdScriptProps<any>({
      '@context': 'https://schema.org',
      '@graph': array(
        {
          '@type': 'Organization',
          name: 'Company LTDA',
          email: 'company@email.com',
          telephone: '000-111-222-333'
        },
        {
          '@type': 'WebSite',
          name: 'Company LTDA',
          url: 'https://company.com'
        }
      )
    })}
  />
</Head>
luckasnix commented

Thank you!

Eyas commented

We'll want to support this natively in the upcoming react-schemaorg release.

Eyas commented

In 1.3.0 (you'll need to update schema-dts) you can simply do:

<Head>
  <script
    {...jsonLdScriptProps({
      '@context': 'https://schema.org',
      '@graph': [
        {
          '@type': 'Organization',
          name: 'Company LTDA',
          email: 'company@email.com',
          telephone: '000-111-222-333'
        },
        {
          '@type': 'WebSite',
          name: 'Company LTDA',
          url: 'https://company.com'
        }
      ]
    })}
  />
</Head>