Steams / ra-data-hasura-graphql

React-admin data provider for Hasura GraphQL endpoints
MIT License
211 stars 33 forks source link

ReferenceManyField implementation #29

Open baskin opened 4 years ago

baskin commented 4 years ago

Hi @Steams Just got started with this project. Looks great till now. Many thanks :).

I came to a point where I used a ReferenceManyField in list view. This component fetches a list of referenced records by reverse lookup of the current record.id in other resource (dataProvider.getManyReference()).

Looking at the n/w calls, it seems like the implementation is making 1 call for each (current) record in the list. I think it can be collapsed to a single call by using the 'in' operator. Can you kindly take a look?

Thanks

lapidus commented 4 years ago

Hi there! Is this to support many-to-many relationships? If you have a working example (even if slow), great if you could share some code. I am having trouble with this particular step :) Thx!

webdeb commented 4 years ago

@lapidus for a simple and slow example you could

      <ReferenceManyField
        label="Labels"
        reference="locals_labels"
        target="local_id"
        source="id"
      >
        <SingleFieldList>
          <ReferenceField source="label_id" reference="labels" target="id">
            <TextField source="label" />
          </ReferenceField>
        </SingleFieldList>
      </ReferenceManyField>

make sure to also export the many_to_many Resource, btw. you can export an array

export default [
  <Resource key="locals" name="locals" />,
  <Resource key="locals_labels" name="locals_labels" />
]
lapidus commented 4 years ago

Thanks, great! Will try when I get past the initial hurdle of "buildHasuraProvider". It's giving me a bit of a hard time ... 😅

lapidus commented 4 years ago

Hm, can't get it to work exactly. If I am trying to display topics for blog posts and the "bridge table" looks like this, what should I do? Thx!

blog_post_topic blog_post_id | topic_id

Also, why do I need to export those Resources and where? I basically just want to add the many-to-many items in my listing view and edit view.

webdeb commented 4 years ago

In my example above I am rendering a query which would look like

locals {
  locals_labels {
     label {
       label
    }
  }
}

the dataProvider will load the glueing part, and then the corresponding label / topic.. You have to export blog_post_topic Resource otherwise the dataprovider will complain.

lapidus commented 4 years ago

Thanks for all the help, now it works with the display!

Do you by any chance have experience with the AutoComplete?

From a topic edit view, I can get it to display my articles. But I can't:

1) Get it to show the selected ones from the complete list 2) Save the changes

My current implementation looks something like this:

<ReferenceManyField reference="article_topic" target="topic_id">
  <ReferenceArrayInput
    source="article_id"
    reference="article"
   >
      <AutocompleteArrayInput
          optionText="name"
      /> 
  </ReferenceArrayInput>
</ReferenceManyField>
gengue commented 4 years ago

I am looking a fix for this because but we shouldn't use it the ReferenceManyField + RefenceField on that way, it makes a tons of request for a data grid. if we have defined a many-to-many relationship in our schema, it should build only one query for this.

something like this: e.g: users -> users_roles -> roles

query MyQuery {
  users(limit: 10) {
    id
    name
    user_roles  {
      role {
        name
      }
    }
  }
}
lapidus commented 4 years ago

Great! Thanks! Might also simplify this? https://github.com/Steams/ra-data-hasura-graphql/issues/33

gengue commented 4 years ago

The solution is described in the documentation: https://github.com/Steams/ra-data-hasura-graphql#example-query-related-entities

But those functions aren't exported in the library :( should create a issue about it?

jasper95 commented 3 years ago

Hi @baskin!

Please check my comment here on how I worked on this use case.