我正在设置一个 react-admin 应用程序,它需要使用 graphql 提供程序与 Hasura 服务连接。为此,我需要为提供者传递端点“/v1/graphql”和带有 selects 子字段的查询。像这样:
query MyQuery {
account_customers {
customer_id
email
given_name
}
}
我尝试使用 Hasura Provider ( https://github.com/hasura/ra-data-hasura/ ),但申请将转到“/v1/query”,我找不到如何更改它。也无法弄清楚如何使用子字段发送我的自定义查询。
我还尝试使用 ra-data-graphql-simple 提供程序来覆盖查询
获取带有子字段的资源。
/providers/myProvider.js
import buildGraphQLProvider, { buildQuery } from 'ra-data-graphql-simple';
import gql from 'graphql-tag';
const myBuildQuery = introspection => (fetchType, resource, params) => {
const builtQuery = buildQuery(introspection)(fetchType, resource, params);
if (resource === 'account_customers' && fetchType === 'GET_LIST') {
return {
// Use the default query variables and parseResponse
...builtQuery,
// Override the query
query: gql`
query ($id: ID!) {
account_customers {
customer_id
email
name
}
}`,
};
}
return builtQuery;
}
export default buildGraphQLProvider({ buildQuery: myBuildQuery })
应用程序.js
import buildGraphQLProvider from './providers/myProvider.js';
class App extends Component {
constructor() {
super();
this.state = { dataProvider: null };
}
componentDidMount() {
buildGraphQLProvider({ clientOptions: { uri: 'http://localhost:8080/v1/graphql' }})
.then(dataProvider => this.setState({ dataProvider }));
}
render() {
const { dataProvider } = this.state;
return (
<div className="App">
<Admin dataProvider={dataProvider} >
<Resource name="account_customers" list={ListGuesser} />
</Admin>
</div>
);
}
}
export default App;
但我收到错误:
“未知资源 account_customers。确保它已在您的服务器端架构中声明。已知资源是”
最佳答案
我有一个类似的问题。
您使用的 react-admin 数据提供程序需要特定形状的 GraphQL API,因此它可以获取所有项目、创建项目、更新项目等。
我已经通过确保我的架构符合这一点来解决它:
type Query {
Post(id: ID!): Post
allPosts(page: Int, perPage: Int, sortField: String, sortOrder: String, filter: PostFilter): [Post]
_allPostsMeta(page: Int, perPage: Int, sortField: String, sortOrder: String, filter: PostFilter): ListMetadata
}
type Mutation {
createPost(
title: String!
views: Int!
user_id: ID!
): Post
updatePost(
id: ID!
title: String!
views: Int!
user_id: ID!
): Post
deletePost(id: ID!): Post
}
type Post {
id: ID!
title: String!
views: Int!
user_id: ID!
User: User
Comments: [Comment]
}
input PostFilter {
q: String
id: ID
title: String
views: Int
views_lt: Int
views_lte: Int
views_gt: Int
views_gte: Int
user_id: ID
}
type ListMetadata {
count: Int!
}
因此,在您的情况下,您将需要这些端点(并更改后端的命名):
关于graphql - 如何在 React-Admin 中配置端点和自定义 graphql 查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58716660/