Как объединить два зависимых запроса GraphQL с «compose»? - PullRequest
Новая
       11

Как объединить два зависимых запроса GraphQL с «compose»?

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

Решено!

Я пытаюсь объединить два зависимых запроса GraphQL.

Первый должен получить идентификатор, а второй - этот идентификатор.Я читал, что compose ведет себя как flowRight (), но независимо от того, в каком порядке я размещаю запросы, если queryId ниже queryDetails, то queryDetail всегда пропускается (как и ожидалось).Независимо от того, как я собрал код, переменная не определена. 

import { graphql, compose } from 'react-apollo'
import gql from 'graphql-tag'

class Home extends Component {
  constructor(props) {
    super(props)
    console.log("Where's my data?")
    console.log(props)
  }

  render() {
    return(
      <div />
    )
  }
}

export const queryIdConst = gql`
  query IdQuery {
    account(name:"SuperAccount") 
    {
      lists {
        edges {
          id
        }
      }
    } 
  }
`

export const queryDataConst = gql`
  query DataQuery($id: ID!) {
    account(name:"SuperAccount") 
    {
      list(id: $id) {
        displayTitle
      }
    } 
  }
`

export default compose(
  graphql(queryIdConst, {
    name: 'listId',
  }),
  graphql(queryDataConst, { 
    name: 'data',
    skip: ({ listId }) => !listId.data,
    options: ({ listId }) => ({
      variables: {
        id: list.data.account.lists.edges[0].id
      }
    })
  })
)(Home)

Я уже пытался изменить порядок составления функций, но в любом случае это не работает, так как я ожидал, что он будет работать.

Спасибо за любую помощь!

Редактировать: Переключение двух graphql () в compose () для встраивания с Комментарий AbsoluteSith комментарий ссылка

Solution

С советами и подсказками Daniel Rearden и AbsoluteSith Я реализовал следующее решение:

Изменил compose (): 

export default compose(
  graphql(queryIdConst, {
    name: 'listId',
  }),
  graphql(queryDataConst, { 
    name: 'dataHome', // changed to 'dataHome' to avoid confusion
    skip: ({ listId }) => !listId.account,
    options: ({ listId }) => ({
      variables: {
        id: listId.account.lists.edges[0].id
      }
    })
  })
)(Home)

И мой рендер (): 

return(
  <div>
    { dataHome && !dataHome.loading && 
      <div>{dataHome.account.list.displayTitle}</div> 
    }
  </div>
)

1 Ответ

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

При использовании graphql HOC по умолчанию обернутый компонент получает реквизит с именем data (или mutate при переходе в мутацию).Для данного запроса, например 

query IdQuery {
  account(name:"SuperAccount") {
    lists {
      edges {
        id
      }
    }
  } 
}

, после загрузки запроса результат запроса доступен в this.props.data.account.Когда вы используете опцию конфигурации name, вы указываете HOC использовать что-то отличное от data для имени проп.Таким образом, если вы установите имя на listId, то результат вашего запроса будет доступен на 

this.props.listId.account

Это означает, что второй HOC внутри compose должен выглядеть примерно так: 

graphql(queryDataConst, { 
  skip: ({ listId }) => !listId.account, // <--
  options: ({ listId }) => ({
    variables: {
      id: listId.account.lists.edges[0].id // <--
    }
  })
})
...