React js Apollo 解构结果

Question

这是我来自 Apollo 客户端的第二个简单查询。我的第一次尝试查询用户列表并显示它们，效果很好。我不明白我的两个查询函数有什么区别。

所以我正在尝试从 Apollo 客户端进行超级简单的查询。查询是 id 和客户端名称两个字段。执行查询并返回结果，由 console.log(data) 验证。所以我相信服务器工作正常并且查询工作正常。我运行 Apollo 代码生成器来下载并创建包含我的接口的 ts 文件。

我还复制了 Apollo's Playground 的输出并创建了简单的 Java 脚本解构。我能够轻松地对结果进行解构，但我无法将该代码应用于 React 项目。我似乎能做的最好的事情就是显示“pt_Clients”。我已经被困在这个令人尴尬的时间了。

clients.tsx

export const GET_CLIENTS = gql`
  query pt_Clients {
    pt_Clients { 
      id 
      clientname 
    }
  }`;
 
interface ClientsProps extends RouteComponentProps { }

const PTClients: React.FC<ClientsProps> = () => {
  const {
    data,
    loading,
    error
  } = useQuery< 
                pt_ClientsTypes.pt_Clients_pt_Client
              >(GET_CLIENTS);

  if (loading) return <Loading />;
  if (error) return <p>ERROR</p>;
  if (!data) return <p>Not found</p>;

  return (
    <Fragment>
      <nav>
        <ul>
          <h3>Client List</h3>
          {console.log(data)}
          {
            data && 
            Object.keys(data).map((client: any) => ( 
              <li> 
                <Link to={'/admin/pt/clients/:' + client.id} >{client.clientname}</Link>
                
              </li>  
            )) 
          }
        </ul>
      </nav>
      <Switch> 
        <Route  
          path='/admin/pt/clients/:id'
          render={({match}) => {
            const { id } = match.params;    
            return <AdminClient clientid={id} />
          }}
        /> 
      </Switch>
    </Fragment>
  );
}

export default PTClients;

我的代码生成文件类型/pt_Clients.ts

/* tslint:disable */
/* eslint-disable */
// @generated
// This file was automatically generated and should not be edited.

// ====================================================
// GraphQL query operation: pt_Clients
// ====================================================

export interface pt_Clients_pt_Client {
  __typename: "pt_Client";
  id: number,
  clientid: number; 
  status: number | null;
  clientname: string | null; 
}

export interface pt_Clients {
  pt_Client: pt_Clients_pt_Client | null;
}

游乐场结果

{
  "data": {
    "pt_Clients": [
      {
        "id": 1,
        "clientname": "Client A",
        "__typename": "pt_Client"
      },
      {
        "id": 2,
        "clientname": "Client B",
        "__typename": "pt_Client"
      },
      {
        "id": 3,
        "clientname": "Client C",
        "__typename": "pt_Client"
      },
      {
        "id": 4,
        "clientname": "Client D",
        "__typename": "pt_Client"
      } 
    ]
  },
  "loading": false,
  "networkStatus": 7,
  "stale": false
}

感谢您花时间阅读并提供任何帮助。

Answer 1

好的。所以首要任务。

clients 数组在 data.pt_Clients 中，而不是在数据本身中。所以要渲染客户端列表，你需要做data.pt_Clients.map((client : any))

第二，Link 的 to 属性不应包含 : 字符。它应该在那里，因为你已经正确地写入了Route 组件的path 属性。

检查以下代码

<ul>
    <h3>Client List</h3>
    {console.log(data)}
    {
        data && 
        data.pt_Clients.map((client: any) => ( 
            <li> 
                <Link to={`/admin/pt/clients/${client.id}`}>
                    {client.clientname}
                </Link>
            </li>  
         )) 
    }
</ul>

在旁注中，li 和 Link 元素应该包含key 属性。