Блог

Я пытаюсь получить данные из graphql с помощью react, цель состоит в том, чтобы получить данные одного заказа! я создал список всех заказов, и он работает нормально, но когда я попытался получить данные для заказа sigle на другой странице, это не сработало :

Компонент OrderDetails :

 import React from 'react'
import { gql, useQuery } from '@apollo/client';
import Table  from 'react-bootstrap/Table'
import { Link } from 'react-router-dom';
const GET_Single_Orders = gql`
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
          }
    }
  }
`;

export default function OrderDetails(props) {
    let  id  = props.match.params.id;
   id = "gid://shopify/Order/"   id ;
  const { loading, error, data } = useQuery(GET_Single_Orders, {
    variables:  {id}
    ,
  });

  if (loading) return <h4>Loading...</h4>;
  if (error) return `Error! ${error}`;

  return( <div>
  
 <Table striped bordered responsive hover size="sm">
  <thead>
    <tr>
    
      <th>Created at</th>
      <th>created by</th>
      <th>Fulfillment</th>
      <th>Financial Status</th>
      <th>total Price</th>
      <th>Action</th>
 
    </tr>
  </thead>
  <tbody>
 {data.Order.map(({ Order , createdAt , totalPrice  }) => (
  
    <tr key={totalPrice}>
   
     <td>{createdAt} </td>
   
    </tr>
  
  ))}
  </tbody>
</Table>

 </div>
 )}
 

но я получил эту ошибку (ошибка типа: данные.Order.map не является функцией) я не знаю, почему я это получил! как это исправить?

схема порядка запросов :

 {
  "data": {
    "Order": {
      "id": "gid://shopify/Order/2950331957398",
      "displayFinancialStatus": "REFUNDED",
      "displayFulfillmentStatus": "UNFULFILLED",
      "email": "bla@gmail.com",
      "createdAt": "2020-11-19T15:13:44Z",
      "subtotalPrice": "3795",
      "totalRefunded": "4445",
      "totalShippingPrice": "650",
      "totalPrice": "4445",
      "totalTax": "345",
      "updatedAt": "2019-1-24T07:33:42Z",
      "lineItems": {
        "edges": [
          {
            "node": {
              "customAttributes": [],
              "quantity": 1,
              "title": "bla",
              "id": "gid://shopify/LineItem/12345678",
              "variant": {
                "id": "gid://shopify/ProductVariant/12345678",
                "title": "ブラウン / ONE",
                "weight": 0,
                "weightUnit": "KILOGRAMS",
                "price": "3795",
             
              }
            }
          }
        ]
      },
      "shippingAddress": {
        "address1": "adresse here",
        "address2": "",
        "city": "city here",
        "company": null,
        "country": "Japan",
        "countryCode": "JP",
        "firstName": "コウスケ",
        "id": "gid://shopify/MailingAddress/123456789?model_name=Address",
        "lastName": "bla",
        "name": "bla",
        "phone": null,
        "province": "Tōkyō",
        "provinceCode": "JP-13",
        "zip": "187-0022"
      }
    }
  }
}
 

map доступна ли функция в прототипе массива. Возвращаемые данные являются объектом, поэтому вы не можете использовать .map их для объекта. Сделайте это вместо:

   <tbody>
    <tr key={data?.Order?.totalPrice}>
     <td>{data?.Order?.createdAt} </td>   
    </tr>
  </tbody>
 

В идеале, для ключа вы хотели бы сделать что-то вроде Order.id того, что однозначно представляет эту строку.