4

I'm setting up a react-admin app, that needs to connect with a Hasura Service using a graphql provider. To do so, I need to pass for the provider the endpoint "/v1/graphql" and the query with the selects subfields. Like this:

query MyQuery {
  account_customers {
    customer_id
    email
    given_name
  }
}

I tried to use the Hasura Provider (https://github.com/hasura/ra-data-hasura/) but the requisitions are going to "/v1/query", and I couldn't found how to change it. Also couldn't figure out how to send my custom query with the subfields.

I also tried to use ra-data-graphql-simple provider, to override a query to get the resource with the subfields.

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

But I'm getting the error:

"Unknown resource account_customers. Make sure it has been declared on your server side schema. Known resources are "

Nhat Dinh
  • 3,378
  • 4
  • 35
  • 51
7xRobin
  • 341
  • 1
  • 4
  • 11

1 Answers1

2

I have had a similar issue. The react-admin data provider you're using expects a certain shape of the GraphQL API, so it can get all items, create an item, update an item etc.

I have solved it by making sure that my schema complies with this:

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!
}

So in your case, you would need these endpoints (and change the naming in your backend):

  • AccountCustomer
  • allAccountCustomers
  • _allAccountCustomersMeta
  • updateAccountCustomer
  • createAccountCustomer
  • deleteAccountCustomer
  • etc...
Radovan Šurlák
  • 81
  • 1
  • 4