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

Posted 2023-03-08

【中文标题】如果使用 react 和 typescript 找不到 id 会返回啥？

【英文标题】：What to return if no id found using react and typescript?如果使用 react 和 typescript 找不到 id 会返回什么？

【发布时间】：2021-05-12 22:56:20

【问题描述】：

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

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 字段的情况。

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

【参考方案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')
            

         
         
    

【讨论】：

在这种情况下如何使用 try 和 catch。谢谢。

您可以将整个异步函数包装在 try and catch 中。我会更新我的答案。