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

Question

我正在设置一个 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 提供程序来覆盖查询 获取带有子字段的资源。

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

但我得到了错误：

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

Answer 1

我也遇到过类似的问题。 您使用的 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!
}

因此，在您的情况下，您将需要这些端点（并在后端更改命名）：

• 客户客户
• 所有帐户客户
• _allAccountCustomersMeta
• 更新AccountCustomer
• createAccountCustomer
• 删除AccountCustomer
• 等等……