Question: Post data through API with RecoilJS

In RecoilJS docs, there is an example how to handle asynchronous data queries, but it’s only about get data.

Let say I have a simple state:

const accountState = atom({
  key: "accountState",
  default: {
    id: "",
    name: "",
  }
});

And a component which is a register form:

const RegisterForm = () => {
  return (
    <form>
      <input type="text" name="username" />
      <button type="submit">Register</button>
    </form>
  )
}

The posted data is in FormData. After successfully created new account, the server will send a response that contains id and name of the account.

{
  "id": "abcdef123456",
  "name": "example"
}

This response data will be set as a new state of accountState.

How can I handle the process in RecoilJS?

[adrianbw]

A followup to say that I’d love to see an async setter so that we could do something much more simple like this:

const postSelector = selectorFamily({
  get: // whatever
  set: async (params) => ({ set }) => {
    const response = await postQuery(params);
    set(YourAtom, // etc);
  }
});

[drarmstr]

A followup to say that I’d love to see an async setter so that we could do something much more simple like this:

@adrianbw - Instead of an async post selector set, consider just using a setter for YourAtom from useSetRecoilState() or useRecoilCallback() to provide a callback which can asynchronously set the atom with the response.

const yourPostQuery = useRecoilCallback(({set}) => async params => {
  const response = await postQuery(params);
  set(yourAtom, response.data);
});