Apollo 查询失败并出现错误 - TypeError: this.props.getPostInfo is not a function答案

【问题标题】：Apollo query fails with an error - TypeError: this.props.getPostInfo is not a functionApollo 查询失败并出现错误 - TypeError: this.props.getPostInfo is not a function
【发布时间】：2019-12-16 19:57:27
【问题描述】：

我正在尝试使用Apollo 和React 连接到我的graphql api 端点。为了做到这一点，我有一个组件如下。

import React, {Component} from 'react'
import {GetPostInfoQuery} from "./../../../queries/posts"
import { compose, graphql, Query } from "react-apollo";


class PostItem extends Component {

  getCurrentPostInfo =() => {
    this.props.getPostInfo({
            variables: {
                postID: "UG9zdDoy"
            }
        })
        .then((loading, data, error) => {
            console.log(data)
        })
        .catch(error => {
            alert(JSON.stringify(error) );
        });

  }
  render() {
    return (
      <div>
        <button  onClick={this.getCurrentPostInfo}> Load Info </button>
      </div>
    )
  }
}

export default compose(
    graphql(GetPostInfoQuery, {
        name: "getPostInfo"
    })
)(PostItem);

我的GetPostInfoQuery如下图

export const GetPostInfoQuery = gql `
query postInfo($postID: ID!){
   post(id:$postID) {
     id
     title
     content
     headerImage
     createdAt
     user {
       id 
       firstname
       lastname
       locale {
         id
         name
         country
       }
     }
     tagList {
       edges{
         node {
           id
           name
         }
       }
     }
   }
}
`

我将一个变量 - postID 其值为 UG9zdDoy 传递给我的查询，以便它可以被执行并将数据返回给我。当我使用graphiql 接口运行精确查询时，它会毫无问题地返回数据。

当我运行上述代码时，我收到以下错误

这是在graphiql中运行的相同查询

你能告诉我我在这里做错了什么吗？

谢谢

【问题讨论】：

标签： reactjs apollo react-apollo graphql-js

【解决方案1】：

graphql HOC 的行为会有所不同，具体取决于它接收到的是 query 还是 mutation。来自the docs：

[对于查询，] 使用 graphql() 时创建的高阶组件会将数据道具提供给您的组件...数据道具包含从您的查询中获取的数据以及一些其他有用的信息和功能控制 GraphQL 连接组件的生命周期。

当您将突变传递给 graphql() 时创建的高阶组件将为您的组件提供一个名为 mutate 的单一道具。与将查询传递给 graphql() 时获得的数据道具不同，mutate 是一个函数。

换句话说，对于查询，你会得到一个 data 属性，它是一个对象，而对于突变，你会得到一个 mutate 属性，这是一个函数。您正在使用查询，因此您不能像函数一样调用收到的道具，因为它不是函数，如错误所示。

如果您想触发查询以响应某些用户操作，您可以直接在客户端调用query 方法。详情请见withApollo。

【讨论】：