【发布时间】：2019-03-06 19:48:18
【问题描述】：
在浏览了 Graphql 的文档后，我开始在一个玩具 rails/reactJS 项目中实现它。这些项目允许用户通过设计登录，然后访问显示艺术家列表的虚拟/艺术家路线。在我尝试使用来自 react 应用程序的 GraphQL 来获取艺术家并显示它们之前，一切似乎都运行良好。
在服务器端，我有一个 graphql_controller.rb 例如：
class GraphqlController < 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
然后，按照我的模型逻辑，我在 graph/ 下使用以下文件设置了 graphql：
graph/queries/artist_query.rb
ArtistQuery = GraphQL::ObjectType.define do
name 'ArtistQuery'
description 'The query root for this schema'
field :artists, types[Types::ArtistType] do
resolve(->(_, _, _) {
Artist.all
})
end
end
types/artist_type.rb
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
schema.rb
Schema = GraphQL::Schema.define do
query ArtistQuery
end
在客户端，为了保持井井有条，我使用 3 个文件来呈现这个艺术家列表：
首先，ArtistSchema.js
import { gql } from 'react-apollo';
const artistListQuery = gql`
{
query {
artists {
id
name
description
}
}
}
`;
export default artistListQuery;
然后，一个Artist.js
import React, { Component } from 'react';
class Artist extends Component {
render() {
return (
<tr>
<td>{this.props.index + 1}</td>
<td>{this.props.data.name}</td>
<td>{this.props.data.description} min</td>
</tr>
);
}
}
export default Artist;
最后，将这两个封装在一个更大的布局中：Artists.jsx：
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 (<p>Loading</p>)
} else {
console.log(this.props.data)
const ArtistsItems = this.props.data.artists.map((data,i) => {
return (<Artist key={i} index={i} data={data}></Artist>);
});
return (
<div>
<h1>Artists</h1>
<table className="table table-striped table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{ ArtistsItems }
</tbody>
</table>
</div>
);
}
}
}
export default graphql(artistListQuery)(Artists);
执行这段代码会发生什么：
在服务器端（抱歉输出未格式化，但它在控制台中显示如下）：
Processing by GraphqlController#index as */*
18:49:46 api.1 | Parameters: {"query"=>"{\n query {\n artists {\n id\n name\n description\n __typename\n }\n __typename\n }\n}\n", "operationName"=>nil, "graphql"=>{"query"=>"{\n query {\n artists {\n id\n name\n description\n __typename\n }\n __typename\n }\n}\n", "operationName"=>nil}}
后面跟着错误：
Completed 422 Unprocessable Entity in 36ms (Views: 0.2ms | ActiveRecord: 0.0ms)
在客户端，如果我监控 Network > Response for graphql，我（当然）会收到 422 错误代码和以下错误消息：
{"errors":[{"message":"Field 'query' doesn't exist on type 'ArtistQuery'","locations":[{"line":2,"column":3}],"fields":["query","query"]}]}
我假设我的查询没有正确完成。我一直在尝试各种查询格式（来自文档或要点示例），但我无法找到正确的方法来取回我的艺术家数据。
我做错了什么？
【问题讨论】：
标签： ruby-on-rails reactjs graphql