GraphQL 阿波罗读单

Question

I can read array of records but when query for single row, I can't. I have spent several days trying to resolve this issue on my own. I had issues reading the array originally. It was because my interface was corrupted some how and it had to be pointed out to me. That being said I hoping that this will be a similar problem. Result of the query is an object that I can not read for some reason. Any suggestions or any direction will be greatly appreciated.

implementation

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;

my codegen file types/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)[]; 
}

Playground Results

{
  "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
}

Thank you for taking the time to check into this issue for me.

Answer 1

The results should be available in the pt_Client (same as the query name) property of the results data property.

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