javascript - TypeError: Cannot read property 'match' of undefined ( react and graphql )

Question

I'm trying to get a part from the URL to pass it as an argument to graphql so i can fetch data ! first I created a react app and i fetched the data from graphql to get a list of all orders , then I created a button that will redirect to a new page where the order details supposed to be displayed

the order id is like this : gid://shopify/Order/12345678 ( all of it not only the number )

the link to an order page details looks like this : http://localhost:3000/orders/gid://shopify/Order/12345678

to access this page , in my ListOrders components i added this link :

 <Link to={`/orders/${id}`} className="btn btn-secondary">
  Details
 </Link>

meanwhile i had a problem in the route but i solved it by making the path like this :

 <Route exact path='/orders/gid://shopify/Order/:id' component={OrderDetails}  />

i'm trying to get the ID from the url this way in Orderdetais component :

 let { id } = props.match.params.id;

OrderDeatils component :

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;
  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(({ id, createdAt }) => (
            <tr key={id}>
              <td>{createdAt} </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

i need to get the id ( gid://shopify/Order/12345678 ) from the URL and pass it to variables as shown but i get this error TypeError: Cannot read property 'match' of undefined

UPDATE :

this error what corrected but i still cannot get the details data from graphql because only the number in the id is sent as variable !

updates :

<Route exact path='/orders/:gid://shopify/Order/:id' component={OrderDetails}  />

error : TypeError: Cannot read property 'map' of null

variable sent in the request : id : 12345678 ( only the number but i need gid://shopify/Order/12345678 )

标签： javascriptreactjsgraphqlcreate-react-appreact-apollo

Answer 1

You shouldn't use {} when you define props.

export default function OrderDetails(props) {

Update

Change

<Route exact path='/orders/gid://shopify/Order/:id' component={OrderDetails}  />

to

<Route exact path='/orders/:id' component={OrderDetails}  />

And when you call gql query, pass the id like below.

const { loading, error, data } = useQuery(GET_Single_Orders, {
    variables: { id: `gid://shopify/Order/${id}` }
});