React-admin: ReferenceInput loads its data before its containing view

[WiXSL]

RefereneInput loads its items before its own container.
This is a problem for me, because my api sets up at the server what the RefereneInput is going to load.
I don't know if this is a bug or a limitation or how to change the order of the calls.

https://codesandbox.io/s/heuristic-kepler-m2zkf?file=/src/index.js (Just in case)

[ozgurrgul]

For me, I got the opposite one (your expectation) after opening page directly /posts/2.

[WiXSL]

I still get the opposite order of what you get with /post/2
Thanks for your input

Could it be related to the time zone we are using some how?
Since is the same sandbox

[ozgurrgul]

Nope, I don't think so.

[WiXSL]

I don't get it.
I've tried it in many computers with the latest browsers and all do the same, first the ReferenceInput call then the Edit api call

[MicroJackson]

I have the effect you get when first loading the resource, but every refresh does it the other way around.

You could change the order of the call with something like this:

import { useForm } from "react-final-form";

const DelayedReference = ({ record = {}, source, classes, ...props }) => {
  const form = useForm();
  let is_id_set = form.getFieldState("id");

  if (is_id_set) {
    return (
      <ReferenceInput label="User" source="user_id" reference="users">
        <AutocompleteInput />
      </ReferenceInput>
    );
  } else {
    return "Nothing yet.";
  }
};

const PostEdit = ({ permissions, ...props }) => (
  <Edit {...props}>
    <SimpleForm>
      <TextInput disabled source="id" />
      <DelayedReference />
    </SimpleForm>
  </Edit>
);

It waits for the id to be set to actually create your reference input forcing it to be later then the Edit.
Don't know if this is intented though from RA.

[WiXSL]

@MicroJackson,
Thank you very much for the workaround.
Very simple idea, seems to work.
Even do I would love to hear from RA team regarding this behaviour.

[fzaninotto]

We haven't thought about doing these queries in a particular order. It's a result of the react rendering and effect process.

I don't think it's a bug. And if it matters, as in your case, you can use @MicroJackson's trick.

So 4Im closing this issue.

[WiXSL]

@MicroJackson,
I end up using useVersion hook for the task, just sharing:

```jsx
import * as React from "react";
import {useEffect, useRef} from "react";
import {ReferenceInput, AutocompleteInput, useVersion} from "react-admin";

const DelayedReferenceInput = props => {
const version = useVersion();
const parentLoaded = useRef(false);

useEffect(() => {
    parentLoaded.current = true;
}, [version]);

if (parentLoaded.current) {
  return (
    <ReferenceInput {...props}>
      <AutocompleteInput />
    </ReferenceInput>
  );
} else {
  return "Nothing yet.";
}

};

[MicroJackson]

@WiXSL
Thanks for sharing!
Just curious, is there any benefit of writing it this way instead of the useForm?

[WiXSL]

@MicroJackson,
Your example work for me only the first time, using useVersion allows me to re-fetch after each refresh of the form's data.
React-admin's fetch data hooks use it.

[MicroJackson]

Cool, thanks for the explanation.
Learned something again.