从服务Reactjs中的ApolloProvider获取ApolloClient

Question

当前，我正在这样获取服务（非反应性的js文件）中的GraphQL数据：

import gql from 'graphql-tag';
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from 'apollo-cache-inmemory';

const client = new ApolloClient({
  uri: myURL,
  cache: new InMemoryCache()
});

const MY_QUERY = gql`
query eventsForCell($cellId: ID!, $startsAt: Time, $endsAt: Time) {
  eventsForCell(cellId: $cellId, startsAt: $startsAt, endsAt: $endsAt) {
    externalId
    startsAt
    endsAt
    type
    platform {
      name
    }
    contractor {
      name
      id
    }
    asset {
      fleet {
        name
        id
      }
      name
      registration
      id
      address
      city {
        name
        id
      }
    }
  }
}
`;

// Query StartPoint & EndPoint
let startPoint = new Date();
startPoint.setMonth(startPoint.getMonth() - 5);

let endPoint = new Date();
endPoint.setMonth(endPoint.getMonth() + 2);

export let schedulerData = client.query({
  query: MY_QUERY,
  variables: {
    "cellId" : "1",
    "startsAt" : startPoint.toISOString(),
    "endsAt" : endPoint.toISOString()
  }
}).then(response => response.data.eventsForCell.map((cell) => {
  return [{
    Id: cell.asset.id,
    CarName: cell.asset.name,
    Registration: cell.asset.registration,
    FleetName: cell.asset.fleet.name
  }, {
    Id: cell.externalId,
    CarId: cell.asset.id,
    Subject: cell.type,
    StartTime: cell.startsAt,
    EndTime: cell.endsAt
  }, {
    key: cell.asset.id,
    value: cell.asset.registration,
  }, {
    key: cell.asset.id,
    value: cell.asset.name,
  }, {
    key: cell.asset.fleet.id,
    value: cell.asset.fleet.name,
  }]
}
));

然后，我通过App将所需的对象导入我的类组件中。我要在这里完成的工作是在index.js中使用ApolloProvider这样的代码：

import '@babel/polyfill';

import React from 'react';
import { render } from 'react-dom';
import './components/App/i18n';
import App from './components/App';
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo';

const client = new ApolloClient({
  uri: myURL,
  cache: new InMemoryCache()
});

render(
    <ApolloProvider client={client}>
    <App />
    </ApolloProvider>,
    document.querySelector('#root')
);

因此，我可以摆脱服务内部的客户端。但是，如何在简单的var中导入客户端？带Apollo的包装器似乎仅适用于类和功能性的React组件。我在这里的服务只是一个导出到我的react组件中的var（在本地js文件中）。有什么建议吗？非常感谢]]

目前，我正在这样获取服务（非反应性js文件）中的GraphQL数据：从'graphql-tag'导入gql；从'apollo-boost'导入ApolloClient;从'apollo -...

Answer 1

创建一个新文件，例如实例化并导出客户端的client.js旁的index.js：

import ApolloClient from 'apollo-boost';
import { InMemoryCache } from 'apollo-cache-inmemory';

export const client = new ApolloClient({
  uri: myURL,
  cache: new InMemoryCache()
});