GraphQL fields with spaces in their names always return null

[edbrannin]

Description

GraphQL fields with whitespace in their names are normalized to contain underscores instead, which is great -- but the values for these fields are all null.

This probably happens with any other not-completely-alphanumeric field name (not just whitespace).

I've minimally reproduced this at https://github.com/edbrannin/gatsby-4751

(I'm open to making a PR, but I'm having a hard time figuring out where the schema-field normalization happens[1] and where would be appropriate to update the actual nodes.)

[1] packages/gatsby/src/schema/create-key.js?

Steps to reproduce

See https://github.com/edbrannin/gatsby-4751/commit/5ba916264c67e731b63dc45eaca8761a76ca1f2f

1. Make a node with a field named Field Name and value Field Value
   • (I originally did this with gatsby-source-airtable)
2. Write a query for that field in the GraphiQL Explorer for Field_Name
3. Execute the query

(This is also kevzettler/gatsby-source-airtable#2, but near as I can tell the header normalization is happening in Gatsby and it makes sense to keep the field normalization in the same place.)

Expected result

Return a node including { Field_Name: "Field Value" }

Actual result

Returns a node including { Field_Name: null }

Environment

• Gatsby version (npm list gatsby): npm ERR! missing: gatsby@1.9.241, required by gatsby-starter-default@1.0.0 (but running yarn develop works just fine)
• gatsby-cli version (gatsby --version): 1.9.223 (globally installed)
• Node.js version: v9.5.0
• Operating System: OS X 10.12.6

File contents (if changed):

gatsby-node.js:

 // You can delete this file if you're not using it
const crypto = require(`crypto`)

exports.sourceNodes = ({ boundActionCreators }) => {
  const { createNode } = boundActionCreators
  // Create nodes here.

  const row = {};
  row.NoWhitespace = "OK";
  row['Has Whitespace'] = "OK";

  const gatsbyNode = Object.assign({
    // Required Gatsby fields
    id: `ProblemNode1`,
    parent: "__SOURCE__",
    children: [],
    internal: {
      type: `ProblemNode`,
      contentDigest: crypto
      .createHash("md5")
      .update(JSON.stringify(row))
      .digest("hex")
    }
  }, row);

  createNode(gatsbyNode);
}

src/psges/index.js:

import React from 'react'
import Link from 'gatsby-link'

const IndexPage = ({
  data,
}) => (
  <div>
    <pre>{JSON.stringify(data, null, 2)}</pre>
  </div>
)

export default IndexPage

export const pageQuery = graphql`
  query Gatsby4751 {
    allProblemNode {
      edges {
        node {
          NoWhitespace
          Has_Whitespace
        }
      }
    }
  }
`;

Output:

{
  "allProblemNode": {
    "edges": [
      {
        "node": {
          "NoWhitespace": "OK",
          "Has_Whitespace": null
        }
      }
    ]
  }
}

[edbrannin]

(Updated the main comment with a minimal reproduction)

[joewood]

I'm seeing this too, it impacts the Excel transform.

[pieh]

I have PR that hopefully will fix this issue - https://github.com/gatsbyjs/gatsby/pull/5155

[reviewher]

@pieh since #5155 was merged, is this issue still relevant?

[kakadiadarpan]

@pieh has this issue been fixed with #5155?

[pieh]

Ah, yeah - thanks for bringing this up :)