Как преобразовать HOC, чтобы реагировать на синтаксис компонента для Apollo?

Question

Может ли кто-нибудь помочь мне понять, как можно абстрагировать логику apollo graphQL для преобразования между использованием apollo с HOC и использованием более современного синтаксиса <Query>({data, loading})=>(<MyComponent data={data} loading={loading}/>)</Query>?Или, если я не могу этого сделать, как вы можете использовать HOC в подкомпоненте, который не является целой страницей?Я использую next-apollo-appsync для решения всех моих проблем с GraphQL:

import { withAppSyncData } from "next-apollo-appsync";
import AppSyncConfig from "./aws-exports";

const config = {
  url: AppSyncConfig.aws_appsync_graphqlEndpoint,
  region: AppSyncConfig.aws_appsync_region,
  auth: {
    type: AppSyncConfig.aws_appsync_authenticationType,
    apiKey: AppSyncConfig.aws_appsync_apiKey
  }
};

export default withAppSyncData(config);

Как только я создаю функцию withData с моими настройками appsync, я использую функцию withData для создания функции TodosWithData.

import withData from "../../lib/withData";
import gql from "graphql-tag";
import { graphql } from "react-apollo";

const query = gql`
  query listTodos {
    listTodos {
      items {
        id
        name
        completed
      }
    }
  }
`;

const TodosWithData = MyComponent =>
  withData(
    graphql(query, {
      options: {
        fetchPolicy: "cache-and-network"
      },
      props: props => ({ todos: props.data.listTodos ? props.data.listTodos.items : [] })
    })(MyComponent)
  );

export default TodosWithData;

Эта функция будет принимать реагирующий компонент в качестве входа и будет возвращать apollo, обернутый вокруг компонента, и у нас будет доступ к данным в this.props.data, как мы и ожидали.Странно то, что я могу заставить этот тупой компонент ниже работать, но только если он находится на уровне страницы - он не будет работать, если я переместу его в компонент, который я загружаю со страницы.

import React from "react";
import TodosQuery from "../graphql/components/todos";

class Todos extends React.Component {
  render() {
    console.log(this.props); //We have access to the apollo payload
    return (
      <div>
        <p>Static Text</p>
      </div>
    );
  }
}

//This is what injects apollo payload into the Todos dumb-component.
export default TodosQuery(Todos); 

Вот рабочий репо для справки.Фактическая ошибка, которую я получаю Cannot read property 'apollo' of undefined

Answer 1

Для уточнения моего комментария и использования синтаксиса <Query>:

В src/index.js:

import React from "react";
import withData from "../lib/withData";
import TodosWithData from "../graphql/components/todos";

class App extends React.Component {
  render() {
    console.log("props: ", this.props);
    return (
      <div>
        <p>Hello World</p>
        <TodosWithData />
      </div>
    );
  }
}

export default withData(App);

В src/graphql/components/todos.js:

import React from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";

const query = gql`
  query listTodos {
    listTodos {
      items {
        id
        name
        completed
      }
    }
  }
`;

const TodosWithData = () => (
  <Query query={query} fetchPolicy="cache-and-network">
    {({ loading, error, data: { listTodos } }) => {
      if (error) return <div>Error loading todos</div>
      if (loading) return <div>Loading...</div>
      return (
        <div>
          <ul>
            {listTodos.items.map(todo => (
               <li key={todo.id}>{`${todo.name}${todo.completed ? " - DONE" : ""}`}</li>
            ))}
          </ul>
        </div>
      )
    }}
  </Query>
);

export default TodosWithData;