More examples for custom fragments

[sjelfull]

Description

It would be great if the documentation had more examples of custom fragments that show how to use popular plugins like:

• Link Field: Show us how to resolve the element field for multiple element types
• Verbb's Navigation: Show us how to resolve the element field for multiple element types
• SEOMatic: Show us how to include the seomatic field on entries with the asArray: true param

If you were to add these examples, it would also be great if you had end-to-end examples that show how to use this data in Gatsby.

I feel like i'm too often missing all the different pieces, and hitting roadblocks. Mind that this is partially due to migrating from the old GraphQL source plugin.

[moacode]

+1 for SEOMatic.

I had an absolute nightmare today figuring out how to query SEOMatic data as an array so that I could use this React package to parse it on the front end.

In the end I used the gatsby-source-graphql plugin separately with a custom schema to achieve this, e.g.:

  resolve: "gatsby-source-graphql",
  options: {
    typeName: "CraftCMS",
    fieldName: "craftcms",
    url: process.env.CRAFTGQL_URL,
    headers: {
      Authorization: `Bearer ${process.env.CRAFTGQL_TOKEN}`,
    },
    createSchema: async () => {
      const sdl = fs
        .readFileSync(`${__dirname}/src/schema/seomatic.sdl`)
        .toString()
      return buildSchema(sdl)
    },
  },
}

In gatsby-config.js

type Query {
  seomatic(
    uri: String
    siteId: Int
    site: String
    asArray: Boolean
  ): SeomaticInterface
}

type SeomaticType implements SeomaticInterface {
  metaTitleContainer: String
  metaTagContainer: String
  metaLinkContainer: String
  metaScriptContainer: String
  metaJsonLdContainer: String
  metaSiteVarsContainer: String
}

interface SeomaticInterface {
  metaTitleContainer: String
  metaTagContainer: String
  metaLinkContainer: String
  metaScriptContainer: String
  metaJsonLdContainer: String
  metaSiteVarsContainer: String
}

in src/schema/seomatic.sdl

Unfortunately I then found out that React Helmet only accepts HTML elements as children, so I wasn't able to use the React Seomatic component and eventually went with this strategy of parsing HTML to React: https://gist.github.com/rjgux/1a7ec4993c8e0a18b51322c9a8c6eed9.

So that's all working nicely now, but what a journey 😅

[webrgp]

@moa-crypto take a look at my Craft + Gatsby article. It shows how to pass SEOmatic tags to Helmet using html-react-parser.