Как передать переменные в запрос GraphQL?

предположим, у меня есть следующий запрос GraphQL в React-Apollo

const CurrentUserForLayout = gql`
  query CurrentUserForLayout($avatarID: Int!) {
    currentUser {
      avatar_url(avatarID: $avatarID)
    }
  }
`;

const ProfileWithData = graphql(CurrentUserForLayout, {
  options: { variables: { avatarID: 1 } },
})(Profile);

теперь, если я хочу, чтобы мой компонент React Profile изменить avatarID,

как бы я это сделал?

Я новичок в React и GraphQl, и я действительно не понимаю связь здесь:

graphql(CurrentUserForLayout, {
      options: { variables: { avatarID: 1 } },
    })(Profile);

мне действительно нужен другой родительский компонент вокруг ProfileWithData пройти еще один avatarID запрос? Но что делать, если ID управляется компонентом профиля, как должен ли я сообщить об этом родительскому компоненту?

3 ответов


код ProfileWithData компонент выполняет хорошую работу по рендерингу Аватара определенного пользователя. Этот компонент не отвечает за управление изменениями текущего компонента Аватара.

один из способов-добавить новый реквизит avatarId это передается из родительского компонента. Тогда вам нужно будет написать следующее:

graphql(CurrentUserForLayout, {
  options: (ownProps) => ({
    variables: {
      id: ownProps.avatarId
    }
  })
})(Profile);

если вы знакомы с react-router, другой подход - использовать параметры маршрута для определения идентификатора Аватара. Вам понадобится чтобы настроить вызов graphql такой:

graphql(CurrentUserForLayout, {
  options: (ownProps) => ({
    variables: {
      id: ownProps.params.avatarId
    }
  })
})(Profile);

чтобы узнать больше об использовании переменных запроса, вы можете проверить реагировать трек узнать Аполлон.


до сих пор, я знаю два возможных подхода к этому.

первый один уже изложен в вопросе. Переменные в то же время являются реквизитом ProfileWithData. Таким образом, вам нужно найти способ изменить реквизит и перенаправить компонент. Обычно это достигается с помощью родительского компонента. Поэтому обычно вы не меняете переменные внутри ProfileWithData. Этот компонент должен использоваться только для отображения. Однако это не говорит о том, что это невозможно. Вы можете передать методы родительского компонента ребенку, чтобы управлять состоянием родителя. Это приведет к перезапуску обоих компонентов и визуализации ProfileWithData с новыми реквизитами / переменными.

второй подход заключается в запросе изнутри ProfileWithData компонент. Затем вы можете управлять переменными изнутри компонента с помощью состояния. Метод для этого можно найти здесь

вы можете сделать это передача ссылки на клиент Apollo с помощью withApollo компонент более высокого порядка, как описано здесь: http://dev.apollodata.com/react/higher-order-components.html#withApollo

тогда вы можете позвонить client.query на переданном в объект, вроде так:

 class MyComponent extends React.Component {
      runQuery() {
        this.props.client.query({
          query: gql`...`,
          variables: { ... },
        });
      }

      render() { ... }
    }

    withApollo(MyComponent);

Перед Клиентом Apollo 2.1

перед Apollo Client 2.1, когда вы должны были использовать Компоненты Более Высокого Порядка (HOCs), было два решения, которые были указаны правильно Хенк в другом ответе. Я стараюсь кратко суммировать их:--10-->

  • поскольку HOC имеет доступ только к реквизиту, вам нужно ввести изменяющуюся переменную в родительский компонент. Например, родительский компонент может иметь местном государственном управлении для изменения переменной с метод. Как только переменная изменяется в локальном состоянии, она может быть передана другому компоненту, который усиливается HOC. HOC имеет доступ к реквизиту и может выполнить запрос с измененной переменной. подсказка: если вы не хотите вводить другой компонент между ними, чтобы изменить локальное состояние,recompose ' s withState HOC может быть отличным выбор.

  • второй способ, но, возможно, менее элегантный способ, потому что он сдвигает ваш код с декларативного на императивный, будет использовать withApollo() HOC, который дает вам доступ к экземпляру клиента Apollo в качестве prop. Имея этот экземпляр в вашем компоненте React, вы можете вызвать client.query({ query: ..., variables: ... }) в одном из методов класса компонента (например,onChange handler) после изменения переменной.

Начиная С Клиента Apollo 2.1

С Apollo Client 2.1 вы можете использовать новый компонент запроса (и мутации). HOC все еще существует, но не рекламируется документация