gatsby-source-directus fails to generate pages in Deferred Static Generation (DSG)

[zovanni]

Preflight Checklist

• I have completed all Troubleshooting Steps.
• I'm on the latest version of Directus.
• There's no other issue that already describes my problem.

Describe the Bug

Gatsby DSG fails using gatsby-source-directus.

I set up a directus with gatsby-source-directus. What do I want to achieve is to have some of my collections being built only at the first request, by using the deferred static generation.

To Reproduce

In gatsby-node.js

Here, in short, the defer : true should identify the products as DSG items. You can find the option at the end of this snippet

exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions

    await graphql(`
        {
          directus {
            product(limit: -1, filter: {status: {_eq: "published"}}) {
              id
              status
              product_code
            }
          }
        }
      `).then(result => {
        const templatePaths = {
            product: path.resolve(`./src/templates/product.js`),
        };

        products.forEach((node) => {
            createPage({
                path: `${path}/${node.product_code}`,
                component: templatePaths.product,
                context: {
                    language,
                    productID: parseInt(node.id),
                },
                /* 
                When set to true, it tells Gatsby to exclude the page from the build step and instead generate it during the first HTTP request:
                See https://www.gatsbyjs.com/docs/reference/rendering-options/deferred-static-generation/
                */
                defer: true, // <-- this is the option to set the DSG generation for certain contents
            })
        })
    })
}

In gatsby-config.js

batch: true in graphql options must be set to true, in order to work with the defer: true in gatsby-config.js.

module.exports = {
    plugins: [
        {
            resolve: '@directus/gatsby-source-directus',
            options: {
                url: `http://localhost:8055`,
                auth: {
                    token: `${token}`,
                },
                dev: {
                    refresh: '5s'
                },
                //[Optional] - defines extra options to be passed into gatsby-source-graphql. Useful for advanced use cases
                graphql: {
                    batch: true,
                    // See https://github.com/graphql/dataloader#new-dataloaderbatchloadfn--options
                    // for a full list of DataLoader options
                    dataLoaderOptions: {
                        maxBatchSize: 512,
                    },
                }
            },
        },
    ],
};

Errors Shown

Once the setup is completed, if you build everything, nothing fails, and every page is generated.

┌ src/templates/family.js
│ ├ D /prodotti/product_name
│ └ D ...355 more pages available
├ src/templates/product.js
│ ├ D /prodotti/ANOTHER-PRODUCT
│ └ D ...17875 more pages available
├ src/pages/404.js
│ ├   /en/404.html
│ └   ...7 more pages available
└ src/pages/index.js
  ├   /en/
  └   ...3 more pages available

  ╭────────────────────────────────────────────────────────────────╮
  │                                                                │
  │   (SSG) Generated at build time                                │
  │ D (DSG) Deferred static generation - page generated at runtime │
  │ ∞ (SSR) Server-side renders at runtime (uses getServerData)    │
  │ λ (Function) Gatsby function                                   │
  │                                                                │
  ╰────────────────────────────────────────────────────────────────╯

✨  Done in 43.97s.

BUT

Once you serve what's in the build, and you try to access at your i.e. localhost:9000/your-item, you get this:

http://localhost:9000/prodotti/my-product

Internal server error.

Which leads to this error:

Rendering html for "/prodotti/my-product" failed. nodeFetch is not a function

  **TypeError: nodeFetch is not a function**

---

POSSIBLE FIX

I already investigated for a possible solution
First, i tried to use only the gatsby-source-graphql plugin, i.e.

      resolve: "gatsby-source-graphql",
      options: {
        typeName: "Directus",
        fieldName: "directus",
        url: "http://localhost:8055/graphql",
        headers: {
          Authorization: `Bearer ${token}`,
        },
        batch: true,
        fetchOptions: {},
        dataLoaderOptions: {
          maxBatchSize: 512,
        },
      },
    },

This way, the pages are all correctly built as with gatsby-source-directus, and they are generated properly in deferred static generation, while on serve. Only, the graphql obviously does not contains all the necessary graphql items, such as dyrectus_system.

So I managed that the problem should be in the gatsby-source-directus.

If you check at this answer you can find that this was a problem common to gatsby-source-graphql too.

Therefore, I tried to change /node_modules/@directus/gatsby-source-directus/node_modules/gatsby-source-graphql/fetch.js
like this:

//BEFORE
// const nodeFetch = require(`node-fetch`); // this is passed to the Apollo Link

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

And now it somehow works. Pages are correctly generated in DSG BUT it is a dirty, quick not and resolutive working fix.
In example, with this line, gatsby images are not fetched. And there should be many other issues which I had not investigated yet

What version of Directus are you using?

9.7.0

What version of Node.js are you using?

16.14.0

What database are you using?

MySql

What browser are you using?

Chrome, Brave

What operating system are you using?

Linux 5.10.76-linuxkit

How are you deploying Directus?

Docker

[spatialy]

Hi @zovanni you take any other route or have a solution in the meantime this is solved. We are seeing the same

[rijkvanzanten]

Linear: ENG-63