从graphql中获取数据以做出反应

Question

我克隆了这个 React dashboard 并根据我的需要进行了调整，然后我想从 graphql 中获取数据并将其显示在一个表中（订单和产品表，我将继续讨论订单）然后当用户单击特定按钮，它会打开一个页面，其中包含有关他选择的订单的所有特定详细信息！ id 将从第一个查询（显示多个订单的订单）中获取，并将作为变量传递给第二个查询，使用 is order 显示该订单详细信息。 我想知道如何显示第一个查询中的数据，然后显示单个订单的特定数据

这就是 UI 的外观（它已更改，但我只是想进一步阐明这个想法）：

订单列表：

订单详情：

graphql：

已经创建了一个可能会被重用的输入类型。(PaginationInput)

查询：

query Orders($input1: PaginationInput) {
   Orders(input: $input1){
    pageInfo {
      hasNextPage
      hasPreviousPage
    }
    edges{
      cursor
      node {
        id
        closed
        email
        createdAt
        updatedAt
        cancelledAt
        displayFinancialStatus
        displayFulfillmentStatus
        lineItems{
          edges{
            node {
              customAttributes{
                key
                value
              }
              id
              quantity
              title
              variant{
                id
                image {
                  altText
                  id
                  src
                }
                title
                weight
                weightUnit
                price
              }
            }
          }
        }
        phone
        subtotalPrice
        totalPrice
        totalRefunded
        totalTax
        processedAt
      }
    }
  }
}

query Order($id: ID!){
  Order (id: $id){
    id
    displayFinancialStatus
        displayFulfillmentStatus
        email
        id
        createdAt
        subtotalPrice
        totalRefunded
        totalShippingPrice
        totalPrice
        totalTax
        updatedAt
        lineItems{
            edges {
                node {
                    customAttributes{
                        key
                        value
                    }
                    quantity
                    title
                    id
                    variant{
                        id
                        title
                        weight
                        weightUnit
                        price
                        image {
                            src
                        }
                    }
                }
            }
        }
        shippingAddress {
            address1
            address2
            city
            company
            country
            countryCode
            firstName
            id
            lastName
            name
            phone
            province
            provinceCode
            zip
        }
  }
}

查询变量示例：

{
  "input1": {
    "num": 30
  },
  "id": "gid://shopify/Order/order_id_here"
} 

我对 graphql 还是个新手，所以我不知道该怎么做！