title: Graphql Field doesn't exist on type
body: <p>After skimming through the docs of Graphql I've started to implement it on a toy rails/reactJS project. The projects allows an user to sign in through devise then access a dummy /artist route that displays a list of artists. Everything seems to work fine until I try to consume api data with GraphQL from the react app to get artists and display them. </p>
  
  <p>On the server side, I have a <strong>graphql_controller.rb</strong> such as:</p>
  
  <pre><code>class GraphqlController &lt; ApiController
    rescue_from Errors::Unauthorized do |exception|
      render json: {errors: ['Unauthorized.']}, status: :unauthorized
    end
  
    def index
      result = Schema.execute params[:query], variables: params[:variables], context: context
      render json: result, status: result['errors'] ? 422 : 200
    end
  
  private
  
    def context
      token, options = ActionController::HttpAuthentication::Token.token_and_options request
      {
        ip_address: request.remote_ip
      }
    end
  end
  </code></pre>
  
  <p>Then, following to my model logic, I have set up graphql under graph/ with the following files: </p>
  
  <p><strong>graph/queries/artist_query.rb</strong></p>
  
  <pre><code>ArtistQuery = GraphQL::ObjectType.define do
    name 'ArtistQuery'
    description 'The query root for this schema'
  
    field :artists, types[Types::ArtistType] do
      resolve(-&gt;(_, _, _) {
        Artist.all
      })
    end
  end
  </code></pre>
  
  <p><strong>types/artist_type.rb</strong></p>
  
  <pre><code>Types::ArtistType = GraphQL::ObjectType.define do
    name 'Artist'
    description 'A single artist.'
  
    field :id, !types.ID
    field :name, types.String
    field :description, types.String
  end
  </code></pre>
  
  <p><strong>schema.rb</strong></p>
  
  <pre><code>Schema = GraphQL::Schema.define do
    query ArtistQuery
  end
  </code></pre>
  
  <p>On the client side, for the sake of keeping things organized, I use 3 files to render this artist list:</p>
  
  <p>First, <strong>ArtistSchema.js</strong> </p>
  
  <pre><code>import { gql } from 'react-apollo';
  
  const artistListQuery = gql`
      {
          query {
              artists {
                  id
                  name
                  description     
              }
          }
      }
  `;
  
  export default artistListQuery;
  </code></pre>
  
  <p>Then, an <strong><code>Artist.js</code></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Artist extends Component {
      render() {
          return (
              &lt;tr&gt;
                  &lt;td&gt;{this.props.index + 1}&lt;/td&gt;
                  &lt;td&gt;{this.props.data.name}&lt;/td&gt;
                  &lt;td&gt;{this.props.data.description} min&lt;/td&gt;
              &lt;/tr&gt;
          );
      }
  }
  
  export default Artist;
  </code></pre>
  
  <p>And finally, wrapping these two together in a larger layout: <strong>Artists.jsx</strong>:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {graphql} from 'react-apollo';
  import Artist from './Artist';
  import artistListQuery from './ArtistSchema';
  
  class Artists extends Component {
      render() {
          if(this.props.data.loading) {
              return (&lt;p&gt;Loading&lt;/p&gt;)
          } else {
  
              console.log(this.props.data)
              const ArtistsItems = this.props.data.artists.map((data,i) =&gt; {
                  return (&lt;Artist key={i} index={i} data={data}&gt;&lt;/Artist&gt;);
              });
              return (
                  &lt;div&gt;
                      &lt;h1&gt;Artists&lt;/h1&gt;
                      &lt;table className="table table-striped table"&gt;
                          &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;#&lt;/th&gt;
                              &lt;th&gt;Name&lt;/th&gt;
                              &lt;th&gt;Description&lt;/th&gt;
                          &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                          { ArtistsItems }
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              );
          }
  
      }
  }
  
  export default graphql(artistListQuery)(Artists);
  </code></pre>
  
  <p>What happens when this code is executed:</p>
  
  <p>On server-side (sorry for the unformatted output, but it displays like this in console): </p>
  
  <pre><code>Processing by GraphqlController#index as */*
  18:49:46 api.1  |   Parameters: {"query"=&gt;"{\n  query {\n    artists {\n      id\n      name\n      description\n      __typename\n    }\n    __typename\n  }\n}\n", "operationName"=&gt;nil, "graphql"=&gt;{"query"=&gt;"{\n  query {\n    artists {\n      id\n      name\n      description\n      __typename\n    }\n    __typename\n  }\n}\n", "operationName"=&gt;nil}}
  </code></pre>
  
  <p>Followed by the error:</p>
  
  <pre><code>Completed 422 Unprocessable Entity in 36ms (Views: 0.2ms | ActiveRecord: 0.0ms)
  </code></pre>
  
  <p>On the client side, if I monitor Network > Response for graphql, I (of course) receive a 422 error code and the following error message:</p>
  
  <pre><code>{"errors":[{"message":"Field 'query' doesn't exist on type 'ArtistQuery'","locations":[{"line":2,"column":3}],"fields":["query","query"]}]}
  </code></pre>
  
  <p>I assume my query is not done correctly. I have been trying various queries formats (from docs or gists examples) but I cannot end finding a correct way to get back my artist data. </p>
  
  <p>What am I doing wrong?</p>