Question

我有一个使用GraphQL的快速后端，当我转到/graphiql并手动执行一些搜索时，该后端就可以工作。我的React前端试图在后端执行搜索。以下代码应异步执行查询：

const data = await this.props.client.query({
    query: MY_QUERY,
    variables: { initials: e.target.value }
});
console.log(data);

MY_QUERY之前已定义，代表我所知道的查询，并且已经在/graphiql上进行了测试。为此，我将其导出为export default withApollo(MyComponent)，以使其在client中具有props变量。

在我通过Apollo定义的index.js文件中，与/graphiql的连接是为了执行查询：

//link defined to deal with errors, this was found online
const link = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors)
        graphQLErrors.map(({ message, locations, path }) =>
        console.log(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
        ),
        );

    if (networkError) console.log(`[Network error]: ${networkError}`);
});

//the httpLink to my GraphQL instance, BASE_URL is defined elsewhere
const httpLink = new HttpLink({
    uri: BASE_URL,
    headers: {
    },
});

//here I define the client linking the GraphQL instance, the cache, and error handling
const client = new ApolloClient({
    link: httpLink,
    cache,
    link
});

在执行上述查询而没有处理错误的link变量时，我从服务器（400 Bad Request）收到了ApolloError.js:37 Uncaught (in promise) Error: Network error: Response not successful: Received status code 400。由于这没有告诉我更多信息，因此在StackOverflow和Apollo网页上，我发现了上面的错误声明，其输出为[Network error]: TypeError: forward is not a function。该错误是什么意思，我该如何解决？

谢谢！

Answer 1

您的客户端配置具有重复属性-您首先将link属性设置为HttpLink，然后再次将其设置为ErrorLink。这意味着HttpLink被完全忽略，而您只将ErrorLink传递给配置。您会看到该错误，因为ErrorLink创建的onError本身并不意味着使用。相反，它应该与HttpLink链接在一起，这就是您应该分配给link属性的地方。

文档中的

This page详细介绍了如何正确组成链接。您可以使用concat，但我更喜欢ApolloLink.from，因为它可以让您清楚地显示链接的顺序：

const errorLink = onError(...)
const errorLink = new HttpLink(...)
const link = ApolloLink.from([
  errorLink,
  httpLink,
])
const client = new ApolloClient({
  link,
  cache,
})

查询graphiql导致Apollo错误向前不起作用

1 个答案: