React Apollo GraphQL，很多查询，但是一个组件可以重用

Question

I have this situation:

TeamComponent.js:

....more code
  <WorkItemComponent workType="Beautiful">
  <WorkItemComponent workType="VeryBad">
....more code

WorkItemComponent.js:

import React, { Component } from "react";
import { graphql } from "react-apollo";
import { compose, withHandlers } from "recompose";
import MY_BEAUTIFUL_WORKTYPE_QUERY from "./MY_BEAUTIFUL_WORKTYPE_QUERY";
import MY_VERYBAD_WORKTYPE_QUERY from "./MY_VERYBAD_WORKTYPE_QUERY";
import AmazingComponent from "./AmazingComponent";

class WorkItemComponent extends Component {
  <AmazingComponent/>
}

export default compose(
  graphql(MY_BEAUTIFUL_WORKTYPE_QUERY), // <-- here I need to change this query
  choosing from [MY_BEAUTIFUL_WORKTYPE_QUERY, MY_VERYBAD_WORKTYPE_QUERY] based on "workType" prop in parent component "TeamComponent".
  withHandlers({
    ...
  })
)(WorkItemComponent);

I need to change the query " MY_BEAUTIFUL_WORKTYPE_QUERY " choosing MY_BEAUTIFUL_WORKTYPE_QUERY or MY_VERYBAD_WORKTYPE_QUERY based on " workType " prop in parent component " TeamComponent ".

But how?!

Maybe I have to rethink everything?

Where am I wrong?

Answer 1

I think there are two easy approaches you could take here:

1) Execute both queries ... and choose which results set you want inside WorkItemComponent. Obviously this is slightly wasteful as you'll be running one query you don't need.

2) Export two different components. Wrap them in a 3rd component that does the choosing. Example code:

const handlers = withHandlers({
  ...
});

const ComponentOne = compose(
  graphql(MY_BEAUTIFUL_WORKTYPE_QUERY),
  handlers
)(WorkItemComponent);

const ComponentOne = compose(
  graphql(MY_VERYBAD_WORKTYPE_QUERY),
  handlers      
)(WorkItemComponent);

const Switcher = ({workType}) => workType === "something" ? <ComponentOne/> : <ComponentTwo/>;

export default Switcher;

So, compose up two different components, and switch between them at render time. Functional components and recompose make this rather simple and elegant!