Gatsby: GraphQL fields with spaces in their names always return null

Created on 29 Mar 2018 · 6Comments · Source: gatsbyjs/gatsby

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

Make a node with a field named Field Name and value Field Value
- (I originally did this with gatsby-source-airtable)
Write a query for that field in the GraphiQL Explorer for Field_Name
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: [email protected], required by [email protected] (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
        }
      }
    ]
  }
}

bug

Source