Apollo Query variable error when passing state

Question

Trying to pass my state of sortNew below to the variables in the Apollo query but getting the following 400 ERROR:

Error: Network error: Response not successful: Received status code 400

Update: Here is the error details:

[GraphQL error]: Message: Variable "$orderBy" of type "String!" used in position expecting type "ItemOrderByInput"., Location: [object Object],[object Object], Path: undefined

This is the current code I'm using thats giving me errors.

Trying to get the ALL_ITEMS_QUERY to take the orderBy variable. Am I missing something?

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;

Check the Network tab and see what the actual response from the server is. 400 is usually thrown on validation errors. The response should include details about what went wrong. You can update your question with the response. — Daniel Rearden
– Daniel Rearden, Commented Apr 26, 2019 at 19:17

thislekan · Accepted Answer · 2019-10-31 03:17:40Z

1

ALL_ITEMS_QUERY expects orderBy to be an enum like so orderBy: createdAt_ASC but you're passing in a string orderBy: String!. To solve this problem, pass in the enum name to ALL_ITEMS_QUERY, that way, your orderBy can be changed dynamically.

An example will look like this

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
    }
  }
`;

where NameOfItemsEnum is the name given to the enum type on the Backend

answered Oct 31, 2019 at 3:17

thislekan

363 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Apollo Query variable error when passing state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related