Skip to content

Robust starter for Gatsby 2 : Use TS objects as source for React props, and don't spread GraphQL everywhere

License

Notifications You must be signed in to change notification settings

robusta-code/gatsby-starter-the-robust

Repository files navigation

WIP

!!! Do not use; 0.0.1 is launching, master is not stable

Gatsby the Robust

Robust starter for Gatsby 2 : Use TS objects as source for React props, and don't spread GraphQL everywhere

Gatsby the right way

  • Don't spread GraphQL everywhere
  • Load data with GraphQL
    • once for markdown posts
    • if needed : once for additional json data
    • if needed : .... your custom data, images, anything form a plugin...
  • These data are loaded as JS objects : write a declaration interface, then use typescript
  • Send these typescript objects to React props

Queries

  • Posts : allMarkdownPost

  • Images :

      file{
          relativePath = *.jpg, *.png, *.jpeg, *.gif
          childImageSharp{   // aka GatsbyImageSharpFluid
              src
              srcSet
              base64
              aspectRatio
              sizes
          }
      }
    

Images

From Gatsby images doc:

This isn’t ideal. Optimized images should be easy and the default.

I don't quite agree with the default. There are major shortcoming

  • Theory: STUPID principles : P for Prematured Optimization
  • CSS : it's really HARD to change the css of the Gatsby Images
  • Complexity: it's a PNG, not a PHD

However, optimizing by default when content varies will avoid writers to upload 10Mb images, leaving you with a stalled a website.

So I give Gatsby a point and a try. Gatsby Images are in the starter kit and I recommand you to read the Image section in What I wished I knew before starting Gatsby

Fragments

...GatsbyImageSharpFluid ...GatsbyImageSharpFluid_tracedSVG : permet d'avoir un SVG placeholder

Trouble shooting

Check the render method of HotExportedComponent. Expected a string or a class/function but got: object.

Check you return a default value for the component

in src/templates/blog-roll.tsx:

export const BlogRoll = (props:any) => {}
export default BlogRoll;

Gotchas

  • You need to compile your js files next to typescript files
    • not in a dist/ directory
    • it's a bit nasty when you want to delete a file
    • #2

Still in question

  • Why lead: ./fc-logo.png is resolved as a string but image: ./fc-logo.png is resolved as an imageSharp
  • putting debugger in the code lead to the bad sourceMaps

About

Robust starter for Gatsby 2 : Use TS objects as source for React props, and don't spread GraphQL everywhere

Resources

License

Stars

Watchers

Forks

Packages

No packages published