Question: How to make asynchronous calls from a form submit?

[jimmyandrade]

I am building an application to check for traffic tickets for a specific car.

It should work as follows:

1. User enters a car license plate number in an input;
2. User clicks on submit button;
3. An API call should be made to an endpoint using axios.

I was trying to use the car license plate number as the argument using selectorFamily, but it is still not available (#105). So... any thoughts about how to implement this using recoil?

[drarmstr]

Is this issue that you're waiting for selectorFamily to be working properly from the npm package? We're hopeful to get that updated this evening.. In the meantime, you could also easily replicate that pattern yourself by making a memoized function which takes the license plate and returns a selector for that plate. In this case, though, it also sounds like you could store the license plate in an atom and reference that from the selector without needing a parameterized selector (see this example).

Duplicate of #105

[acutmore]

Hi @jimmyandrade

User enters a car license plate number in an input;

Likely I am interpreting this wrong but it sounds like there is only one license plate number entered at a time. Could you just use one Recoil atom to represent the current licence plate number. Or is there another reason why you were looking to use selectorFamily?

const currentLicensePlate = atom({
  key: "currentLicensePlate",
  default: null,
});

const dataForCurrentLicensePlate = selector({
  key: "currentLicensePlateData",
  get({ get }) {
    const lpn = get(currentLicensePlate);
    if (lpn === null) {
      return null;
    }
    return axios.get("/data", {
      params: {
        license: lpn,
      },
    });
  },
});

function MyComponent() {
  const setCurrentLicense = useSetRecoilState(currentLicensePlate);
  const [input, setInput] = useState("");

  return (
    <>
      <input type="text" value={input} onChange={setInput} />
      <button onClick={() => setCurrentLicense(input)}>Submit</button>
    </>
  );
}

function ShowData() {
  const data = useRecoilValue(dataForCurrentLicensePlate);
  return <pre>{JSON.stringify(data)}</pre>;
}

[drarmstr]

@jimmyandrade - Please feel free to re-open if the suggestions here don't help!