为什么 QueryRenderer 传递 null 来渲染？

问题描述

这一定是一个经典的初学者错误，但我看不出问题。为什么下面的 props 是 null？在问题的最后一部分，我包含了服务器响应。这告诉我 graphql 方面没有任何问题；我确实通过浏览器 API 得到了相同的响应。

// index.js

ReactDOM.render(
  <QueryRenderer
    environment={environment}
    query={graphql`
      query assetsQuery {
        viewer {
          ...PeopleList_people
          id
        }
      } 
    `}
    render={({ error,props }) => {
      console.log(props); // is null for some reason
      console.log(error);
      return <PeopleList people={props.viewer.people} />
    }}
  />,document.getElementById('root')
);

// PeopleList.js

const PeopleList = (props) => {
    return (
        <table>
            <thead>
                <tr>
                    <th>Unique Identifier</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                </tr>
            </thead>
            <tbody>
                {
                    props.viewer.people.edges.map(edge =>
                        <tr key={edge.node.id}>
                            <Person person={edge.node} />
                        </tr>
                    )
                }
            </tbody>
        </table>
    )
};


export default createFragmentContainer(PeopleList,{
    people: graphql`
      fragment PeopleList_people on ViewerNode {
          people(
              first: 100
          ) @connection(key: "PeopleList_people"){
              edges {
                  node {
                      id,...Person_person
                  }
                  cursor
              }
          }
      } 
    `
})

// Person.js

const Person = (props) => {

    return (
        <>
            <td>{props.person.uniqueIdentifier}</td>
            <td>{props.person.firstName}</td>
            <td>{props.person.lastName}</td>
            <td>Edit button</td>
            <td>Delete button</td>
        </>
    )

};

export default createFragmentContainer(Person,{
    person: graphql`
      fragment Person_person on PersonNode {
        uniqueIdentifier
        firstName
        lastName
      }
    `
});

当页面加载时，我可以看到对 graphql 响应的响应是

{"data":{"viewer":{"people":{"edges":[{"node":{"id":"UGVyc29uTm9kZTox","uniqueIdentifier":"1","firstName":"Ross","lastName":"Meredith","__typename":"PersonNode"},"cursor":"YXJyYXljb25uZWN0aW9uOjA="},{"node":{"id":"UGVyc29uTm9kZToy","uniqueIdentifier":"2","firstName":"Nicole","cursor":"YXJyYXljb25uZWN0aW9uOjE="},{"node":{"id":"UGVyc29uTm9kZToz","uniqueIdentifier":"3","cursor":"YXJyYXljb25uZWN0aW9uOjI="}],"pageInfo":{"endCursor":"YXJyYXljb25uZWN0aW9uOjI=","hasNextPage":false}},"id":"Vmlld2VyTm9kZTpOb25l"}}}

这是请求负载 -

query assetsQuery {
  viewer {
    ...PeopleList_people
    id
  }
}

fragment PeopleList_people on ViewerNode {
  people(first: 100) {
    edges {
      node {
        id
        ...Person_person
        __typename
      }
      cursor
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

fragment Person_person on PersonNode {
  uniqueIdentifier
  firstName
  lastName
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）