使用 graphql-tools、apollo-link-schema 和 react-hooks 在模拟时总是返回 undefined

Question

我刚开始在 React 中使用 GraphQL，并且一直在将一个项目从 REST API 转移到一个新的 GraphQL 项目。作为其中的一部分，我想设置模拟数据以在独立于正在完成的 GQL API 的应用程序上工作。我花了很多时间尝试关注 Apollo 和 GraphQL Tools docs 但无论如何，我似乎无法让模拟解析器正常工作。对于上下文，我在 NextJS/React 应用程序中使用它，这里是我正在尝试做的最小示例：

设置 App.js

import React from 'react';
import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { SchemaLink } from 'apollo-link-schema';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { addMocksToSchema } from '@graphql-tools/mock';

export default function App() {
    const schema = makeExecutableSchema({typeDefs:`
        type Query {
            getPerson: Person!
        }
                
        type Person {
            name: String!
        }
    `});

    const mocks = {
        Query: () => ({
            getPerson: () => ({
                name: () => "Name"
            })
        })
    }

    addMocksToSchema({ mocks, schema });
    const link = new SchemaLink({ schema });
    const client = new ApolloClient({
        link,
        cache: new InMemoryCache(),
        connectToDevTools: true
    });

    return (
        <ApolloProvider client={client}>
            <Person />
        </ApolloProvider>
    )
}

Person.js

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

export default function Person() {
    const { loading, error, data } = useQuery(gql`
        query PersonQuery {
            getPerson {
                name
            }
        }
    `, {
        errorPolicy: 'all'
    });

    console.log(data);

    if (loading) return "Loading...";
    if (error) console.log(error);

    return (
        <h1>{data.getPerson.name}<h1>
    )
}

查看 console.log(error) 结果会产生错误 Cannot return null for non-nullable field Query.getPerson 并使其成为可空字段 returns { getPerson: null } 当然。我试过将解析器结果作为对象与函数返回。在解析器中登录显示查询部分正在执行，但其中没有任何嵌套。

我是不是设置有误？我也尝试过不传递自定义模拟，因为根据 graphql-tools 文档的建议应该是可能的，但无济于事。我还从 apollo hooks GitHub 中看到 this issue 说最新版本的 hooks 破坏了 addMocksToSchema 的使用，所以我尝试使用建议的 3.1.3 版本但还是没有成功。任何帮助将不胜感激！

Answer 1

您需要向客户端提供模拟，而不是普通模式。

const schemaWithMocks = addMocksToSchema({
  schema,
  mocks: {},
  preserveResolvers: false,
});

const client = new ApolloClient({
  // link: new SchemaLink({ schema }); < -- REPLACE THIS
  link: (new SchemaLink({ schema: schemaWithMocks }) as unknown) as ApolloLink, // https://github.com/apollographql/apollo-link/issues/1258
  cache: new InMemoryCache(),
  connectToDevTools: true,
});

现在 console.log(data) 打印 {"getPerson": {"__typename": "Person", "name": "Name"}}

使用 graphql-tools、apollo-link-schema 和 react-hooks 在模拟时总是返回 undefined

Using graphql-tools, apollo-link-schema, and react-hooks always returning undefined when mocking

mocking

reactjs

apollo-client

graphql-tools

apollo-link