absent-sapphire

[SOLVED] data fetched from useQuery don't get populated properly

So I have

const [userData, setUserData] = useState<userDataTypes>();
// get user data
  const {isLoading: isLoadingUserData} = useQuery(
    ['userData', userId],
    async () => {
      return await axiosClient.get('/user/');
    },
    {
      onSuccess: (res) => {
        setUserData(res.data);
      },
      onError: (err) => {
        console.error(err);
        setFormDataErr('error loading data');
      },
    },
  );
  console.log('USER DATA', userData);

  const [formData, setFormData] = useState({
    firstname: userData?.firstname ? userData.firstname : '',
    lastname: userData?.lastname ? userData.lastname : '',
  });

.... .....
<Input
          label="First name"
          name="firstname"
          type="text"
          title="First name is required"
          required
          value={isLoadingUserData ? 'loading...' : formData.firstname}
          handleChange={(e): void => onChange(e)}
        />
        <Input
          label="Last name"
          name="lastname"
          type="text"
          title="Last name is required"
          required
          value={isLoadingUserData ? 'loading...' : formData.lastname}
          handleChange={(e): void => onChange(e)}
        />

const [userData, setUserData] = useState<userDataTypes>();
// get user data
  const {isLoading: isLoadingUserData} = useQuery(
    ['userData', userId],
    async () => {
      return await axiosClient.get('/user/');
    },
    {
      onSuccess: (res) => {
        setUserData(res.data);
      },
      onError: (err) => {
        console.error(err);
        setFormDataErr('error loading data');
      },
    },
  );
  console.log('USER DATA', userData);

  const [formData, setFormData] = useState({
    firstname: userData?.firstname ? userData.firstname : '',
    lastname: userData?.lastname ? userData.lastname : '',
  });

.... .....
<Input
          label="First name"
          name="firstname"
          type="text"
          title="First name is required"
          required
          value={isLoadingUserData ? 'loading...' : formData.firstname}
          handleChange={(e): void => onChange(e)}
        />
        <Input
          label="Last name"
          name="lastname"
          type="text"
          title="Last name is required"
          required
          value={isLoadingUserData ? 'loading...' : formData.lastname}
          handleChange={(e): void => onChange(e)}
        />

The plan is to fetch userData, then populate them as value into forms, if there is no userData then we leave the value as empty string. The problem is: I definitely get the userData, so we have firstname and lastname etc etc, but the formData is totally empty. What did I do wrong so after userData is available but formData is not updated? How should I fix this issue? Thanks!

9 Replies

optimistic-gold•3y ago

State is initialised when the component mounts, not when it re-renders. You're deriving the formData state when the component mounts, at which point userData is undefined. It looks like you've got a fair amount of derived state here but you'd need to set the formData state onSuccess

absent-sapphireOP•3y ago

In that case, it might make sense to remove the whole userData isn't it...

optimistic-gold•3y ago

I think so, yeah 🙂

absent-sapphireOP•3y ago

onSuccess: (res) => {
        setFormData({
          firstname: res.data.firstname,
          lastname: res.data.lastname
        })
      },

onSuccess: (res) => {
        setFormData({
          firstname: res.data.firstname,
          lastname: res.data.lastname
        })
      },

so we have the empty string first, then fetch, onSuccess, change the values. this seems to work fine.

optimistic-gold•3y ago

Yeah, that's right. If you were to derive the initial state from another state value that was initialised when the query data is undefined then it'd lead to the issue you were seeing. Awesome, I'm glad :reactquery:

absent-sapphireOP•3y ago

Thanks. How do we mark as [solved] here?

optimistic-gold•3y ago

No worries 🙂 I'm not actually sure; I'd like to know too. @TkDodo 🔮 is there a way to mark a question as solved please?

national-gold•3y ago

react with ✅ 🙂

optimistic-gold•3y ago

Awesome, thanks 🙌

Gaming

Programming

[SOLVED] data fetched from useQuery don't get populated properly

Did you find this page helpful?