Graphql error : "syntax error before: \"\\\"variables\\\"\""

Question

I have connected the usQuery graphql hook

app.js:

function App() {

    const GET_RES = gql`

    query ($input: GetRaceResultsInput, $before: String, $after: String, $first: Int, $last: Int) {
        get_race_results(before: $before, after: $after, first: $first, last: $last, input: $input) {
            edges {
                cursor
                node {
                   country
                   city
                }
            }
            pageInfo {
                startCursor
                endCursor
                hasNextPage
                hasPreviousPage
            }
        }
    }
`;

const { loading, error, data } = useQuery(GET_RES,{variables: {
    "first": 2,
    "input": {
        "onlyMyRacehorses": false,
        "distance": {
            "from": 1000,
            "to": 2400
        }
    }
}});
console.log("🚀 ~ file: App.js ~ line 16 ~ loading", loading)
console.log("🚀 ~ file: App.js ~ line 16 ~ error", error)
console.log("🚀 ~ file: App.js ~ line 16 ~ data", data);

  return (
    <div className="view view-main">
      <div className="pages">
        <div data-page="about" className="page">
          <div className="page-content">
            
              <AppRouter />
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Continuously getting this error :

{"errors":[{"locations":[{"column":2,"line":1}],"message":"syntax error before: "\"variables\"""}]}

Any idea what's I am missing here?

And on insomnia getting this

server network tab

Answer 1

In query, should be getRaceResults(before: .......) instead of get_race_results(before.....)

Try:

query ($input: GetRaceResultsInput, $before: String, $after: String, $first: Int, $last: Int) {
      getRaceResults(before: $before, after: $after, first: $first, last: $last, input: $input) {
        edges {
          cursor
          node {
            country
            city
          }
        }
        pageInfo {
          startCursor
          endCursor
          hasNextPage
          hasPreviousPage
        }
      }
    }

variable:

{
    "first": 2,
    "input": {
        "onlyMyRacehorses": false,
        "distance": {
            "from": 1000,
            "to": 2400
        }
    }
}