Gatsby: error GraphQL Error Field "slug" is not defined by type MarkdownRemarkFieldsFilterInput.

Created on 20 Apr 2019 · 7Comments · Source: gatsbyjs/gatsby

Description

I decided to port my blog to TypeScript + Graphql-Codegen for better type safety, it was going pretty well, but then some weird error with slug not being found in the blog index page
happened. I googled the whole world including all your closed issues couldn't find the solution, or whichever solution I used did not work.

Here is the branch

Steps to reproduce

clone https://github.com/kapral18/karenjs.com/tree/TS
yarn
yarn start

Expected result

Should compile without errors

Actual result

error GraphQL Error Field "slug" is not defined by type MarkdownRemarkFieldsFilterInput.

  file: /Users/cw1726/code/karenjs.com/src/pages/blog/index.tsx

   1 |
   2 |     query BlogPostsPageQuery {
   3 |         site {
   4 |             siteMetadata {
   5 |                 title
   6 |             }
   7 |         }
   8 |         posts: allMarkdownRemark(
>  9 |             filter: { fields: { slug: { glob: "/blog/**" } } }
     |                                 ^
  10 |             sort: { fields: [frontmatter___date], order: DESC }
  11 |         ) {
  12 |             edges {
  13 |                 node {
  14 |                     id
  15 |                     excerpt(pruneLength: 160)
  16 |                     fields {
  17 |                         slug
  18 |                         readingTime {
  19 |                             text

Environment

System:
OS: macOS 10.14.4
CPU: (4) x64 Intel(R) Core(TM) i7-4578U CPU @ 3.00GHz
Shell: 5.0.3 - /usr/local/bin/bash
Binaries:
Node: 10.15.3 - /var/folders/0c/8zw72kmd49g992whhxk2s3600000gp/T/yarn--1555796072584-0.6595269394296941/node
Yarn: 1.15.2 - /var/folders/0c/8zw72kmd49g992whhxk2s3600000gp/T/yarn--1555796072584-0.6595269394296941/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
Languages:
Python: 2.7.16 - /usr/local/bin/python
Browsers:
Chrome: 73.0.3683.103
Safari: 12.1
npmPackages:
gatsby: 2.3.25 => 2.3.25
gatsby-cli: 2.5.9 => 2.5.9
gatsby-image: 2.0.39 => 2.0.39
gatsby-plugin-catch-links: 2.0.13 => 2.0.13
gatsby-plugin-eslint: 2.0.4 => 2.0.4
gatsby-plugin-google-analytics: 2.0.18 => 2.0.18
gatsby-plugin-manifest: 2.0.29 => 2.0.29
gatsby-plugin-netlify: 2.0.14 => 2.0.14
gatsby-plugin-nprogress: 2.0.10 => 2.0.10
gatsby-plugin-offline: 2.0.25 => 2.0.25
gatsby-plugin-react-helmet: 3.0.12 => 3.0.12
gatsby-plugin-robots-txt: 1.4.0 => 1.4.0
gatsby-plugin-sharp: 2.0.35 => 2.0.35
gatsby-plugin-sitemap: 2.0.12 => 2.0.12
gatsby-plugin-styled-components: 3.0.7 => 3.0.7
gatsby-plugin-typescript: 2.0.12 => 2.0.12
gatsby-remark-better-embed-video: 2.4.0 => 2.4.0
gatsby-remark-copy-linked-files: 2.0.11 => 2.0.11
gatsby-remark-emoji-unicode: 0.1.0 => 0.1.0
gatsby-remark-external-links: 0.0.4 => 0.0.4
gatsby-remark-images: 3.0.10 => 3.0.10
gatsby-remark-prismjs: 3.2.8 => 3.2.8
gatsby-remark-reading-time: 1.0.1 => 1.0.1
gatsby-remark-responsive-iframe: 2.1.1 => 2.1.1
gatsby-remark-smartypants: 2.0.9 => 2.0.9
gatsby-source-filesystem: 2.0.29 => 2.0.29
gatsby-transformer-json: 2.1.11 => 2.1.11
gatsby-transformer-remark: 2.3.8 => 2.3.8
gatsby-transformer-sharp: 2.1.18 => 2.1.18

awaiting author response

Source

kapral18

Most helpful comment

@kapral18 i've been tinkering with your code and it looks like i have a solution. Here are the steps i took to solve your issue.

Cloned the repo you suplied and installed the dependencies for typescript branch.
Issued gatsby develop first time and did see the error and a bunch of warnings like you can see below and the error in question.
To see what might be the issue, i adjusted out the templates where the graphql query for the value was being used, namely src/templates/About/index.tsx, src/templates/BlogPost/index.tsx, also src/pages/index.jsx. to avoid any graphql queries at all, just render something.
Opened up http://localhost:8000/___graphql and tried to enter the query you have defined in gatsby-node.js file and as soon as start typing slug , the following happens. There's no slug field defined, as you can see below:
Just to be sure, i added some famous console.log() inside createPages and onCreateNode what was being done and if the functions were being hit. Transforming it into:

exports.createPages = ({ graphql, actions }) => {
    console.log("====================================");
    console.log(`createPages entered`);
    console.log("====================================");

    const { createPage } = actions;

    return graphql(`
        {
            posts: allMarkdownRemark(
                filter: { fields: { slug: { glob: "/blog/**" } } }
                sort: { fields: [frontmatter___date], order: DESC }
                limit: 1000
            ) {
                edges {
                    node {
                        fields {
                            slug
                        }
                        frontmatter {
                            title
                        }
                    }
                }
            }
            other: allMarkdownRemark(
                filter: { fields: { slug: { glob: "!/blog/**" } } }
            ) {
                edges {
                    node {
                        fields {
                            slug
                        }
                        frontmatter {
                            title
                            template
                        }
                    }
                }
            }
        }
    `).then((result) => {
        if (result.errors) {
            throw result.errors;
        }
        const { posts, other } = result.data;
        console.log("====================================");
        console.log(`posts data:${JSON.stringify(posts, null, 2)}`);
        console.log("====================================");
        console.log(`other data:${JSON.stringify(other, null, 2)}`);
        console.log("====================================");
        posts.edges.forEach(({ node }, index, allPosts) => {
             const prev =
                index === allPosts.length - 1 ? null : allPosts[index + 1].node;
            const next = index === 0 ? null : allPosts[index - 1].node;
            createPage({
                path: node.fields.slug,
                component: getTemplate(),
                context: {
                    slug: node.fields.slug,
                    prev,
                    next
                }
            });
        });
        other.edges.forEach(({ node }) => {
            createPage({
                path: node.fields.slug,
                component: getTemplate(node.frontmatter.template),
                context: {
                    slug: node.fields.slug
                }
            });
        });
    });
};

exports.onCreateNode = ({ node, actions, getNode }) => {
    console.log("====================================");
    console.log(`node data:${JSON.stringify(node, null, 2)}`);
    console.log("====================================");
    if (node.internal.type !== "MarkdownRemark") return;

    const { permalink } = node.frontmatter;

    const { createNodeField } = actions;
    const slug = permalink || createFilePath({ node, getNode });

    createNodeField({
        node,
        name: "slug",
        value: slug
    });
};

Issuing gatsby develop or gatsby build every time, the build would go through but nothing was being written in the console, it was as if the gatsby-node.js was not being hit for some reason. And with that the data not being transformed, and the slug field created.
Modifying the way the packages/plugins are imported did the trick. Instead of:

import ....

modifying it to

const path = require("path");
const { createFilePath } = require("gatsby-source-filesystem");

Solved the issue. The functions were hit and graphql query you have in gatsby-node.js will work
As you can see below
5_build_ok

Feel free to provide feedback, so that we can close this issue.

jonniebigodes on 21 Apr 2019

🎉2 👍1

All 7 comments

@kapral18 i've picked up on your issue, i'm cloning your repository. Let me take a look, will post with a detailed solution shortly, at the very latest monday, because easter and some traditions have to be met. Do you mind the wait?

jonniebigodes on 21 Apr 2019

👍1

@jonniebigodes hey man of course, thanks for fast response and thanks for your time.

kapral18 on 21 Apr 2019

@kapral18 Does it work if you keep the imports in gatsby-node.js in commonjs format?

stefanprobst on 21 Apr 2019

👍1

@stefanprobst yes it works with requires. Can you give more details why that happens? Thank you.

kapral18 on 21 Apr 2019

@kapral18 i've been tinkering with your code and it looks like i have a solution. Here are the steps i took to solve your issue.

Cloned the repo you suplied and installed the dependencies for typescript branch.
Issued gatsby develop first time and did see the error and a bunch of warnings like you can see below and the error in question.
To see what might be the issue, i adjusted out the templates where the graphql query for the value was being used, namely src/templates/About/index.tsx, src/templates/BlogPost/index.tsx, also src/pages/index.jsx. to avoid any graphql queries at all, just render something.
Opened up http://localhost:8000/___graphql and tried to enter the query you have defined in gatsby-node.js file and as soon as start typing slug , the following happens. There's no slug field defined, as you can see below:
Just to be sure, i added some famous console.log() inside createPages and onCreateNode what was being done and if the functions were being hit. Transforming it into:

exports.createPages = ({ graphql, actions }) => {
    console.log("====================================");
    console.log(`createPages entered`);
    console.log("====================================");

    const { createPage } = actions;

    return graphql(`
        {
            posts: allMarkdownRemark(
                filter: { fields: { slug: { glob: "/blog/**" } } }
                sort: { fields: [frontmatter___date], order: DESC }
                limit: 1000
            ) {
                edges {
                    node {
                        fields {
                            slug
                        }
                        frontmatter {
                            title
                        }
                    }
                }
            }
            other: allMarkdownRemark(
                filter: { fields: { slug: { glob: "!/blog/**" } } }
            ) {
                edges {
                    node {
                        fields {
                            slug
                        }
                        frontmatter {
                            title
                            template
                        }
                    }
                }
            }
        }
    `).then((result) => {
        if (result.errors) {
            throw result.errors;
        }
        const { posts, other } = result.data;
        console.log("====================================");
        console.log(`posts data:${JSON.stringify(posts, null, 2)}`);
        console.log("====================================");
        console.log(`other data:${JSON.stringify(other, null, 2)}`);
        console.log("====================================");
        posts.edges.forEach(({ node }, index, allPosts) => {
             const prev =
                index === allPosts.length - 1 ? null : allPosts[index + 1].node;
            const next = index === 0 ? null : allPosts[index - 1].node;
            createPage({
                path: node.fields.slug,
                component: getTemplate(),
                context: {
                    slug: node.fields.slug,
                    prev,
                    next
                }
            });
        });
        other.edges.forEach(({ node }) => {
            createPage({
                path: node.fields.slug,
                component: getTemplate(node.frontmatter.template),
                context: {
                    slug: node.fields.slug
                }
            });
        });
    });
};

exports.onCreateNode = ({ node, actions, getNode }) => {
    console.log("====================================");
    console.log(`node data:${JSON.stringify(node, null, 2)}`);
    console.log("====================================");
    if (node.internal.type !== "MarkdownRemark") return;

    const { permalink } = node.frontmatter;

    const { createNodeField } = actions;
    const slug = permalink || createFilePath({ node, getNode });

    createNodeField({
        node,
        name: "slug",
        value: slug
    });
};

Issuing gatsby develop or gatsby build every time, the build would go through but nothing was being written in the console, it was as if the gatsby-node.js was not being hit for some reason. And with that the data not being transformed, and the slug field created.
Modifying the way the packages/plugins are imported did the trick. Instead of:

import ....

modifying it to

const path = require("path");
const { createFilePath } = require("gatsby-source-filesystem");

Solved the issue. The functions were hit and graphql query you have in gatsby-node.js will work
As you can see below
5_build_ok

Feel free to provide feedback, so that we can close this issue.

jonniebigodes on 21 Apr 2019

🎉2 👍1

Thanks @jonniebigodes and @stefanprobst. The issue is solved.

kapral18 on 21 Apr 2019

@kapral18 glad to hear. Going to close this if you don't mind.

jonniebigodes on 21 Apr 2019

Was this page helpful?

0 / 5 - 0 ratings

Related issues

[gatsby-remark-images] Adjust image quality?

dustinhorton · 3Comments

Don't trigger onRouteUpdate on hash updates

brandonmp · 3Comments

[using-page-transitions] page scrolls to top before transitioning to new page

dustinhorton · 3Comments

Error: Minified React error #130

jimfilippou · 3Comments

Support "traced placeholder" generation in gatsby-plugin-sharp

KyleAMathews · 3Comments