如何在react-apollo中模拟GraphQL API以进行脱机API调用

Question

我正在使用apollo客户端在我的反应应用程序中模拟graphql api。这是我的index.js（由create-react-app创建的应用程序）

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import InventoryList from './components/InventoryList';
import Header from './components/Header';
import Footer from './components/Footer';
import Settings from './components/Settings';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo';
import { mockNetworkInterfaceWithSchema } from 'apollo-test-utils';
import {typeDefs} from './components/schema';
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';

const schema = makeExecutableSchema({ typeDefs });
addMockFunctionsToSchema({ schema });

const mockNetworkInterface = mockNetworkInterfaceWithSchema({ schema });

const client = new ApolloClient({
  // By default, this client will send queries to the
  //  `/graphql` endpoint on the same host
  // Pass the configuration option { uri: YOUR_GRAPHQL_API_URL } to the `HttpLink` to connect 
  // to a different host

  link: new HttpLink({ uri: 'http://localhost:3000/graphql'}),
  networkInterface: mockNetworkInterface,
  cache: new InMemoryCache(),
});

// Requesting data
client.query({ query: gql`{ hello }` }).then(console.log);

ReactDOM.render(
  <ApolloProvider client={client}>
    <Router>
      <div>
        <Header />
        <Route exact path="/" component={App} />
        <Route exact path="/inventory" component={InventoryList} />
        <Route exact path="/settings" component={Settings} />
        <Footer />
      </div>
    </Router>
  </ApolloProvider>,
  document.getElementById('root')
)
registerServiceWorker();

这是我的组件LoggedInUser（应用程序组件的子代） -

import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import {typeDefs} from './schema';
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';

const schema = makeExecutableSchema({ typeDefs });
addMockFunctionsToSchema({ schema });

const usersListQuery = gql`
  query UsersListQuery {
    users {
      id
      name
    }
  }
`;

function LoggedInUsers({ data: { users, refetch, loading, error } }) {
  return (
    <div>
      {/*<button onClick={() => refetch()}>
        Refresh
      </button> */}
      <ul>
        {users && users.map(user => (
          <li key={user.id}>
            {user.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default graphql(usersListQuery)(LoggedInUsers);

我只是困惑如何击中模拟API，因为目前我收到控制台错误：POST http://localhost:3000/graphql 404（未找到）

我正在学习本教程 - https://dev-blog.apollodata.com/full-stack-react-graphql-tutorial-582ac8d24e3b

Answer 1

这个定义对我来说很奇怪。特别是在Apollo客户选项中彼此相邻的link和networkInterface的定义。

const client = new ApolloClient({
  link: new HttpLink({ uri: 'http://localhost:3000/graphql'}),
  networkInterface: mockNetworkInterface,
  cache: new InMemoryCache(),
});

Apollo的界面最近发生了变化。在Apollo Client> 2.0中，客户端只需一个链接。链接是接受查询并返回结果的适配器。在2.0之前，客户端将使用类似概念的网络接口，但暗示执行网络请求。另一方面，链接不必发出网络请求或假装。此外，它们可以更容易组合，并且已经开发了许多不同的链接。您似乎在大于2.0的版本中使用Apollo Client。 apollo-test-utils项目似乎大多被放弃了。它似乎被apollo-link-schema取代。 mocking section描述了如何使用链接来模拟数据。