Клиент Apollo GraphQL (ReactJS) - Доступ к реквизитам в запросе graphql - PullRequest
Новая
       13

Клиент Apollo GraphQL (ReactJS) - Доступ к реквизитам в запросе graphql

0 голосов
/ 27 мая 2018

У меня есть компонент, который показывает всех пользователей, привязанных к определенному типу сущности.Компонент визуализируется с помощью помощника apollo graphql compose .Экспорт компонента выглядит следующим образом: 

export const UsersContainer = compose(
    connect(mapStateToProps, mapDispatchToProps),
    graphql(gql`
        query manager($id: Int!) {
          manager(id: $id) {
            users {
              id
              firstName
              lastName
              email
              username
            }
          }
        }`, {
    options: (props) => ({
        variables: {
            id: props.currentOrg.org.id
        }
    }),
})
)(Users);

Все это прекрасно работает.Проблема, с которой я сталкиваюсь, заключается в том, что я хочу сделать этот компонент динамическим, чтобы он работал со всеми типами сущностей (т. Е. manager, client, vendor).Итак, в приведенном выше запросе: query manager($id: Int!) изменится на: query client($id: Int!) и т. Д.

Как я могу получить доступ к хранилищу с избыточностью, чтобы получить данные для динамического построения запроса gql?Данные все доступны в магазине.Мне просто нужен способ получить доступ к реквизиту таким образом, чтобы я мог динамически создавать запрос gql.

1 Ответ

0 голосов
/ 27 мая 2018

Вам необходимо определить три разных запроса, а затем условно переключаться между ними.Проблема в том, что graphql HOC не предоставляет простой способ определить, какой запрос использовать из реквизита.Это, вероятно, проще всего сделать с новым компонентом Query, который использует шаблон рендеринга реквизитов: 

const QueryA = gql`query { # blah }`
const QueryB = gql`query { # blah }`

const WrapperComponent = props => {
  const query = props.foo ? QueryA: QueryB
  return (
    <Query query={query}>
      {({loading, error, data}) => (
        <YourComponent/>
      )}
    </Query>
  )
}

const mapStateToProps = ({ foo }) => ({ foo })
export default connect(mapStateToProps)(WrapperComponent)

Используя HOC, вы можете сделать что-то вроде: 

const QueryA = gql`query { # blah }`
const QueryB = gql`query { # blah }`

const QueryAComponent = graphql(QueryA)(YourComponent)
const QueryBComponent = graphql(QueryB)(YourComponent)

const WrapperComponent = props => (
  props.foo
  ? QueryAComponent
  : QueryBComponent
)

const mapStateToProps = ({ foo }) => ({ foo })
export default connect(mapStateToProps)(WrapperComponent)

ЕслиВы идете по маршруту HOC, вы также можете использовать что-то вроде branch Recompose для условного рендеринга компонентов.

...