如何在 React-Admin 中配置端点和自定义 graphql 查询
How to configure endpoint and custom graphql query in React-Admin
我正在设置一个 react-admin 应用程序,它需要使用 graphql 提供程序连接到 Hasura 服务。为此,我需要为提供者传递端点“/v1/graphql”和带有选择子字段的查询。像这样:
query MyQuery {
account_customers {
customer_id
email
given_name
}
}
我尝试使用 Hasura Provider (https://github.com/hasura/ra-data-hasura/),但申请将变为“/v1/query”,但我找不到如何更改它。也不知道如何发送带有子字段的自定义查询。
我还尝试使用 ra-data-graphql-simple provider 来覆盖查询
获取带有子字段的资源。
/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 })
App.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;
但我收到错误消息:
"Unknown resource account_customers. Make sure it has been declared on your server side schema. Known resources are "
我遇到过类似的问题。
您正在使用的 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!
}
因此,在您的情况下,您需要这些端点(并更改后端的命名):
- 客户客户
- allAccountCustomers
- _allAccountCustomersMeta
- updateAccountCustomer
- 创建客户客户
- 删除客户客户
- 等...
我正在设置一个 react-admin 应用程序,它需要使用 graphql 提供程序连接到 Hasura 服务。为此,我需要为提供者传递端点“/v1/graphql”和带有选择子字段的查询。像这样:
query MyQuery {
account_customers {
customer_id
email
given_name
}
}
我尝试使用 Hasura Provider (https://github.com/hasura/ra-data-hasura/),但申请将变为“/v1/query”,但我找不到如何更改它。也不知道如何发送带有子字段的自定义查询。
我还尝试使用 ra-data-graphql-simple provider 来覆盖查询 获取带有子字段的资源。
/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 })
App.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;
但我收到错误消息:
"Unknown resource account_customers. Make sure it has been declared on your server side schema. Known resources are "
我遇到过类似的问题。 您正在使用的 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!
}
因此,在您的情况下,您需要这些端点(并更改后端的命名):
- 客户客户
- allAccountCustomers
- _allAccountCustomersMeta
- updateAccountCustomer
- 创建客户客户
- 删除客户客户
- 等...