我有一个带有kestone. js后端和graph ql api的react应用程序
我在kestone. js中有一个产品列表和一个简单的graph ql查询
import gql from "graphql-tag";
export const ALL_PRODUCTS_QUERY = gql`
query ProductData{
allProducts{
id
price
description
name
}
}
`
我正在使用apollo codecen为graph ql生成类型，所以我得到
export interface ProductData_allProducts {
__typename: "Product";
id: string;
price: number | null;
description: string | null;
name: string | null;
}
export interface ProductData {
/**
* Search for all Product items which match the where clause.
*/
allProducts: (ProductData_allProducts | null)[] | null;
}
在React中，我可以列出产品并在代码中使用类型，这里我使用
import { useQuery } from "@apollo/client";
import {ALL_PRODUCTS_QUERY} from '../queries/index'
import { ProductData } from "../generated/ProductData";
const Products = () => {
const {data, error, loading} = useQuery<ProductData>(ALL_PRODUCTS_QUERY)
if(loading) return <p>Loading</p>
if(error) return <p>Error: {error.message}</p>
return (
<div>
<div>
{data?.allProducts?.map(product => (
<div>{product?.name}</div>
))}
</div>
</div>
);
};
export default Products;
而不是使用
import React from 'react';
import { ProductData, ProductData_allProducts } from '../generated/ProductData';
const Product = ({product}:ProductData_allProducts) => {
return (
<p>{product.name}</p>
);
};
export default Product;
但是产品的类型应该是什么，这里我得到一个错误，说
Property 'product' does not exist on type 'ProductData_allProducts'.
和产品页面
import { useQuery } from "@apollo/client";
import {ALL_PRODUCTS_QUERY} from '../queries/index'
import { ProductData } from "../generated/ProductData";
import Product from "./Product";
const Products = () => {
const {data, error, loading} = useQuery<ProductData>(ALL_PRODUCTS_QUERY)
if(loading) return <p>Loading</p>
if(error) return <p>Error: {error.message}</p>
return (
<div>
<div>
{data?.allProducts?.map(product => (
<Product product={product} />
))}
</div>
</div>
);
};
export default Products;
我现在获取商品道具报错
Type '{ product: ProductData_allProducts | null; }' is not assignable to type 'IntrinsicAttributes & ProductData_allProducts'.
Property 'product' does not exist on type 'IntrinsicAttributes & ProductData_allProducts'.
那么传入商品时，商品页面的类型应该是什么
您可以通过更改代码来修复错误，如下所示：
const Product = ({ product }: { product: ProductData_allProducts }) => {
return <p>{product.name}</p>;
};
问题是您将组件的props键入为typeProductComponentProps，而您只想键入属性props. produc。所以你的代码基本上看起来像这样：
const Product = (props: ProductData_allProducts) => {
return (
<p>{product.name}</p>
);
};
由于缺少name或描述等所有属性，Typescript抱怨它。这是一个工作代码框供您查看。
以下方法适合你吗？
interface ProductComponentProps {
product: ProductData_allProducts
}
const Product = ({product}: ProductComponentProps) => {
return (
<p>{product.name}</p>
);
};
您正在尝试解构类型上不存在的属性。
这应该可以：
type Product = {
__typename: "Product";
id: string;
price: number | null;
description: string | null;
name: string | null;
};
const ProductComponent: FC<Product> = ({ name }) => {
return <p>{name}</p>;
};
export default ProductComponent;
