How to use the react-apollo.withApollo function in react-apollo

{
                onStartSubmit()
                onEndSubmit()
                next('bind-settings')
              }}
            />
          
        
      
    )
  }
}

export default withApollo(NetworkSettings)

onChange={e => onContentChange(e)}
                ref={contentInputRef}
              />
            
          
          <button type="submit">Save</button>
        
      
      {isActive &amp;&amp; (
        <div> setDeactivate(true)} /&gt;
      )}
    
  );
}

export default withApollo(AddNote);
</div>

const withData = graphql(FAKE_HISTORY_QUERY, {
    options: ({histQueryKey}) => {
      return {
        fetchPolicy: 'cache-only',
        variables: {
          histQueryKey: histQueryKey,
        },
      };
    },
    props: ({data, errors}) => ({
      historyBuckets: (data.project && data.project.runs) || {edges: []},
    }),
  });

  return withApollo(withData(HistoryLoader));
}

}
      power {
        power
        powerLevels
      }
    }
  }
`;
export default graphql(QUEUING_QUERY, {
  options: ownProps => ({
    fetchPolicy: "cache-and-network",
    variables: {
      simulatorId: ownProps.simulator.id
    }
  })
})(withApollo(LongRangeComm));

ref={node => (this.input = node)}
                            onBlur={this.onBlur}
                            onChange={this.onChange}
                            onFocus={this.onFocus}
                            onKeyDown={this.handleKeyDown}
                            placeholder="Search"
                            type="text"
                        />
                    
                )}
            
        )
    }
}

export default withApollo(Search)

state
        charge
        heat
      }
      arc
      holdToCharge
    }
  }
`;

export default graphql(PHASERS_QUERY, {
  options: ownProps => ({
    fetchPolicy: "cache-and-network",
    variables: {simulatorId: ownProps.simulator.id},
  }),
})(withApollo(PhaserCharging));

report
      }
      power {
        power
        powerLevels
      }
    }
  }
`;

export default graphql(TRANSPORTERS_QUERY, {
  options: ownProps => ({
    fetchPolicy: "cache-and-network",
    variables: { simulatorId: ownProps.simulator.id }
  })
})(withApollo(Transporters));

constructor(props) {
    super(props)
    window.localStorage.removeItem('token')
    this.props.client.resetStore()

    if (config.logout.redirectUrl) {
      window.location = config.logout.redirectUrl
    }
  }

  render() {
    return 
  }
}

export default withApollo(LogoutPage)

timelineItems {
          id
          args
          delay
          event
          name
          type
          needsConfig
          noCancelOnReset
        }
      }
    }
  }
`;

const MissionsConfigData = withApollo(
  ({
    match: {
      params: { missionId }
    },
    client,
    history
  }) => {
    return (
      
        {({ loading, data, subscribeToMore }) => {
          if (loading || !data) return null;
          const mission = data.missions[0];
          return loading || !data ? null : (
            
                subscribeToMore({

delay={{ show: 0, hide: 0 }}
                    >
                      
                     */}
                  
                ))}
              
            
          )
        }
      
    );
  }
}

export default withApollo(AlertCondition);