admin管理员组

文章数量:1428327

Solved!

I'm trying to bine two dependent GraphQL queries.

The first one should get an ID and the second one should take that ID. I read that pose behaves like flowRight(), but no matter in what order I put the queries, if queryId is below queryDetails, queryDetail's is always skipped (as expected). No matter how I put my code together the variable is undefined.

import { graphql, pose } 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 pose(
  graphql(queryIdConst, {
    name: 'listId',
  }),
  graphql(queryDataConst, { 
    name: 'data',
    skip: ({ listId }) => !listId.data,
    options: ({ listId }) => ({
      variables: {
        id: list.data.account.lists.edges[0].id
      }
    })
  })
)(Home)

I have already tried to change the pose functions order, but anyway this is not working, as I expected it to work.

Thanks for any help!

Edit: Switched the two graphql() in pose() to be inline with AbsoluteSith's ment link

Solution

With hints and help from Daniel Rearden and AbsoluteSith I implemented the following solution:

Changed the pose():

export default pose(
  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)

And my render():

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

Solved!

I'm trying to bine two dependent GraphQL queries.

The first one should get an ID and the second one should take that ID. I read that pose behaves like flowRight(), but no matter in what order I put the queries, if queryId is below queryDetails, queryDetail's is always skipped (as expected). No matter how I put my code together the variable is undefined.

import { graphql, pose } 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 pose(
  graphql(queryIdConst, {
    name: 'listId',
  }),
  graphql(queryDataConst, { 
    name: 'data',
    skip: ({ listId }) => !listId.data,
    options: ({ listId }) => ({
      variables: {
        id: list.data.account.lists.edges[0].id
      }
    })
  })
)(Home)

I have already tried to change the pose functions order, but anyway this is not working, as I expected it to work.

Thanks for any help!

Edit: Switched the two graphql() in pose() to be inline with AbsoluteSith's ment link

Solution

With hints and help from Daniel Rearden and AbsoluteSith I implemented the following solution:

Changed the pose():

export default pose(
  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)

And my render():

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

• javascript
• reactjs
• graphql
• apollo
• react-apollo

Share Improve this question Follow edited Dec 6, 2018 at 12:34 psgmnd asked Dec 6, 2018 at 9:26 psgmndpsgmnd 8311 silver badge77 bronze badges 6

• Have you tried this solution – AbsoluteSith Commented Dec 6, 2018 at 10:12
• Thanks for your reply! Yes, that's where I came from. But my variables in the second Query are always undefined. I get the query object with all the functions, but data is undefined. In your link the variable is defined with 'firstQuery.data.someQuery.someValue', should I 'call' a query or is 'list.data.account.lists.edges[0].id' the right to access data? – psgmnd Commented Dec 6, 2018 at 10:21
• Yeah try passing the right data ie; list.data.account.lists.edges[0].id. See the network calls made check if both the queries are executed and their order. But a better solution is to create a separate ponent for the second query – AbsoluteSith Commented Dec 6, 2018 at 10:40
• Also this might help too. Effectively you might not be accessing the data in the correct format/ hierarchy. – AbsoluteSith Commented Dec 6, 2018 at 11:39
• 1 Sorry saw your schema so you should be accessing the data as listId.account.lists.edges[0].id && check for listId value only – AbsoluteSith Commented Dec 6, 2018 at 11:45

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

When using the graphql HOC, by default, the wrapped ponent receives a prop called data (or mutate if passing in a mutation). Given a query like

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

once the query loads, the query result is available under this.props.data.account. When you use the name configuration option, you're telling the HOC to use something other than data for the prop name. So if you set name to listId, then your query result will be available at

this.props.listId.account

That means the second HOC inside of pose should look more like this:

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

本文标签： javascriptHow to combine two dependent GraphQL queries with 39compose39Stack Overflow