Compose different queries to return different results:

[theodorDiaconu]

One component may need two different data sources to compose it's output.

compose({
   users: withQuery(() => {}, {}),
   properties: withQuery(() => {}, {})
}, {
   anyIsLoadingTemplate: => ?
})(Component)

Component props =>

{ users : { isLoading, error, data } },
{ properties : { isLoading, error, data } },

[medihack]

@theodorDiaconu Is there already a solution for using multiple queries with grapher-react? I really like its API, but I can't find an example how to do it :-(

How about something like

withQuery(props => {
  return {
    posts: getPostLists.clone(),
    tags: getTagList.clone()
  }
})(Component)

and then access it in the component with:

props.posts.isLoading
props.tags.isLoading

and so on.

But I am not sure if this is doable as I just started to use grapher and grapher-react.

[theodorDiaconu]

You can now use compose: https://github.com/acdlite/recompose and do this

[medihack]

Ah, I get it. Your initial post here is a hint how to do it, and not something that is planned :-) Would be nice to have an example in the Readme. Thanks for grapher! I just came back to Meteor after some time using other stuff and grapher looks really cool.

[theodorDiaconu]

This is a nice to have in the library too, but currently can be done in so many ways since withQuery respects HOC pattern. Glad you enjoy Grapher. A lot of work has been put behind the scenes.

[medihack]

For others interested, here is a solution I came up with ...

export default compose(
  namespace(
    'posts',
    withQuery(() => {
      return postListQuery.clone()
    })
  ),
  namespace(
    'tags',
    withQuery(() => {
      return tagListQuery.clone()
    })
  )
)(Component)

with using the following namespace helper function

import { compose, withProps, mapProps } from 'recompose'

const namespace = (ns, ...hocs) =>
  compose(
    withProps(props => ({ $parentProps: props })),
    ...hocs,
    mapProps(props => ({ [ns]: props, ...props.$parentProps }))
  )

export default namespace

And yes, a built in API would be nice to have. Maybe one that even has a common loadingComponent and errorComponent.

[erixtekila]

+1