jeudi 25 mars 2021

How submit values from multiple checkboxes and send mutation with useMutation Apollo client

I am using useMutation hook from Apollo Client

Currently on my mapped buttons after pressing the button my mutation is fired off and works all fine.

const MyComponent = ({ myId, selections }: Props) => {
  const [addTodo] = useMutation(ADD_TODO);

  return (
    <div>
      <ul>
        {todos.map(({ id, label }) => (
          <li key={id}>
            <button
              type="button"
              onClick={() => {
                addTodo({
                  variables: {
                    myId,
                    toId: id,
                  },
                  refetchQueries: [{ query: anotherQuery, variables: { myId } }],
                });
              }}
            >
              {label}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

Now I have to change my buttons into checkboxes (since the user can submit/mutate multiple values). When submitting the form <form onSubmit={(e) => {}} I have to submit my mutation addTodo (with one or more selected values.

How do I collect all selected values and pass them to my form onClick handler?




Aucun commentaire:

Enregistrer un commentaire