JSON-LD scripts with "@graph" key

luckasnix commented 3 years ago

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 3 years ago

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 3 years ago

Thank you!

Eyas commented 3 years ago

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

Eyas commented 3 years ago

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>

google / react-schemaorg

JSON-LD scripts with "@graph" key #29