Theo's Typesafe Cult•2y ago

setData doesn't update state

I want to replace query invalidation with an update of the query cache to make my application react quicker. My understanding is that I use the setData method to update the query cache on success of the mutation. I've done so here:

  const optionStateMut = api.option.updateOptionState.useMutation({
    onSuccess: (data) => {
      client.form.getForm.setData({ formId: currentFormId }, (oldData) => {
        const newData = oldData;
        const fieldIdx = newData!.fields.findIndex(
          (element) => element.id === currentFieldId
        );
        newData!.fields[fieldIdx]!.options = data;
        console.log("newData: ", newData);
        return newData;
      });
      // void client.form.getForm.invalidate();
    },
    onError: () => {
      toast.error("technical error updating options");
    },
  });

  const optionStateMut = api.option.updateOptionState.useMutation({
    onSuccess: (data) => {
      client.form.getForm.setData({ formId: currentFormId }, (oldData) => {
        const newData = oldData;
        const fieldIdx = newData!.fields.findIndex(
          (element) => element.id === currentFieldId
        );
        newData!.fields[fieldIdx]!.options = data;
        console.log("newData: ", newData);
        return newData;
      });
      // void client.form.getForm.invalidate();
    },
    onError: () => {
      toast.error("technical error updating options");
    },
  });

The console logged newData looks exactly like I want it to. However the website doesn't update. It still shows oldData. What am I doing wrong?

Gaming

Programming

setData doesn't update state