GraphQL Error for empty string path when converting relative urls

[kara-todd]

Description

Empty string value throws an error for image paths when manually defined with a schema.graphql file.

Note, this only seems to happen when using a Netlify style /static directory and re-writing frontmatter image paths to be relative.

Steps to reproduce:

1. Setup demo repo (branch: broken)
   • git clone --branch broken [email protected]:kara-todd/gastby-image-bug.git
   • Change into directory yarn install; yarn develop
   • The server should start up on http://localhost:8000/ and http://localhost:8000/___graphql
2. Go to http://localhost:8000/___graphql and run the following:

     query {
       allMarkdownRemark {
         nodes {
           fileAbsolutePath
           frontmatter {
             image {
               id
             }
           }
         }
       }
     }

Expected result

Image ids should be returned for all provided images, and null for empty image strings:

{
  "data": {
    "allMarkdownRemark": {
      "nodes": [
        {
          "fileAbsolutePath": "/gastby-image-bug/src/pages/page-3.md",
          "frontmatter": {
            "image": {
              "id": "3f056194-0573-512f-b06d-b1a25d747467"
            }
          }
        },
        {
          "fileAbsolutePath": "/gastby-image-bug/src/pages/page-2.md",
          "frontmatter": {
            "image": {
              "id": "143c331d-39bb-5656-b887-6047612faaa0"
            }
          }
        },
        {
          "fileAbsolutePath": "/gastby-image-bug/src/pages/page-1.md",
          "frontmatter": {
            "image": null
          }
        }
      ]
    }
  }
}

Actual result

An array of errors containing "message": "Cannot return null for non-nullable field File.id.",

{
  "errors": [
    {
      "message": "Cannot return null for non-nullable field File.id.",
      "locations": [
        {
          "line": 6,
          "column": 13
        }
      ],
      "path": [
        "allMarkdownRemark",
        "nodes",
        0,
        "frontmatter",
        "image",
        "id"
      ],
      "stack": [
        "Error: Cannot return null for non-nullable field File.id.",
        "    at completeValue (/gastby-image-bug/node_modules/graphql/execution/execute.js:573:13)",
        "    at completeValueCatchingError (/gastby-image-bug/node_modules/graphql/execution/execute.js:508:19)",
        "    at resolveField (/gastby-image-bug/node_modules/graphql/execution/execute.js:448:10)",
        "    at executeFields (/gastby-image-bug/node_modules/graphql/execution/execute.js:294:18)",
        "    at collectAndExecuteSubfields (/gastby-image-bug/node_modules/graphql/execution/execute.js:724:10)",
        "    at completeObjectValue (/gastby-image-bug/node_modules/graphql/execution/execute.js:714:10)",
        "    at completeValue (/gastby-image-bug/node_modules/graphql/execution/execute.js:603:12)",
        "    at completeValueCatchingError (/gastby-image-bug/node_modules/graphql/execution/execute.js:508:19)",
        "    at resolveField (/gastby-image-bug/node_modules/graphql/execution/execute.js:448:10)",
      ]
    }
  ]
}

Environment

gatsby info --clipboard

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i5-4690 CPU @ 3.50GHz
    Shell: 2.7.1 - /usr/local/bin/fish
  Binaries:
    Node: 9.10.1 - ~/.nodenv/versions/9.10.1/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 5.6.0 - ~/.nodenv/versions/9.10.1/bin/npm
  Browsers:
    Chrome: 74.0.3729.131
    Firefox: 65.0.1
    Safari: 12.1
  npmPackages:
    gatsby: ^2.4.3 => 2.4.3 
    gatsby-image: ^2.0.41 => 2.0.41 
    gatsby-plugin-offline: ^2.1.0 => 2.1.0 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 
    gatsby-plugin-sharp: ^2.0.37 => 2.0.37 
    gatsby-remark-images: ^3.0.11 => 3.0.11 
    gatsby-source-filesystem: ^2.0.33 => 2.0.33 
    gatsby-transformer-remark: ^2.3.12 => 2.3.12 
    gatsby-transformer-sharp: ^2.1.19 => 2.1.19

---

Please note if you clone my repo above I misspelled "gatsby" as "gastby" due to my dyslexia... 🤦‍♀️

[pieh]

Hey, we need #13028 to fix this. After that you would be able to specify in your graphql schema that File should be resolved using relative path (right now type is correct, but fields are being resolved to strings with this empty image string in frontmatter).

You can use it right now if you don't mind using pre-release version:

diff --git a/package.json b/package.json
index f392eff..9b6e316 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "dependencies": {
     "deep-map": "^2.0.0",
     "es6-weak-map": "^2.0.2",
-    "gatsby": "^2.4.3",
+    "gatsby": "schema-customization",
     "gatsby-image": "^2.0.41",
     "gatsby-plugin-offline": "^2.1.0",
     "gatsby-plugin-react-helmet": "^3.0.12",
diff --git a/schema.graphql b/schema.graphql
index b7194ae..589b3c0 100644
--- a/schema.graphql
+++ b/schema.graphql
@@ -15,5 +15,5 @@ type Frontmatter {
   title: String
   text: String
   linkText: String
-  image: File
+  image: File @addResolver(type: "fileByRelativePath")
 }

[kara-todd]

@pieh awesome! I just tried that on my build and it does seem to resolve the issue. Any idea when this feature might land? I think we can manually manage the data for a while... I'd rather go with a full stable release if possible since this is for a client site.

Also, should I close this issue then? or will it closed by the PR?

[janosh]

@kara-todd Glad to hear that @pieh was able to help solve the problem. Since #13028 was merged 9 days ago, I'll close this issue. Feel free to reopen if questions remain.