How to connect the magic

[bradennapier]

Not really sure what is happening here. I am getting errors about queries i don't really see... I know im doing something wrong but not realy sure what is happening under the hood. This is with markdown but it seems to magically add to my queries in some way that I cant see.

Modifying examples that are provided I have something like this right now

const path = require('path');

exports.createPages = ({ boundActionCreators, graphql }) => {
  console.log('Create Pages');

  const { createPage } = boundActionCreators;

  const mdPageTemplate = path.resolve('src/templates/md.js');

  return graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            excerpt(pruneLength: 250)
            html
            id
            frontmatter {
              date
              path
              title
            }
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      return Promise.reject(result.errors);
    }
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.frontmatter.path,
        component: mdPageTemplate,
        context: {}, // additional data can be passed via context
      });
    });
  });
};

Then the template has something like this:

// eslint-disable-next-line
export const pageQuery = graphql`
  query MarkdownPageByPath($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        path
        title
      }
    }
  }
`;

This produces an error that it cant find the id. Not really sure why. I see the original queries the id but dont know how i can get it to pass said id into this and/or why this is happening when the original example looks like this.

The GraphQL query from /Users/bradennapier/Desktop/Dash OS/IDE/projects/whaleclub-scam/src/templates/md.js failed

        Errors:
          GraphQLError: Cannot read property 'id' of undefined
        Query:
          query MarkdownPageByPath(
  $path: String!
) {
  markdownRemark(frontmatter: {path: {eq: $path}}) {
    html
    frontmatter {
      date(formatString: "MMMM DD, YYYY")
      path
      title
    }
  }
}

[bradennapier]

Seems liek these queries are provided secret variables and information that I have no control of. I see the id in the query response but dont see how this links to the other query and/or how to pass the data since all the examples dont show this being done.

[KyleAMathews]

This is all under your control and it's a pretty simple system once you understand what's happening :-) the errors I agree can do a lot better (and will). Try going through the tutorial which walks you through step by step how things work. Would love your feedback on the tutorial!

[bradennapier]

The main thing here in my eyes is that this pageQuery seems like it should be a factory function not a string so we can expose what is happening here easily. Not sure. I get for sure it's probably fairly straight forward in the end. Love what it seems like its going to be.

[bradennapier]

So the id problem apparently is because:

---
title : "Main"
path: "index"
date: "2017-07-12T17:12:33.962Z"
---

needed to be:

---
title : "Main"
path: "/index"
date: "2017-07-12T17:12:33.962Z"
---

[bradennapier]

However every singel save gives me this:

Create Pages
error UNHANDLED REJECTION


  Error: Invariant Violation: /Users/bradennapier/Desktop/Dash OS/IDE/projects/whaleclub-scam/src/assets/index.js not found in the store components: {"/Users/bradennapier/Desktop/Dash OS/IDE/projects/whaleclub-scam/src/layouts/index.js":{"componentPath":"/Users/bradennapi  er/Desktop/Dash OS/IDE/projects/whaleclub-scam/src/layouts/index.js"},"/Users/bradennapier/Desktop/Dash OS/IDE/projects/whaleclub-scam/.cache/dev-404-page.js":{"componentPath":"/Users/bradennapier/Desktop/Dash OS/IDE/projects/whaleclub-scam/.cache/dev-404-page.js","quer  y":"query Dev404Page {\n  allSitePage(filter: {path: {ne: \"/dev-404-page/\"}}) {\n    totalCount\n    edges {\n      node {\n        path\n      }\n    }\n  }\n}\n"},"/Users/bradennapier/Desktop/Dash OS/IDE/projects/whaleclub-scam/src/templates/md.js":{"componentPath":  "/Users/bradennapier/Desktop/Dash OS/IDE/projects/whaleclub-scam/src/templates/md.js","query":"query MarkdownPageByPath(\n  $path: String!\n) {\n  markdownRemark(frontmatter: {path: {eq: $path}}) {\n    html\n    frontmatter {\n      date(formatString: \"MMMM DD, YYYY\"  )\n      path\n      title\n    }\n  }\n}\n"}}

  - invariant.js:42 invariant
    [whaleclub-scam]/[invariant]/invariant.js:42:15

  - query-watcher.js:98
    [whaleclub-scam]/[gatsby]/dist/internal-plugins/query-runner/query-watcher.js:98:9

  - Map.forEach

  - query-watcher.js:95
    [whaleclub-scam]/[gatsby]/dist/internal-plugins/query-runner/query-watcher.js:95:15

  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7

  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9


error Command failed with exit code 1.

Note that I am not referencing or using that file at any point. (the one in assets).

---

Additionally, i cant comment out a file to not have it referenced so it makes it difficult to make a file not used anymore without deleting it completely. Apparently any file in any part needs to be perfect or nothing works. Sometimes I want to keep the file for reference when needed.

[bradennapier]

netlify also gives me lots of weird errors I can't really figure out -- off topic but not even sure where I would start with this since I don't know why it happens:

  Error: Cannot find module '../build/Release/sharp.node'
  
  - module.js:11 require
    internal/module.js:11:18
  
  - constructor.js:8 Object.<anonymous>
    [repo]/[sharp]/lib/constructor.js:8:15
  
  - module.js:11 require
    internal/module.js:11:18
  
  - index.js:3 Object.<anonymous>
    [repo]/[sharp]/lib/index.js:3:15

and graphql errors

6:30:04 PM: GraphQL Error There was an error while compiling your site's GraphQL queries.
  Invariant Violation: GraphQLParser: Unknown field `html` on type `MarkdownRemark`. Source: document `MarkdownPageByPath` file: `GraphQL request`.

and some empty errors from something i didnt add to my config even

6:30:03 PM: error Plugin default-site-plugin returned an error
6:30:03 PM: 

  Error: 
6:30:03 PM: success createPages — 0.017 s

and sitemap gives errors

6:30:15 PM: error Plugin gatsby-plugin-sitemap returned an error
6:30:15 PM: 

  TypeError: Cannot read property 'edges' of null
  
  - internals.js:34 serialize
    [repo]/[gatsby-plugin-sitemap]/internals.js:34:24
  
  - gatsby-node.js:55 _callee$
    [repo]/[gatsby-plugin-sitemap]/gatsby-node.js:55:13
  
  - next_tick.js:131 _combinedTickCallback
    internal/process/next_tick.js:131:7
  
  - next_tick.js:180 process._tickCallback
    internal/process/next_tick.js:180:9

---

They likely aren't bugs but it could help to understand what things a new user is likely to run into when first setting things up. Would be nice to have better references at these times as-to what is happening.

I know y'all are likely working on such things!

Appreciate all the effort on this project.

[bradennapier]

Specifically it would appear impossible to use images in markdown.

6:38:47 PM: error Plugin gatsby-transformer-remark returned an error
6:38:47 PM: 

  Error: Cannot find module '../build/Release/sharp.node'
  
  - module.js:11 require
    internal/module.js:11:18
  
  - constructor.js:8 Object.<anonymous>
    [repo]/[sharp]/lib/constructor.js:8:15
  
  - module.js:11 require
    internal/module.js:11:18
  
  - index.js:3 Object.<anonymous>
    [repo]/[sharp]/lib/index.js:3:15
  
6:38:48 PM: success building schema — 0.337 s
6:38:48 PM: success createLayouts — 0.010 s
6:38:48 PM: Create Pages
6:38:48 PM: error Plugin default-site-plugin returned an error
6:38:48 PM: 

  Error: 
6:38:48 PM: success createPages — 0.018 s
6:38:48 PM: success createPagesStatefully — 0.005 s
6:38:48 PM: success onPreExtractQueries — 0.001 s
6:38:48 PM: error Plugin gatsby-transformer-remark returned an error
6:38:48 PM: 

  Error: Cannot find module '../build/Release/sharp.node'
  
  - module.js:11 require
    internal/module.js:11:18
  
  - constructor.js:8 Object.<anonymous>
    [repo]/[sharp]/lib/constructor.js:8:15
  
  - module.js:11 require
    internal/module.js:11:18
  
  - index.js:3 Object.<anonymous>
    [repo]/[sharp]/lib/index.js:3:15
  
6:38:48 PM: success update schema — 0.174 s
6:38:48 PM: GraphQL Error There was an error while compiling your site's GraphQL queries.
  Invariant Violation: GraphQLParser: Unknown field `html` on type `MarkdownRemark`. Source: document `MarkdownPageByPath` file: `GraphQL request`.

If I take out the images plugin then this error does not occur anymore but the rendered page does not work with any images I try to use in the markdown.

[jquense]

Side comment, we should open an umbrella issue for bad errors so folks who want to can jump in and fix em.

[KyleAMathews]

Yeah, ideally the errors would guide you back to the blessed path instead of being inscrutable.

Best thing we can offer now is you compare your site to one of the starters e.g. https://github.com/gatsbyjs/gatsby-starter-blog and see what things are different.

The sharp.node error seems like you had an NPM install error on Netlify. You should click rebuild and clear the build cache.

[KyleAMathews]

Also the tutorial :-)

[bradennapier]

Now I am getting it randomly locally.. This is maddening.

With remark-images:

{
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
              // Remove the default behavior of adding a link to each
              // image.
              // linkImagesToOriginal: false,
              // Analyze images' pixel density to make decisions about
              // target image size. This is what GitHub is doing when
              // embedding images in tickets. This is a useful setting
              // for documentation pages with a lot of screenshots.
              // It can have unintended side effects on high pixel
              // density artworks.
              //
              // Example: A screenshot made on a retina screen with a
              // resolution of 144 (e.g. Macbook) and a width of 100px,
              // will be rendered at 50px.
              //
              // Defaults to false.
              // sizeByPixelDensity: true,
            },
          },
        ],
      },
    },

I get the following:

$ gatsby develop
success delete html files from previous builds — 0.016 s
success open and validate gatsby-config.js — 0.005 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success copy gatsby files — 0.027 s
success onPreBootstrap — 0.007 s
success source and transform nodes — 0.213 s
error Plugin gatsby-transformer-remark returned an error


  Error: Cannot find module '../build/Release/sharp.node'

  - module.js:11 require
    internal/module.js:11:18

  - constructor.js:8 Object.<anonymous>
    [whaleclub-scam]/[gatsby-plugin-sharp]/[sharp]/lib/constructor.js:8:15

  - module.js:11 require
    internal/module.js:11:18

  - index.js:3 Object.<anonymous>
    [whaleclub-scam]/[gatsby-plugin-sharp]/[sharp]/lib/index.js:3:15


success building schema — 0.205 s
success createLayouts — 0.009 s
⠁ Create Pages
error Plugin default-site-plugin returned an error


  Error:

success createPages — 0.017 s
success createPagesStatefully — 0.005 s
success onPreExtractQueries — 0.001 s
error Plugin gatsby-transformer-remark returned an error


  Error: Cannot find module '../build/Release/sharp.node'

  - module.js:11 require
    internal/module.js:11:18

  - constructor.js:8 Object.<anonymous>
    [whaleclub-scam]/[gatsby-plugin-sharp]/[sharp]/lib/constructor.js:8:15

  - module.js:11 require
    internal/module.js:11:18

  - index.js:3 Object.<anonymous>
    [whaleclub-scam]/[gatsby-plugin-sharp]/[sharp]/lib/index.js:3:15


success update schema — 0.132 s
GraphQL Error There was an error while compiling your site's GraphQL queries.
  Invariant Violation: GraphQLParser: Unknown field `html` on type `MarkdownRemark`. Source: document `MarkdownPageByPath` file: `GraphQL request`.

success extract queries from components — 0.062 s
success run graphql queries — 0.002 s
success write out page data — 0.002 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 2.244 s

---

Without it

$ gatsby develop
success delete html files from previous builds — 0.019 s
success open and validate gatsby-config.js — 0.005 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success copy gatsby files — 0.033 s
success onPreBootstrap — 0.010 s
success source and transform nodes — 0.275 s
success building schema — 0.233 s
success createLayouts — 0.009 s
⠁ Create Pages
success createPages — 0.068 s
success createPagesStatefully — 0.007 s
success onPreExtractQueries — 0.001 s
success update schema — 0.146 s
success extract queries from components — 0.096 s
success run graphql queries — 0.015 s
success write out page data — 0.003 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 3.273 s

[KyleAMathews]

You need to remove your node_modules directory and reinstall. If that's not working — you could also try running npm rebuild sharp.

[bradennapier]

It's weird, so in development I need to make sure sharp is not in my dependencies. But before I upload it to netlify i need to add it to dependencies or the same issue happens.

[jessicavrooyen]

This seemed to solve the issue for me. Deleting the node_modules and doing a yarn install. Thank you.

[BrandonSM]

Deleting the node_modules folder and running yarn install && yarn develop again made the blog post show up.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[sabbakeynejad]

@BrandonSM Thanks worked for me! Not sure why the error was pointing to the Graph data API tho