reactjs - 如何在react-apollo中模拟GraphQL API以进行离线API调用

Question

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

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，因为目前我收到控制台错误:发布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 之前，客户端将使用网络接口(interface)，这是一个类似的概念，但意味着执行网络请求。另一方面，链接不必发出或假装发出网络请求。此外，它们可以更容易地组合，并且已经开发了许多不同的链接。您使用的 Apollo Client 版本似乎高于 2.0。项目apollo-test-utils似乎大部分被遗弃了。好像被apollo-link-schema取代了。 mocking section描述如何使用链接来模拟数据。