feat(gatsby): Handle duplicated fragment definitions

[sidharthachatterjee]

Now that we run babel-loader for all dependencies after #14111, we should finally be able to support queries in dependencies!

This pull request adds node_modules as one of the folders to parse through. There are a couple of things to consider here though:

1. Parsing through everything causes a GraphQL Error: RelayParser: Encountered duplicate defintitions for one or more documents: each document must have a unique name because of GatsbyImageSharpFixed etc (assuming these are coming from gatsby-plugin-sharp) My quick fix for this was filtering out any paths that contain /gatsby/ but of course we can't do that. How should we filter these out?

2. This significantly slows down the extract queries from components phase since it now has to parse ~18000 files compared to like 10 before. One way to speed this up would be to filter deps by only ones that have gatsby as a dep or peer dep (since they would need the graphql export from gatsby to query)

Thoughts?

Todo

• Better heuristic for filtering out duplicate fragments
• Better filter to reduce number of files parsed

How do I test this?

Install gatsby-seo from npm (our SEO component extracted to a separate package) and use as a dependency.

Edit

We've reverted the addition to parsing node_modules because it depends on some other follow up work by @wardpeet. This PR just handles fragment duplication for now.

[KyleAMathews]

One way to speed this up would be to filter deps by only ones that have gatsby as a dep or peer dep (since they would need the graphql export from gatsby to query)

Played a bit with this idea:

var rpt = require("read-package-tree")
rpt(
  __dirname,
  function(node, kidName) {
    // optional filter function– if included, each package folder found is passed to
    // it to see if it should be included in the final tree
    // node is what we're adding children to
    // kidName is the directory name of the module we're considering adding
    // return true -> include, false -> skip
    return /gatsby/.test(kidName)
  },
  function(er, data) {
    console.log({ data })
    console.log(data.children)
  }
)

This would require restricting queries to packages that include gatsby in their package name e.g. @sidharthachatterjee/gatsby-seo — which IMO is a reasonable restriction since the component wouldn't work outside of Gatsby.

[pieh]

🌮