如何在React-Admin中配置端点和自定义graphql查询

我正在设置一个react-admin应用程序,该应用程序需要使用graphql提供程序与Hasura Service连接。为此,我需要为提供者传递终结点“ / 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提供程序来覆盖查询  获得带有子字段的资源。

/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,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;

但是我得到了错误:

“未知资源account_customers。请确保已在服务器端架构上声明它。已知资源为”

nikoliu1 回答:如何在React-Admin中配置端点和自定义graphql查询

我有一个类似的问题。 您使用的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,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!
}

因此,在您的情况下,您将需要以下端点(并在后端中更改命名):

  • AccountCustomer
  • allAccountCustomers
  • _allAccountCustomersMeta
  • updateAccountCustomer
  • createAccountCustomer
  • deleteAccountCustomer
  • 等...
本文链接:https://www.f2er.com/3157551.html

大家都在问