试图将我下面的状态[
错误:网络错误:响应失败:收到状态码400
更新:
这是错误的详细信息:[[GraphQL错误]:消息:类型为“ String!”的变量“ $ orderBy”。用于期望类型为“ ItemOrderByInput”的位置。,位置:[对象对象],[对象对象],路径:未定义
这是我正在使用的当前代码,这会给我带来错误。
试图获取
ALL_ITEMS_QUERY
以采用orderBy变量。我想念什么吗?import React, { Component } from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import styled from "styled-components";
import Item from "./Item";
import Pagination from "./Pagination";
import { perPage } from "../config";
import Sort from "./Sort";
const ALL_ITEMS_QUERY = gql`
query ALL_ITEMS_QUERY($skip: Int = 0, $first: Int = ${perPage}, $orderBy: String!) {
items(first: $first, skip: $skip, orderBy: $orderBy) {
id
title
price
description
image
largeImage
}
}
`;
const Center = styled.div`
text-align: center;
`;
const ItemsList = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 60px;
max-width: ${props => props.theme.maxWidth};
margin: 0 auto;
padding-bottom: 80px;
`;
class Items extends Component {
state = {
sortNew: "createdAt_ASC"
};
render() {
return (
<Center>
<Pagination page={this.props.page} />
<Sort />
<Query
query={ALL_ITEMS_QUERY}
variables={{
orderBy: this.state.sortNew,
skip: this.props.page * perPage - perPage
}}
>
{({ data, error, loading }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ItemsList>
{data.items.map(item => (
<Item item={item} key={item.id} />
))}
</ItemsList>
);
}}
</Query>
<Pagination page={this.props.page} />
</Center>
);
}
}
export default Items;
orderBy: createdAt_ASC
这样的枚举,但是您要传递一个字符串orderBy: String!
。要解决此问题,请将枚举名称传递给ALL_ITEMS_QUERY
,这样就可以动态更改orderBy。 一个例子看起来像这样
const ALL_ITEMS_QUERY = gql`
query ALL_ITEMS_QUERY($skip: Int = 0, $first: Int = ${perPage}, $orderBy: NameOfItemsEnum) {
items(first: $first, skip: $skip, orderBy: $orderBy) {
id
title
price
description
image
largeImage
}
}
`;
其中NameOfItemsEnum
是后端上枚举类型的名称