从 graphql 获取数据以做出反应

Question

我克隆了这个 React dashboard 并根据我的需要对其进行了调整，然后我想从 graphql 获取数据并将其显示在一个表中（订单和产品表，我将继续讨论订单），然后当用户点击一个特定的按钮它会打开一个页面，其中包含有关他选择的订单的所有特定详细信息！ id 将从第一个查询（显示许多订单的订单）中获取，并将作为变量传递给第二个查询，即 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 的新手，所以我不知道该怎么做！

Answer 1

我不了解 graphql，但我可以在 UI 部分为您提供帮助，用于显示特定订单的数据。

您有一个表，该表的每一行都有一个唯一索引键。从数据库中，我们可以使用此键区分所有行。因此，在显示表格时，您可以使用节点包作为 react-tables 或传统方法，

1. 创建一个名为“Action”的列，并且每行都需要一个按钮。
2. 然后在其 onPress() 上设置 id，然后使用该 id 调用 API，您将通过在后端运行查询来获取详细数据，但是，您可以使用模态显示数据或重定向到不同的页面。

Answer 2

Apollo Client 是一个非常好的 React 库，可以使用 graphql 与后端服务器进行通信。

学习Apollo Client's useQuery hook 应该能满足你的需要。

最终，类似于

import { gql, useQuery } from '@apollo/client';

const GET_ORDERS = gql`
  query Orders($input1: PaginationInput) {
    Orders(input: $input1) {
      ...
    }
  }
`

// within a functional component
const { loading, error, data } = useQuery(GET_ORDERS, {variables: yourQueryVariableObject});

然后您可以在 UI 中显示data。

我建议您先熟悉 Apollo Client 如何使用较小的示例应用程序，然后再尝试调用像 Orders 这样的大型查询。