![](/img/trans.png)
[英]How to implement Search Function in React-GraphQL using React-Hooks and Apollo Client?
[英]Using graphql-tools, apollo-link-schema, and react-hooks always returning undefined when mocking
我刚开始在 React 中使用 GraphQL,并且一直在将项目从 REST API 转移到新的 GraphQL。 作为其中的一部分,我想设置模拟数据以在独立于正在完成的 GQL API 的应用程序上工作。 我花了很多时间尝试遵循 Apollo 和GraphQL 工具文档,但无论如何,我似乎无法让模拟解析器正常工作。 对于上下文,我在 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
并将其设为 nullable field 只会返回{ getPerson: null }
当然。 我试过将解析器结果作为对象与函数返回。 解析器中的日志记录显示正在执行查询部分,但其中没有任何嵌套。
我设置不正确吗? 我也尝试过不传递自定义模拟,因为根据 graphql-tools 文档的建议应该是可能的,但无济于事。 我还从 apollo hooks GitHub 看到了这个问题,它说最新版本的 hooks 破坏了 addMocksToSchema 的使用,所以我尝试使用建议的 3.1.3 版本,但还是没有成功。 任何帮助将不胜感激!
您需要向客户端提供模拟,而不是普通模式。
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"}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.