GraphQL Apollo 读单答案

【问题标题】：GraphQL Apollo Read a singleGraphQL Apollo 读单
【发布时间】：2021-02-03 19:09:34
【问题描述】：

我可以读取记录数组，但是当查询单行时，我不能。我花了几天时间试图自己解决这个问题。我最初在读取数组时遇到了问题。这是因为我的界面在某些方面被损坏了，必须向我指出。话虽如此，我希望这将是一个类似的问题。查询的结果是一个由于某种原因我无法读取的对象。任何建议或任何方向将不胜感激。

实现

export const GET_PT_CLIENT = gql`
  query pt_Client($clientid: Int!) {
    pt_Client(clientid: $clientid) { 
      clientid
      isActive  
      clientname 
    }
  }
`;


interface pt_ClientProps {
  clientid: Number
  index: Number
} 

const ClientDetails: React.FC<pt_ClientProps> = ({ clientid, index }) => {  
  const {
    data,
    loading,
    error
  } = useQuery< pt_ClientsTypes.pt_Clients_pt_Client >(GET_PT_CLIENT, {
    errorPolicy: 'all',
    fetchPolicy: 'network-only',
    variables: { clientid: clientid},
  });

  if (loading)
    return <Loading />;

  if (error)
    return <p>{error.toString()}</p>;

  if (!data)
    return <p>Not found</p>;
 
    console.log('==================================================');
    console.log(data);
    console.log('==================================================');
  
  return (
    <Fragment> 
      <div className="ClientDetails"> 
        <h4>{data.clientname}</h4>        
      </div>
    </Fragment>
  );
}

export default ClientDetails;

我的代码生成文件类型/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_Clients: (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
}

感谢您抽出时间为我检查此问题。

【问题讨论】：

标签： javascript reactjs apollo-client

【解决方案1】：

结果应该在结果data 属性的pt_Client（与查询名称相同）属性中可用。

<Fragment> 
  <div className="ClientDetails"> 
    <h4>{data.pt_Client.clientname}</h4>        
  </div>
</Fragment>

【讨论】：

对不起，我的帖子上有打字机。我的游乐场结果是针对所有客户的查询。我正在寻找一个客户。 Playground 结果返回有效且正确的记录。当我执行data.pt_Client.clientname 时，pt_Client 成员不可用，只有字段。我知道我错过了一些显而易见的东西，我就是想不通。我看不到森林，因为路上有很多树。谢谢你的建议。
当我执行 `console.log(data)' 时，对象内的数据是正确的，但我无法提取数据。
所以，我使用的界面是 pt_Clients 而不是 pt_Client。我没有为 pt_client 定义查询。所以我添加了查询并重新生成了接口。现在我有可用的变量类型。将我的 useQuery 行更改为 const { data, loading, error } = useQuery< pt_ClientTypes.pt_Client_pt_Client, pt_ClientTypes.pt_ClientVariables >(GET_PT_CLIENT, { errorPolicy: 'all', fetchPolicy: 'network-only', variables: { clientid: clientid}, }); 但是当我阅读 data.clientname 时我仍然不确定。数据的 console.log 仍然返回良好的数据
已修复。我使用了 pt_Client 接口而不是 pt_Client_pt_Client。这对我来说确实有意义，感觉一个人枚举了字段。