React Apollo GraphQL，很多查詢，但是一個組件可以重用

Question

我有這種情況：

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);

我需要改變查詢“ MY_BEAUTIFUL_WORKTYPE_QUERY ”選擇MY_BEAUTIFUL_WORKTYPE_QUERY或MY_VERYBAD_WORKTYPE_QUERY基於“ workType ”在父組件“托TeamComponent ”。

但是如何？

也許我必須重新考慮一切？

我哪里錯了？

Answer 1

我認為您可以在此處采用兩種簡單的方法：

1）執行兩個查詢...，然后在 WorkItemComponent中選擇所需的結果集。 顯然，這有點浪費，因為您將運行一個不需要的查詢。

2）導出兩個不同的組件。 將它們包裹在第三個組件中進行選擇。 示例代碼：

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;

因此，組成兩個不同的組件，並在渲染時在它們之間切換。 功能組件和重組使其變得相當簡單而優雅！