Как передать переменные в запрос 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 все еще существует, но не рекламируется документация