Gatsby: dunno how to use 'gatsby-plugin-layout'...

[rchrdnsh]

I have made a site using Gatsby V2 and have gotten to the point of adding view transitions and now I'm running up against the 'pages' wall, where everything re-renders due to Gatsby V2 being page based, rather than view based.

So, I'm trying to use 'gatsby-plugin-layout' but I really don't know how to use it at all and the documentation for the plugin is really minimal, rather than being a full tutorial on how to use it properly.

A few questions:

1. I'm supposed to make an index.js file inside of a folder named layouts, but then I also have to have a file named index.js in my pages folder?
2. Why do I have to use this name twice? That seems a little...odd? I changed the name of the index.js file in the pages folder to home.js and the compiler yelled at me, so I changed it back, but then I'm running into a new issue with graphql, where I get this error:

GraphQL Error There was an error while compiling your site's GraphQL queries.
  Invariant Violation: GraphQLCompilerContext: Duplicate document named `SiteTitleQuery`. GraphQL fragments and roots must have unique names.
    t: Duplicate document named `SiteTitleQuery`. GraphQL fragments and roots must have unique names.

Dunno what this means really, but in my layout file I have a staticQuery, which I was under the impression could be used anywhere, no?

1. Is this when I'm supposed to use react context?
2. Can I put a graphql query inside of a context provider?
3. Is this the right approach?
4. Can I use a StaticQuery inside of the index.js layout file, which, for some reason, is not called layout.js or app.js?

I'm just really lost as to how to handle putting the is together and re-factoring this app using gatsby-plugin-layout.

@jlengstorf has been valiently trying to help me on the twitter, but I'm thinking more minds on this could certainly help, hence the GitHub issue.

Anyways, if anybody has some thoughts they would be much appreciated.

Thank you in advance XD

[DSchau]

I'm supposed to make an index.js file inside of a folder named layouts, but then I also have to have a file named index.js in my pages folder?

layouts/index.js is a layout component, i.e. it will be a parent to any files/routes in pages. They're separate because pages are used for _routing_ whereas layouts/index.js wraps a page component, if that makes sense?

index.js file in the pages folder to home.js

The name of the .js files in pages directly correspond to a route, so what you've created now is a route at /home. Probably want to keep it index, which follows the convention most familiar to people, I'd think!

GraphQL Error There was an error while compiling your site's GraphQL queries

Sounds like you just need to rename the query. When you do something like the below

query WhateverQuery {
  # your data
}

WhateverQuery needs to be unique in your Gatsby application. A convention I follow is naming by the route/type of thing, e.g. if using a static query in a component, SomeComponentSiteMetadataQuery, or if in a route, IndexQuery, AboutQuery, etc.

Is this when I'm supposed to use react context?

I'd need more info here as to what you're trying to accomplish? Also I don't know what "this" refers to, exactly!

Can I put a graphql query inside of a context provider?

What are you trying to do?

Can I use a StaticQuery inside of the index.js layout file

Yep! StaticQuery is actually valid pretty much anywhere in src/, so feel free to use it where it makes most sense. In effect, StaticQuery is useful anywhere, wheras page queries (src/pages/about.js, src/pages/index.js) don't _have_ to use a StaticQuery, but they certainly can! Does that make sense?

Hopefully I answered most of them; thanks for opening the issue!

[rchrdnsh]

hmmmm...I'm prolly asking the wrong questions.

The thing is, I don't even know where to start...

I installed the gatsby-plugin-layout and added it to the config file, but from there I really have no idea how to refactor my V2 site to properly use the plugin. My site's architecture basically follows the V2 tutorial where I have a layout component and every page is wrapped with it, but when finally trying to add animations from one page to the next, the navigation in the layout component is animating as well, which should certainly not be happening. I then read that this is because the layout component is re-rendered on every route change, which is so so so not what I want to happen, so I found gatsby-plugin-layout, which supposedly makes persistent UI elements actually persist, rather then mess everything up. So now I'm trying to re-factor this V2 app into a V1 app basically? but I just don't know how to do that and every time I try something out I get a plethora of errors, without really having any clue what to do next, unfortunately.

This is where I'm at now, and really don't even know what step 1 is supposed to be.

Does that make sense?

[DSchau]

I installed the gatsby-plugin-layout and added it to the config file, but from there I really have no idea how to refactor my V2 site to properly use the plugin

The general idea with that plugin is that you don't _have_ to refactor your layout component or page components to accommodate. It's generally used for some of the reasons you listed (e.g. keep page context, animations, etc.), but it's also provided to ease the migration path.

So now I'm trying to re-factor this V2 app into a V1 app basically

Really, nothing needs to be re-factored! Generally, just keep things as is, follow the migration guide for upgrading breaking changes in v1 -> v2--although don't follow the layout change if you're using gatsby-plugin-layout--and you should be good to go!

I am guessing your issues are unrelated to layout plugin specifically. Do you have a reproduction or repo you could share? Or more specific errors would help, as well!

[rchrdnsh]

ok, here's my steps. from my current V2 site design

1. I instal and added the plugin to the config, then run gatsby develop and I get this error:

error UNHANDLED REJECTION


  Error: Couldn't find layout component at "/Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/src/layouts/in  dex.
  Please create layout component in that location or specify path to layout component in gatsby-config.js

  - render-page.js:1163 Object../node_modules/gatsby-plugin-layout/wrap-page.js
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:1163:11

  - render-page.js:30 __webpack_require__
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:30:30

  - render-page.js:1137 Object../node_modules/gatsby-plugin-layout/gatsby-ssr.js
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:1137:27

  - render-page.js:30 __webpack_require__
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:30:30

  - render-page.js:116 Object../.cache/api-runner-ssr.js
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:116:11

  - render-page.js:30 __webpack_require__
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:30:30

  - render-page.js:470 Module../.cache/develop-static-entry.js
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:470:73

  - render-page.js:30 __webpack_require__
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:30:30

  - render-page.js:94
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:94:18

  - render-page.js:97
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:97:10

  - render-page.js:3 webpackUniversalModuleDefinition
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:3:20

  - render-page.js:10 Object.<anonymous>
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/public/render-page.js:10:3

  - loader.js:688 Module._compile
    internal/modules/cjs/loader.js:688:30

  - loader.js:699 Object.Module._extensions..js
    internal/modules/cjs/loader.js:699:10

  - loader.js:598 Module.load
    internal/modules/cjs/loader.js:598:32

  - loader.js:537 tryModuleLoad
    internal/modules/cjs/loader.js:537:12

so then I do this is my config file to tell it where the layout.js file is:

{
      resolve: `gatsby-plugin-layout`,
      options: {
          component: require.resolve(`./components/layout.js`)
      },
    },

and I get this error:

error We encountered an error while trying to load your site's gatsby-config. Please fix the error and try again.


  Error: Cannot find module './components/layout.js'

  - loader.js:580 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:580:15

  - v8-compile-cache.js:162 Function.require.resolve
    [alma-layout-test]/[v8-compile-cache]/v8-compile-cache.js:162:23

  - gatsby-config.js:10 Object.<anonymous>
    /Users/rchrdnsh/Dropbox/Code/Gatsby/alma-layout-test/gatsby-config.js:10:30

  - v8-compile-cache.js:178 Module._compile
    [alma-layout-test]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - loader.js:699 Object.Module._extensions..js
    internal/modules/cjs/loader.js:699:10

  - loader.js:598 Module.load
    internal/modules/cjs/loader.js:598:32

  - loader.js:537 tryModuleLoad
    internal/modules/cjs/loader.js:537:12

  - loader.js:529 Function.Module._load
    internal/modules/cjs/loader.js:529:3

  - loader.js:636 Module.require
    internal/modules/cjs/loader.js:636:17

  - v8-compile-cache.js:159 require
    [alma-layout-test]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - get-config-file.js:33
    [alma-layout-test]/[gatsby]/dist/bootstrap/get-config-file.js:33:22

  - Generator.next

  - debuggability.js:313 Promise._execute
    [lib]/[gatsby-cli]/[bluebird]/js/release/debuggability.js:313:9

  - promise.js:483 Promise._resolveFromExecutor
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:483:18

  - promise.js:79 new Promise
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:79:10

  - get-config-file.js:53 getConfigFile
    [alma-layout-test]/[gatsby]/dist/bootstrap/get-config-file.js:53:27

  - index.js:94
    [alma-layout-test]/[gatsby]/dist/bootstrap/index.js:94:38

  - Generator.next

so I don't know what to do next, and this is where ai'm currently stuck.

[DSchau]

Is it not at ./src/components/layout.js?

[rchrdnsh]

ah, crap buckets! The config file is not in the src folder...Im so dumb! Thank you @DSchau XD

Although, now I have two nav menus, which should not be happening...

any thoughts as to why that might be? You have been very helpful so far, thank you! I've been wrapping my brain around this for days...

[DSchau]

@rchrdnsh are you kind of following a hybrid approach? My guess is you have imported the Layout component into various pages, when if you use gatsby-plugin-layout, you explicitly shouldn't wrap any pages!

[rchrdnsh]

ok, so liiiiiittle bit of refactoring then ;-P

k, so I replaced the <Layout> with <div> and this happened...

so that's no bueno, but then I was like...what about a fragment, like this <>...

then this happened:

Woo hoo!!!!!!

k, gonna try and work with this and see what happens, but that really was a whole bunch simpler then I thought it would be!

I'm thinking of doing a PR to make the docs better for that plugin, no?

and thank you again @DSchau and @jlengstorf!

[rchrdnsh]

I'll close this for now, hoping to not run into any more issues :-)

[jlengstorf]

Great news, @rchrdnsh — we'd love to get the docs updates to help people understand how all this works a bit better. Glad you got it worked out!

[rchrdnsh]

hey @DSchau and @jlengstorf , running into a bit of an issue and it seems like it might be due to gatsby-plugin-layout...after installing the plugin and getting it to work, a few gatsby develop's later the build ends up getting stuck and I see these error messages:

success open and validate gatsby-configs — 0.005 s
success load plugins — 0.148 s
success onPreInit — 0.678 s
success delete html and css files from previous builds — 0.044 s
success initialize cache — 0.011 s
success copy gatsby files — 0.082 s
success onPreBootstrap — 0.004 s
success source and transform nodes — 0.390 s
success building schema — 0.201 s
success createPages — 0.037 s
success createPagesStatefully — 0.027 s
success onPreExtractQueries — 0.003 s
success update schema — 0.096 s
success extract queries from components — 0.108 s
⠁
(sharp:917): GLib-GObject-WARNING **: 16:19:16.374: cannot register existing type 'VipsObject'

(sharp:917): GLib-CRITICAL **: 16:19:16.374: g_once_init_leave: assertion 'result != 0' failed

(sharp:917): GLib-GObject-WARNING **: 16:19:16.374: invalid class cast from 'VipsForeignLoadCsv' to '<invalid>'
⠂ run graphql queries — 9/10 199.14 queries/second

and when I run the previous version without gatsby-plugin-layout installed it works...I don't know where to begin to figure out what these errors mean...I have not changed anything else anywhere in the app, just added the plugin and removed the <Layout> component from each page...

Any thoughts what they might be?

[rchrdnsh]

I ended up deleting the node_modules folder manually and then running npm install in the project to re-install the goodies and it seems to be working again now...

Is this something that people do often? Is it a good idea? Is it safe to do?

[jlengstorf]

Vips is part of the Sharp dependency, which sometimes causes issues that require deleting node_modules. There's no harm in doing that; in an ideal world it would never happen, but if a mystery bug shows up that doesn't make sense, it doesn't hurt to remove it and start with a fresh install.