代码之家  ›  专栏  ›  技术社区  ›  Masiar

查询graphiql leads apollo error forward不是函数

  •  0
  • Masiar  · 技术社区  · 6 年前

    我有一个带有graphql的快速后端,当我访问 /graphiql 手动执行一些搜索。我的反应前端试图在后端执行搜索。以下代码应异步执行查询:

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

    在哪里? MY_QUERY 是以前定义的,表示一个查询,我知道该查询有效,并且已在其上进行了测试 石墨化 . 要在我的react组件中执行此操作,我将其导出为 export default withApollo(MyComponent) 所以它有 client 变量在 props .

    index.js 我通过阿波罗定义的文件连接到 石墨化 为了执行查询:

    //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 . 这个错误是什么意思?我该如何解决它?

    谢谢!

    1 回复  |  直到 6 年前
        1
  •  1
  •   Daniel Rearden    6 年前

    您的客户机配置有一个重复的属性--首先设置 link 您的财产 HttpLink 然后再把它设置为 ErrorLink . 这意味着 HTTPink 完全被忽略,而你只是 错误链接 到配置。你看到这个错误是因为 错误链接 创建的 onError 不是自己用的。相反,它应该用 HTTPink 这就是你应该分配给 链接 财产。

    This page 在文档中详细介绍了如何正确撰写链接。你可以使用 concat 但我更喜欢 ApolloLink.from 因为它允许您清楚地显示链接的顺序:

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