浏览完 Graphql 的文档后,我开始在一个玩具 Rails/reactJS 项目上实现它。这些项目允许用户通过设备登录,然后访问显示艺术家列表的虚拟/艺术家路径。一切似乎都工作正常,直到我尝试使用 React 应用程序中的 GraphQL 来使用 api 数据来获取艺术家并显示它们。
在服务器端,我有一个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:
图/查询/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
类型/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
模式.rb
Schema = GraphQL::Schema.define do
query ArtistQuery
end
在客户端,为了保持事情井井有条,我使用 3 个文件来渲染此艺术家列表:
First, 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;
最后,将这两个包装在一个更大的布局中:艺术家.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)
在客户端,如果我监控 graphql 的 Network > Response,我(当然)会收到 422 错误代码和以下错误消息:
{"errors":[{"message":"Field 'query' doesn't exist on type 'ArtistQuery'","locations":[{"line":2,"column":3}],"fields":["query","query"]}]}
我假设我的查询没有正确完成。我一直在尝试各种查询格式(来自文档或要点示例),但我无法最终找到正确的方法来取回我的艺术家数据。
我究竟做错了什么?