将变量直接注入到从 React-Apollo <Mutation /> 组件传递的函数中，而不是作为 props

Question

所以我有一个 apollo 组件，我想从 event.target 向其发送变量，依此类推，它用于具有不同单元格的 table 我希望能够确定单击了哪个单元格。我发现了另一个堆栈 owerflow post 在那里他们做了类似的事情，当你运行函数而不是 props 到 apollo 组件时你注入变量。

但我无法让它工作，我是不是遗漏了什么，还是我需要不同的结构？

这是一个更大的例子，但我已经剥离了很多例子不需要的东西。

    import { **CREATE_BOOKING**, } from "../queries";

    const selectBooking = (e, **createBooking**) => {

      **createBooking**({
        varibles: {
          $data: {
            payed: false,
            notified: false,
            activity: props.activity,
            activityId: props.id,
            time: moment(e.target.getAttribute("time")),
            cost,
            selected: true,
            durationMin
          }
        }
      });
    }
  };

    return (
          <Mutation mutation={**CREATE_BOOKING**} variables={I don't want to enter the variables here}>
            {(**createBooking**, { data }) => (
              <div className="WeekCalender">

                        {rows.map(row => {
                          return (
                            <tr key={row}>
                              <td className="WeekCalender__Cell">{row}</td>
                              <td
                                onClick={e => selectBooking(e, **createBooking**)}
                                time={getCurrentTime(0, row)}
                                className={checkIfBooked(
                                  0,
                                  row,
                                  props.activity.name,
                                  allBookings,
                                  props.currentBookings
                                )}
                              />
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </React.Fragment>
                )}
              </div>
            )}
          </Mutation>
        );

Answer 1

import { CREATE_BOOKING, } from "../queries";

    const selectBooking = async (e, createBooking) => {

      await createBooking({
        varibles: {
          data: {
            payed: false,
            notified: false,
            activity: props.activity,
            activityId: props.id,
            time: moment(e.target.getAttribute("time")),
            cost,
            selected: true,
            durationMin
          }
        }
      });
    }
  };

    return (
          <Mutation mutation={CREATE_BOOKING}>
            {(createBooking, { data }) => (
              <div className="WeekCalender">

                        {rows.map(row => {
                          return (
                            <tr key={row}>
                              <td className="WeekCalender__Cell">{row}</td>
                              <td
                                onClick={e => selectBooking(e,createBooking)}
                                time={getCurrentTime(0, row)}
                                className={checkIfBooked(
                                  0,
                                  row,
                                  props.activity.name,
                                  allBookings,
                                  props.currentBookings
                                )}
                              />
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </React.Fragment>
                )}
              </div>
            )}
          </Mutation>
        );

将变量直接注入到从 React-Apollo <Mutation /> 组件传递的函数中，而不是作为 props

Inject variables directly to a function passed on from React-Apollo <Mutation /> component and not as props

reactjs

react-apollo