Как динамически установить переменные в мутации с реагировать-принять? - PullRequest
Новая
       10

Как динамически установить переменные в мутации с реагировать-принять?

0 голосов
/ 23 декабря 2018

В моем компоненте я использую реагирование-принятие для составления запросов и мутаций в Graphql, чтобы мои объекты рендеринга не были слишком грязными.У меня есть следующий код:

Это моя мутация, она принимает один аргумент - planID. 

const CREATE_ORDER_MUTATION = gql`
  mutation CREATE_ORDER_MUTATION($planID: String!) {
    createOrder(planID: $planID) {
      planID
      name
      description
      subscriptionType
      images
      subscriptionType
      pricePerMonth
}
}

Это функция принятия, она принимает пару мутаций, одна из которыхCreateOrder.Аполлон работает так, что мне нужно передать переменные prop в компонент createOrder.Проблема в том, что у меня нет planID на данный момент.planID доступен только внутри самого компонента.

const Composed = adopt({
  toggleCart: <Mutation mutation={TOGGLE_CART_MUTATION} />,
  createOrder: <Mutation mutation={CREATE_ORDER_MUTATION} />,
});

Мой компонент выглядит следующим образом.У меня есть planID здесь, но как я могу передать его в качестве аргумента для мутации ?!

render() {
const { plan } = this.props;
return (
  <Composed>
    {({ toggleCart, createOrder }) => {
      const handleAdd = () => {
        toggleCart();
        Router.push('/waschingmachine');
        createOrder();
      };
      return (
        <StyledPlan>
          <h1>{plan.name}</h1>
          <p>{plan.description}</p>
          <img src={`static${plan.images[0]}`} alt="blue1" />
          <h2>{plan.pricePerMonth / 100} EUR</h2>
          <div className="buttons">
            <Link
              href={{
                pathname: '/plan',
                query: { id: plan.id },
              }}
            >
              <button type="button">info</button>
            </Link>
            <button onClick={handleAdd} type="button">
              Select Plan
            </button>
          </div>
        </StyledPlan>
      );
    }}
  </Composed>
);
}

Если нет способа решить это таким образом, как бы вы подошли к нему иначе?

Ответы [ 2 ]

0 голосов
/ 13 июня 2019

Вот как вы можете передать аргументы через react-adopt путь в ваши внутренние мутации mapper: 

// In a nutshell, `react-adopt` allows you to pass props to your `Composed`
// component, so your inner `mapper` can access those props to pass them to 
// your <Query> or <Mutation>

// Here's your initial `Composed` component from above
const Composed = adopt({
  // `planId` is passed from below via props (see `<ContainerComponent />) 
  toggleCart: ({ planId, render }) => (
    <Mutation mutation={TOGGLE_CART_MUTATION} variables={{ planId }}>{render}</Mutation>,
    ),
  // `planId` is passed from below via props (see `<ContainerComponent />)
  createOrder: ({ planId, render })=> (
    <Mutation mutation={CREATE_ORDER_MUTATION} variables={{ planId }}>{render}</Mutation>                 
  )
});

// `<ContainerComponent />` will take a plan as its props and passed `planId` to 
// the `<Composed />` component
const ContainerComponent = ({ plan }) => (
  <Composed planId={plan.id}>
    {({ toggleCart, createOrder }) => {      
      const handleAdd = e => {
        e.preventDefault();
        toggleCart();
        // ...
        createOrder();
        // ...
      };

      // Whatever your UI needs you can pass them here via here
      return <YourPresentationComponent onClick={handleAdd} />;
    }}
  </Composed>
)

// Now all you need to do is to pass `plan` from your render() to the 
// <ContainerComponent /> (This is the render() where you return your 
render() {
  const { plan } = this.props;
  return <ContainerComponent plan={plan} />
}

Надеюсь, это может помочь решить вашу проблему!Просто примечание, вы также можете получить предыдущее значение mapper и передать его следующему преобразователю fn как часть аргумента, см. Ниже: 

const Composed = adopt({ 
  // Here you can retrieve the actual `plan` by using `userId` and pass the result 
  // into your next children mapper fn to consume
  plan: ({ userId, render }) => (
   <Query query={GET_PLAN_GRQPHQL} variables={{ userId }}>{render}</Query>
  ),
  // `plan` is actually coming from above <Query /> component 
  toggleCart: ({ plan, render }) => { //... },
  createOrder: ({ plan, render }) => { //...}
});
0 голосов
/ 23 декабря 2018

Функция преобразования, передаваемая в отрисованных дочерних элементах, может вызываться с параметрами.Опции могут включать переменные, используемые в строке мутации GraphQL. [1] .

Это означает, что вы можете вызвать мутационную функцию createOrder следующим образом. 

createOrder({ variables: { planID: 'some plan id' } });

Учитывая динамический характерУ planID есть несколько способов реализовать это.Одним из них является использование атрибутов данных, как показано ниже:

Атрибут data может быть установлен для идентификатора плана на кнопке. 

<button onClick={handleAdd} data-planid={plan.id} type="button">
      Select Plan
</button>

handleAdd может быть изменен наполучить planid из целевого атрибута набора данных и вызвать createOrder с переменной planID. 

const handleAdd = event => {
    const planID = event.target.dataset.planid;
    toggleCart();
    Router.push('/waschingmachine');
    createOrder({ variables: { planID } });
};

Другой способ - напрямую передать planID в handleAdd при вызове его в onClickопора для кнопки. 

<button onClick={() => handleAdd(plan.id)} type="button">
      Select Plan
</button>

Затем обновите обработчик 

const handleAdd = planID => {
    toggleCart();
    Router.push('/waschingmachine');
    createOrder({ variables: { planID } });
};

Есть компромиссы для обоих подходов.Для более раннего подхода planid задается в DOM как атрибуты и может быть прочитан позже.В то время как для последующего, N обработчиков созданы для N планов и хранятся в памяти.

...