如果使用 react 和 typescript 找不到 id 会返回什么？

Question

我有一个查询“详细信息”，如下所示

query details(
    $id: ID!
) {
    something(id: $id) {
        id
        itemId
        typesId
        itemDetails {
            id
            name
        }
        typesDetails {
            id
            name
        }
    }
}

我已经定义了如下类型

type itemDetails {
    id: String,
    name: String,
}

type typesDetails {
    id: String,
    name: String,
}


type something {
    id: ID!
    itemId: ID
    typesId: [ID!]
    itemDetails: itemDetails
    typesDetails: [typesDetails]
}

在解析器端（graphql）我必须字段解析 itemDetails（使用我从后端收到的 itemId）。此 itemId 可以为 null 或可以具有一些字符串值，例如示例 '1'。

和 typesDetails 以及我从后端收到的 typesId。 typesId 可以是 null 或 id 数组，例如 ['1','2',...]

const resolvers: Resolvers = {
    something: {
        itemDetails: async(parent, args, { dataSources: { itemsAPI} }) => {
            const itemId = get (parent, 'itemId'); //can be null or string value
            if(itemId) {
                const { data } = await itemsAPI.getItems();
                const item = data.filter((item: any) =>
                    itemId === item.id
                ); //filter the data whose id is equal to itemId
                return {
                    id: item[0].id,
                    name: item[0].name,
                }
            }else { // how to rewrite this else part
                return {}:
            }
        },
        typesDetails: async (parent, args, { dataSources: {assetTypesAPI} }) => {
            const typesId = get(parent, 'typesId');
            if (typesId) {
                const allTypes = await typesAPI.getTypes();
                const res = typesId.map((id: any) => allTypes.find((d) => d.id === id)); //filter 
                //allTypes that match typesId
                const final = res.map(({id, name}: {id:string, name:string}) => ({id,name})); 
                //retreive the id and name fields from res array and put it to final array
                return  final;
            } else { // how to rewrite this else part
                return [{}];
            }
        } 
    }

上面的代码有效。但是如果后端没有返回 itemId 和 typesId，代码看起来很笨拙。

如果后端的 itemId 为空，如果后端的 typesId 为空，我该如何处理 itemDetails 字段的情况。

有人可以帮我解决这个问题吗？谢谢。

Answer 1

问题更多是关于graphql，而不是react 和typescript。您最好更改问题的标签?以进行正确匹配。

对我来说，完美的解决方案是在 itemDetails 的情况下验证 itemId。如果值为 null，则抛出错误或返回一个空对象，就像您在 itemDetails 的 else 部分中所做的那样。

我不认为itemId 在上述情况下来自后端，它应该来自传递给查询itemDetails 的参数

这同样适用于typesDetails。

使用 try 和 catch 可以帮助捕捉到 API（数据库）的异步操作期间的任何错误。

    const resolvers: Resolvers = {
    something: {
        itemDetails: async(parent, args, { dataSources: { itemsAPI} }) => {
            try {
                  const itemId = get (parent, 'itemId'); //can be null or string value
                if(itemId) {
                    const { data } = await itemsAPI.getItems();
                    const item = data.filter((item: any) =>
                        itemId === item.id
                    ); //filter the data whose id is equal to itemId
                    return {
                        id: item[0].id,
                        name: item[0].name,
                    }
                }else { // how to rewrite this else part
                    return {}:
                }
            } catch(error) {
                throw new Error('something bad happened')
            }
        },
        typesDetails: async (parent, args, { dataSources: {assetTypesAPI} }) => {
            try {
                const typesId = get(parent, 'typesId');
                if (typesId) {
                     const allTypes = await typesAPI.getTypes();
                     const res = typesId.map((id: any) => allTypes.find((d) => d.id === id)); //filter 
                     //allTypes that match typesId
                     const final = res.map(({id, name}: {id:string, name:string}) => ({id,name})); 
                    //retreive the id and name fields from res array and put it to final array
                    return  final;
                } else { // how to rewrite this else part
                    return [{}];
                }

            } catch (error) {
                throw new Error('something happened')
            }

         
        } 
    }