While giving Gatsby 4 a spin using gatsby-source-graphql, I found that DSG is not working :(

[pragmaticpat]

While giving Gatsby 4 a spin using gatsby-source-graphql, I found that DSG is not working :(

I've set my codebase https://github.com/laurenskling/using-gatsby-source-graphql to defer rendering the film pages, and now these pages get an errors prop.

Example on Gatsby Cloud: https://build-58701a40-9907-423a-9f26-9f80e4b3beea.gtsb.io/ZmlsbXM6Mg== Saying: Cannot query field "swapi" on type "Query". So the entire external Graphql isn't found.

Building and serving locally I do no get this specific error, but another one. I'm getting in my errors prop:

{
  message: "nodeFetch is not a function"
  path: (2) ['swapi', 'film']
}

Originally posted by @laurenskling in #33218 (comment)

[LekoArts]

From #33218 (reply in thread)

---

Probably caused by the issue in node-fetch when bundled with webpack: node-fetch/node-fetch#450

The fix described in node-fetch/node-fetch#450 (comment) should probably help. I encourage you to submit a PR! I guess it should just change a single line:

gatsby/packages/gatsby-source-graphql/src/fetch.js

Line 1 in 83ca1df

const nodeFetch = require(`node-fetch`)

to:

const nodeFetch = require(`node-fetch`).default

But please double check if it works for you in normal develop/build workflow!

[laurenskling]

Seems like that actually did the trick!

https://build-87bc0901-70ee-477a-8d31-740b2702abc4.gtsb.io/films/

laurenskling/using-gatsby-source-graphql@f1fb90a

[laurenskling]

This led me to investigate something.. Because gatsby-source-graphql allows you to bring your own fetch: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-graphql/src/gatsby-node.js#L42
and since nodeFetch was not a function, I tried passing something like cross-fetch to fix it, but that didn't do much.

Now I found, that fetch is undefined in the options when I log it out here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-graphql/src/gatsby-node.js#L34 not during build time, but when starting with gatsby serve. (this is also true for createLink by the way.) I guess it goes thru something that doesn't accept functions in the object?

[LekoArts]

Functions are not serializable so when passed in through options they won't be working.

[laurenskling]

Functions are not serializable so when passed in through options they won't be working.

Yeah this is what I figured. So now gatsby-source-graphql is able to run on the client, and passing functions doesn't work, this actually creates bugging experiences. The documentation states you can use fetch or createLink to add auth headers. So this will not be working in DSG. Should we change the docs, or?