如何使用 Relay、GraphQL 和 React 渲染数据

Posted 2023-03-08

【中文标题】如何使用 Relay、GraphQL 和 React 渲染数据

【英文标题】：How do I render Data with Relay ,GraphQL and React

【发布时间】：2021-04-28 11:47:51

【问题描述】：

当我尝试使用来自 Django 后端的 GraphQL 将数据提取到 React 前端时出现此错误 错误

index.js:1 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at EmployerInfo (http://localhost:3000/static/js/main.chunk.js:231:75)
    at div
    at ApolloProvider (http://localhost:3000/static/js/0.chunk.js:6401:19)
    at App

这是在 React 前端获取的反应代码

const QUERY_EMPLOYERS = gql`

    allEmployers
      edges
        node
          id
          employerName
          email
          phone
          
        
      
    
  
`;
export function EmployerInfo() 
  const  data, loading  = useQuery(QUERY_EMPLOYERS, pollInterval: 500);
  
  
  if (loading) return <p>Loading...</p>;
   
  return data?.allEmployers.edges.map(( id, employerName, email, phone ) => (
    <div key= id >
      <p>
        Employer -  employerName   email    phone 
      </p>
    </div>
  ));

【参考方案1】：

我认为你的一些ids 是重复的，试试这个：

export function EmployerInfo() 
  const  data, loading  = useQuery(QUERY_EMPLOYERS,  pollInterval: 500 );

  if (loading) return <p>Loading...</p>;

  return data?.allEmployers.edges.map(
    ( id, employerName, email, phone , index) => (
      <div key=`$id-$index`>
        <p>
          Employer - employerName email phone
        </p>
      </div>
    )
  );

【讨论】：

错误消失，但没有在前端呈现数据。

【参考方案2】：

我用下面的代码解决了这个问题

export function EmployerInfo() 
  const  data, loading  = useQuery(QUERY_EMPLOYERS,  pollInterval: 500 );

  if (loading) return <p>Loading...</p>;

  const employers = data.allEmployers.edges;

  return(
      <div>
         employers.map( employer => 
          return <p key=employer.node.id> Employer -  employer.node.employerName employer.node.email employer.node.phone </p>
        )
      </div>
  );