Graphql 错误：“之前的语法错误：\”\\\“变量\\\”\“”

Question

我已经连接了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;

不断收到此错误：

{"errors":[{"locations":[{"column":2,"line":1}],"message":"之前的语法错误："\"variables\"""}]}

知道我在这里缺少什么吗？

在失眠得到这个

服务器网络选项卡

Answer 1

在查询中，应该是 getRaceResults(before: .......) 而不是 get_race_results(before.....)

试试：

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

变量：

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