useStaticQuery with object arguments causes fragment error

Description

useStaticQuery with object arguments in graphql from gatsby-source-graphql causes errors that make it look like they’re somehow being parsed as fragments.

Steps to reproduce

The following typescript causes the issue

(this is one example - every other file like this is throwing the same error)

interface IFeaturedProjectsQuery {
  projects: Project[];
  copy: {
    featured_projects_copy: {
      header: string;
      description: string;
      icon: {
        path: string;
      }[];
    };
  };
}

export const useFeaturedProjects = (): IFeaturedProjectsQuery => {
  const query = useStaticQuery<
    ICosmosQuery<
      { copy: IFeaturedProjectsQuery['copy'] },
      { projects: Project[] }
    >
  >(
    graphql`
      query useFeaturedProjectsQuery {
        cosmos {
          collections {
            projects(

             /* THIS IS THE KEY BIT - REMOVING THESE ARGUMENTS STOPS THE ERROR FROM THROWING */

              sort: { field: order, direction: ASC }
              where: { field: featured, operation: eq, value: "true" }
            ) {
              client_name
              client_brand_color
              client_logo {
                ticket
              }
              project_description_short
              project_cover_image {
                ticket
              }
              project_transparent_bg_mockup {
                ticket
              }
              project_quote {
                quote_text
                author_name
                author_position
                author_photo {
                  ticket
                }
              }
              order
              quick_details {
                detail_name
                detail_icon {
                  ticket
                }
              }
              featured
            }
          }
          pages {

           /* THIS ARGUMENT WHICH IS JUST A STRING, HOWEVER, RUNS FINE */

            copy: home(dataKey: "page") {
              featured_projects_copy {
                header
                description
                icon {
                  ticket
                }
              }
            }
          }
        }
      }
    `
  );

  return {
    projects: query.cosmos.collections.projects,
    copy: query.cosmos.pages.copy
  };
};

export default useFeaturedProjects;

This only causes the issue in code. In GraphiQL, the query runs fine.

Removing the object arguments from the GraphQL allows it to run perfectly fine and I can get the site running locally.

Expected result

The site should build normally when running gatsby develop

Actual result

When running gatsby develop, the following error appears in the console for each useStaticQuery hook with object arguments in the graphql

 ERROR #85908  GRAPHQL

There was an error in your GraphQL query:

The fragment "undefined" does not exist.

File: src/hooks/staticQueries/useFeaturedProjects.ts

While in the browser I get the following error

Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
useStaticQuery
/Users/patrickbenjamin/Git/rocketmakers/rocketmakers-website/web/.cache/gatsby-browser-entry.js:1
> 1 | import React from "react"
  2 | import PropTypes from "prop-types"
  3 | import Link, {
  4 |   withPrefix,
View compiled
useFeaturedProjects
src/hooks/staticQueries/useFeaturedProjects.ts:19
  16 | }
  17 | 
  18 | export const useFeaturedProjects = (): IFeaturedProjectsQuery => {
> 19 |   const query = useStaticQuery<
  20 |     ICosmosQuery<
  21 |       { copy: IFeaturedProjectsQuery['copy'] },
  22 |       { projects: Project[] }
View compiled

and while the build completes, I am unable to see the site in the browser. The components wrapped in gatsby-browser.js flash on screen before going to the error screen.

Environment

  System:
    OS: macOS 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.5.0 - ~/.nodenv/shims/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nodenv/shims/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 67.0.3
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.13.41 => 2.13.41
    gatsby-plugin-google-analytics: ^2.1.4 => 2.1.4
    gatsby-plugin-lodash: ^3.1.2 => 3.1.2
    gatsby-plugin-meta-redirect: ^1.1.1 => 1.1.1
    gatsby-plugin-netlify: ^2.1.3 => 2.1.3
    gatsby-plugin-netlify-cache: ^1.2.0 => 1.2.0
    gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2
    gatsby-plugin-sass: ^2.1.3 => 2.1.3
    gatsby-plugin-typescript: ^2.1.2 => 2.1.2
    gatsby-source-filesystem: ^2.1.6 => 2.1.6
    gatsby-source-graphql: ^2.1.3 => 2.1.3
    gatsby-source-twitter: ^1.3.4 => 1.3.4
  npmGlobalPackages:
    gatsby-cli: 2.4.6

[pieh]

Oh interesting - worth try using graphql-tools-fork. If there are no public API changes, I’ll release canary of gatsby-source-graphql with that.

That thing aside - if it indeed is enum problem - the error that @patrickbenjamin1 is seeing defenitely looks pretty weird. So reproduction would still be valuable to figure out why such weird error shows up.

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!