languages-example.tsx

/** ...imports... */

export const AccountQuery = gql`
  query exampleQuery($id: ID!) {
    account(id: $id) {
      id
      name
      addresses(type: [BUSINESS]) {
        id
        street
        street2
        city
        state
        type
      }
      parentAccount {
        id
      }
    }
  }
`;

const StyledWrapper = styled.div`
  margin: 10px auto;
  background-color: ${palettes.gray[700]};
`;
const AddressDisplay = styled.div`
  text-align: left;
`;

export const GrowerTINEditContainer = () => {
  const { accountId } = useParams<{ accountId: string }>();

  const { data, error, loading } = useQuery<ExampleQueryData, ExampleQueryVariables>(AccountQuery, {
    variables: { id: accountId },
  });

  if (loading) { return <Loader />; }

  if (error || !data?.account) {
    throw new Error('Could not retrieve account');
  }

  return (
    <StyledWrapper>
      <SubComponent account={data?.account} />

      {data?.account.addresses.map(address => 
        <AddressDisplay
          key={address.id}
          address={address}
        >
          {`${address.street} ${address.city}, ${address.state}`}
        </AddressDisplay>
      )}
    </StyledWrapper>
  );
};