我正在尝试从 URL 中获取一部分以将其作为参数传递给 graphql,以便我可以获取数据!首先我创建了一个反应应用程序,我从 graphql 获取数据以获取所有订单的列表,然后我创建了一个按钮,该按钮将重定向到应该显示订单详细信息的新页面
订单id是这样的:gid://shopify/Order/12345678
(所有的不仅仅是数字)
指向订单页面详细信息的链接如下所示:http://localhost:3000/orders/gid://shopify/Order/12345678
为了访问这个页面,在我的 ListOrders 组件中,我添加了这个链接:
<Link to={`/orders/${id}`} className="btn btn-secondary">
Details
</Link>
与此同时,我在路线上遇到了问题,但我通过制作这样的路径来解决它:
<Route exact path='/orders/gid://shopify/Order/:id' component={OrderDetails} />
我正在尝试在 Orderdetais 组件中以这种方式从 url 获取 ID:
let { id } = props.match.params.id;
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;
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>
);
}
我需要从 URL 获取 id ( gid://shopify/Order/12345678 ) 并将其传递给变量,如图所示,但我收到此错误类型错误:无法读取未定义的属性“匹配”
更新:
此错误已更正,但我仍然无法从 graphql 获取详细信息数据,因为只有 id 中的数字作为变量发送!
更新:
<Route exact path='/orders/:gid://shopify/Order/:id' component={OrderDetails} />
错误:类型错误:无法读取 null 的属性“map”
请求中发送的变量:id:12345678(只有数字但我需要gid://shopify/Order/12345678)
答案 0 :(得分:1)
在定义 {}
时不应使用 props
。
export default function OrderDetails(props) {
更新
改变
<Route exact path='/orders/gid://shopify/Order/:id' component={OrderDetails} />
到
<Route exact path='/orders/:id' component={OrderDetails} />
当你调用 gql 查询时,传递如下 id。
const { loading, error, data } = useQuery(GET_Single_Orders, {
variables: { id: `gid://shopify/Order/${id}` }
});