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

Posted 2023-03-10

【中文标题】使用 graphql-tools、apollo-link-schema 和 react-hooks 在模拟时总是返回 undefined

【英文标题】：Using graphql-tools, apollo-link-schema, and react-hooks always returning undefined when mocking

【发布时间】：2020-11-19 08:53:57

【问题描述】：

我是在 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 并将其设为可为空的字段当然只会返回 getPerson: null 。我尝试将解析器结果作为对象与函数返回。在解析器中记录显示查询部分正在执行，但其中没有嵌套任何内容。

我是否设置错误？我还尝试不按照基于 graphql-tools 文档的建议传递自定义模拟，但无济于事。我还从 apollo hooks GitHub 中看到 this issue，说最新版本的 hooks 破坏了 addMocksToSchema 的使用，所以我尝试使用建议的 3.1.3 版本，但还是没有运气。任何帮助将不胜感激！

【参考方案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"?

【讨论】：

忘记接受并回复。感谢您的帮助！