Graphql 使用Apollo 2.0、react Apollo和Apollo链接模式进行客户端查询模拟

我希望能够在客户端模拟一些查询，这样我就不必为了在React应用程序上工作而提供GraphQL端点

根据阿波罗文件，我应该使用它。我曾尝试遵循该示例，但在本例中，我最终遇到了一个错误：

网络错误：在尝试访问包装组件内的查询结果时，预期未定义为GraphQL架构。

有人能帮我理解我做错了什么吗？

下面是一个完整的

index.js

示例来说明我的问题：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { SchemaLink } from "apollo-link-schema";
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloCache } from 'apollo-cache';

import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

import { makeExecutableSchema, addMockFunctionsToSchema, MockList } from 'graphql-tools';
const typeDefs = `
type Query {
  me: Person!
}

type Person {
    name: String!
}
`;
const schema = makeExecutableSchema({ typeDefs });
addMockFunctionsToSchema({ schema });

const schemaLink = new SchemaLink(schema);
const client = new ApolloClient({
    link: schemaLink,
    cache: new InMemoryCache()
});

class App extends Component {
  render() {
        if (this.props.query && this.props.query.loading) {
            return <div>Loading...</div>
        }

        if (this.props.query && this.props.query.error) {
            return <div>Error: {this.props.query.error.message}</div>
        }

        const person = this.props.query.me;
        return <div> {person.name} </div>
  }
}

const personQuery = gql`
    query PersonQuery {
        me {
            name
        }
    }
`;
App = graphql(personQuery, { name: 'query' })(App);

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

import React，{Component}来自'React'；
从“react dom”导入react dom；
从'react apollo'导入{ApolloProvider}；
从“apollo客户端”导入{apollo客户端}；
从“阿波罗链接模式”导入{SchemaLink}；
从'apollo cache inmemory'导入{InMemoryCache}；
从“阿波罗缓存”导入{apollo缓存}；
从“graphql标签”导入gql；
从'react apollo'导入{graphql}；
从“graphql工具”导入{makeExecutableSchema，addMockFunctionsToSchema，MockList}；
常量typeDefs=`
类型查询{
我：人！
}
类型人{
名字：字符串！
}
`;
const schema=makeExecutableSchema（{typeDefs}）；
addMockFunctionsToSchema（{schema}）；
const schemaLink=新schemaLink（schema）；
const客户端=新客户端({
链接：schemaLink，
缓存：新的InMemoryCache（）
});
类应用程序扩展组件{
render（）{
if（this.props.query&&this.props.query.loading）{
返回加载。。。
}
if（this.props.query&&this.props.query.error）{
返回错误：{this.props.query.Error.message}
}
const person=this.props.query.me；
返回{person.name}
}
}
const personQuery=gql`
查询人员查询{
我{
名称
}
}
`;
App=graphql（personQuery，{name:'query'}）（App）；
ReactDOM.render(

，document.getElementById（'root'））
);

更新：我可以使用react apollo/test utils中的MockedProvider使事情正常运行，但我想知道这是否是最好的方法。例如，据我所知，使用MockedProvider需要为组件可能执行的每个查询设置精确的匹配项，而

graphql工具中的
addMockFunctionsToSchema
将允许您更灵活地自定义模拟，如中所示--我只希望我能做到这一点

以下是使用MockedProvider更新的
index.js
文件示例：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { SchemaLink } from "apollo-link-schema";
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloCache } from 'apollo-cache';

import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

import { MockedProvider } from 'react-apollo/test-utils';

import { makeExecutableSchema, addMockFunctionsToSchema, MockList } from 'graphql-tools';
const typeDefs = `
type Query {
  me: Person!
}

type Person {
    name: String!
}
`;
const schema = makeExecutableSchema({ typeDefs });
addMockFunctionsToSchema({ schema });

const schemaLink = new SchemaLink(schema);
const client = new ApolloClient({
    link: schemaLink,
    cache: new InMemoryCache()
});

class App extends Component {
  render() {
        if (this.props.query && this.props.query.loading) {
            return <div>Loading...</div>
        }

        if (this.props.query && this.props.query.error) {
            return <div>Error: {this.props.query.error.message}</div>
        }

        const person = this.props.query.me;
        return <div> {person.name} </div>
  }
}

const personQuery = gql`
    query PersonQuery {
        me {
            __typename
            name
        }
    }
`;
const personQueryMockedData = {
    me: {
        __typename: 'String',
        name: 'Gabe'
    }
}


App = graphql(personQuery, { name: 'query' })(App);

ReactDOM.render(
    <MockedProvider mocks={
        [
            { 
                request: { query: personQuery, variables: { cache: false } },
                result: { data: personQueryMockedData }
            }
        ]
    }>
        < App />
    </MockedProvider>
    , document.getElementById('root')
);

import React，{Component}来自'React'；
从“react dom”导入react dom；
从'react apollo'导入{ApolloProvider}；
从“apollo客户端”导入{apollo客户端}；
从“阿波罗链接模式”导入{SchemaLink}；
从'apollo cache inmemory'导入{InMemoryCache}；
从“阿波罗缓存”导入{apollo缓存}；
从“graphql标签”导入gql；
从'react apollo'导入{graphql}；
从'react apollo/test utils'导入{MockedProvider}；
从“graphql工具”导入{makeExecutableSchema，addMockFunctionsToSchema，MockList}；
常量typeDefs=`
类型查询{
我：人！
}
类型人{
名字：字符串！
}
`;
const schema=makeExecutableSchema（{typeDefs}）；
addMockFunctionsToSchema（{schema}）；
const schemaLink=新schemaLink（schema）；
const客户端=新客户端({
链接：schemaLink，
缓存：新的InMemoryCache（）
});
类应用程序扩展组件{
render（）{
if（this.props.query&&this.props.query.loading）{
返回加载。。。
}
if（this.props.query&&this.props.query.error）{
返回错误：{this.props.query.Error.message}
}
const person=this.props.query.me；
返回{person.name}
}
}
const personQuery=gql`
查询人员查询{
我{
__字体名
名称
}
}
`;
const personQueryMockedData={
我：{
__typename:'字符串'，
姓名：“盖布”
}
}
App=graphql（personQuery，{name:'query'}）（App）；
ReactDOM.render(

，document.getElementById（'root'））
);
我认为链接应该是其他链接

试试这个

import { ApolloLink, Observable } from 'apollo-link';

// ...
const link = new ApolloLink(operation => {
  const { query, operationName, variables } = operation;
  return new Observable(observer =>
    graphql(schema, print(query), null, null, variables, operationName)
      .then(result => {
        observer.next(result);
        observer.complete();
      })
      .catch(observer.error.bind(observer))
  );
});

在代码上下文中

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import { ApolloLink, Observable } from 'apollo-link';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { SchemaLink } from "apollo-link-schema";
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloCache } from 'apollo-cache';

import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

import { makeExecutableSchema, addMockFunctionsToSchema, MockList } from 'graphql-tools';
const typeDefs = `
type Query {
  me: Person!
}

type Person {
    name: String!
}
`;
const schema = makeExecutableSchema({ typeDefs });
addMockFunctionsToSchema({ schema });

const link = new ApolloLink(operation => {
  const { query, operationName, variables } = operation;
  return new Observable(observer =>
    graphql(schema, print(query), null, null, variables, operationName)
      .then(result => {
        observer.next(result);
        observer.complete();
      })
      .catch(observer.error.bind(observer))
  );
});
const client = new ApolloClient({
  link,
  cache: new InMemoryCache()
});

class App extends Component {
  render() {
    if (this.props.query && this.props.query.loading) {
      return <div>Loading...</div>
    }

    if (this.props.query && this.props.query.error) {
      return <div>Error: {this.props.query.error.message}</div>
    }

    const person = this.props.query.me;
    return <div> {person.name} </div>
  }
}

const personQuery = gql`
    query PersonQuery {
        me {
            name
        }
    }
`;
console.log(personQuery)
App = graphql(personQuery, { name: 'query' })(App);

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

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“阿波罗链接”导入{apollo链接，可观测}；
从'react apollo'导入{ApolloProvider}；
从“apollo客户端”导入{apollo客户端}；
从“阿波罗链接模式”导入{SchemaLink}；
从'apollo cache inmemory'导入{InMemoryCache}；
从“阿波罗缓存”导入{apollo缓存}；
从“graphql标签”导入gql；
从'react apollo'导入{graphql}；
从“graphql工具”导入{makeExecutableSchema，addMockFunctionsToSchema，MockList}；
常量typeDefs=`
类型查询{
我：人！
}
类型人{
名字：字符串！
}
`;
const schema=makeExecutableSchema（{typeDefs}）；
addMockFunctionsToSchema（{schema}）；
常量链接=新链接（操作=>{
const{query，operationName，variables}=operation；
返回新的可观察对象（观察者=>
graphql（模式、打印（查询）、null、null、变量、操作名）
。然后（结果=>{
下一步（结果）；
observer.complete（）；
})
.catch（observer.error.bind（observer））
);
});
const客户端=新客户端({
链接
缓存：新的InMemoryCache（）
});
类应用程序扩展组件{
render（）{
if（this.props.query&&this.props.query.loading）{
返回加载。。。
}
if（this.props.query&&this.props.query.error）{
返回错误：{this.props.query.Error.message}
}
const person=this.props.query.me；
返回{person.name}
}
}
const personQuery=gql`
查询人员查询{
我{
名称
}
}
`;
console.log（personQuery）
App=graphql（personQuery，{name:'query'}）（App）；
ReactDOM.render(

，document.getElementById（'root'））
);