从 graphql 获取数据以做出反应

Question

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

Answer 1

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

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

创建一个名为“Action”的列，并且 action 的每一行都需要一个按钮。
然后在它的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。

从 graphql 获取数据以做出反应

fetching data from graphql to react

reactjs

graphql

react-apollo

graphql-js