Support custom GraphQL fragments inside gatsby-node.js

[baobabKoodaa]

How can I use custom GraphQL fragments inside gatsby-node? Here is more information on what I've tried so far, but it would perhaps be better if someone just provided a working example. The example in the docs doesn't work when applied to gatsby-node (or I'm doing something wrong).

[LekoArts]

You can use normal string interpolation:
https://github.com/LekoArts/portfolio/blob/cc0d70d118c0d06736fccec43afa88cf6b42ce59/gatsby-node.js#L116

[baobabKoodaa]

The problem with string interpolation is that it can't be used inside page queries or static queries. I thought fragments were supposed to solve the issue of repetition (and dependencies) inside GraphQL queries?

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[wardpeet]

Is it possible to give us some more information what you tried and create a reproduction so we can easily test this out.

[baobabKoodaa]

@wardpeet Here is more information about various things I tried: #12092

[realgt]

i just ran into the same issue trying to refactor my growing gatsby-node query into fragments stored elsewhere. hope theres a fix for this

[baobabKoodaa]

@realgt If you only need those fragments inside a gatsby-node query, then string interpolation is not a bad solution. I actually ran into this issue again yesterday, but I need to use the fragments in static queries as well, which means I can't use string interpolation and now I have duplicated code :(

[realgt]

@baobabKoodaa string interpolation just seems like a dirty solution, the graphql equivalent of sql injection

[seidtgeist]

Chiming in here to report that I expected my GraphQL fragments to be available in gatsby-node.js.

[KyleAMathews]

It would make sense to support your fragments inside gatsby-node.js as well. This would require some refactoring as we don't collect all the fragments until we run page/static queries later in bootstrap. But we should be able to move that earlier and use the Relay Compiler to "expand" queries with fragments into the full query when they're passed into the graphql function.

/cc @freiksenet

[chinanderm]

Sounds great. When will it happen? Stale items like this make Gatsby super frustrating.

[sibelius]

check this https://github.com/n1ru4l/relay-compiler-repl to understand how relay compiler transforms graphql queries and fragments

[Barsonax]

Any news on this?

[pilniczek]

I would appreciate more info as well. Thanks! :)

[addisonschultz]

Here to also say this would be awesome! I use the same query in gatsby-node as in other parts of my app, which can be long and I'd rather not repeat them 😬

[JonasJuss]

I would love this functionality as well!

[digital-flowers]

Here you go ;)

import { promisify } from "util";
import GatsbyParser from "gatsby/dist/query/file-parser";
import fs from "fs";
import path from "path";

/**
 * Collect all graphql queries from a directory
 * @param dirname
 * @returns {Promise<*>}
 */
export const collectGQLQueries = async dirname => {
  const parser = new GatsbyParser();
  const files = await promisify(fs.readdir)(dirname);
  const result = await parser.parseFiles(
    files.map(file => path.join(dirname, file))
  );
  return result
    .filter(item => item.doc && item.doc.kind === "Document")
    .map(doc => doc.text)
    .join("\n");
};

How to use:
1- add all your Fragments as queries inside the same directory:

2- make sure you use graphql to query them

3- Use the collectGQLQueries util to collect all fragments and just inject them inside gatsby-node

 // fragments
  const fragments = await collectGQLQueries(
     path.resolve(__dirname, "fragments")
  );
  // data
  const { data, errors } = await graphql(`
    ${fragments}
    {
      allContentfulPage {
        nodes {
          id
          contentful_id
          // ...
        }
     }
   }`);

[LpmRaven]

Any news on this?

[hasparus]

I had to change @digital-flowers' function a bit to pick fragments by name, since an unused fragment fails a query.

Here's the gist.

  const fragments = await collectGraphQLFragments(
    resolve(__dirname, "src/features"),
    ["TweetDiscussEditLinksDataOnMdx"]
  );

[cameronbraid]

How do you access fragments from gatsby-transformer-sharp ? I want to use them within create-pages.js

[cameronbraid]

Is there an api that allows injection of fragments into gatsby-node ?

[chinanderm]

Any update?

[MarinusElgaard]

Any update on this? Really want to get this solved :)

[toppsdown]

Throwing my hat in for this request. I'm using the same fragment across 4 different files (one of which is gatsby-node)

[wahidshafique]

Came here for this exact request, I want to generate "dynamic"-ish fragments on gatsby-node for localization purposes. The idea for my case is that the user has defined a list of languages that the app will use, and the fragment would query each one. The contentQuery would give me back an array of languages, string formatted to graphql

[whatever-lang] { childMdx  { body } }

ultimately I can then use this in static queries, as the user may decide to swap between languages mid-application. My localization hook on the frontend will already have the data ready to go.

fragment LangDataFragment on AirtableData {
    ${contentQuery('Languages_Used')}
}

[costh-netm]

Commenting to get an update on this request, facing this issue in my project aswell and had to duplicate fragment twice.

I am now using @digital-flowers solution and that works for now.

[julrich]

As another data point: We're also using a solution like described by @digital-flowers, but we'd much prefer not to inherit that technical debt in our theme!

We also had to filter for actually used fragments in the page, which is pretty involved as we're supporting page-builder type data sources where you can't say what components will be used on any given page / layout ahead of time.

[tony-gutierrez]

The @digital-flowers solution seems outdated, and I couldn't replicate it with the current FileParser.

Moving your framents into a large text chunk and interpolating doesn't work unless you use every fragment, and even then, the frags will have to be duplicated in code for your page queries.

[julrich]

FWIW: We're still using such an approach on 4.15+. Seems to still work for us, but also still involves a pre-processing step in our pipeline generating actual page queries with those fragments (amongst other things).