React - 带有输入变量的 Apollo 客户端查询答案

【问题标题】：React - Apollo Client query with input variablesReact - 带有输入变量的 Apollo 客户端查询
【发布时间】：2021-04-13 02:08:27
【问题描述】：

我正在努力理解如何在 react 中使用 apollo 客户端查询内容。

这是查询id想实现的：

query signIn {
  signIn(input: { email: "test2@gmail.com", password: "test123" }) {
    token
  }
}

我想将所有查询保存到查询文件夹中，所以我做了以下操作：

import { gql } from '@apollo/client';

export const SIGN_IN = gql`
  {
    signIn(input: { email: $email, password: $password }) {
      token
    }
  }
`;

我在主页内调用我的查询，如下所示：

import { useQuery } from '@apollo/client';
import { SIGN_IN } from '../../apollo/queries/SIGN_IN';

export const Homepage = () => {
  const { data, loading, error } = useQuery(SIGN_IN, {
    variables: {
      input: {
        email: 'test3@gmail.com',
        password: 'test123',
      },
    },
  });

但我最终得到了这个错误：

{
  "loading": false,
  "error": {
    "graphQLErrors": [],
    "networkError": {
      "name": "ServerError",
      "response": {},
      "statusCode": 400,
      "result": {
        "errors": [
          {
            "message": "Variable \"$email\" is not defined.",
            "locations": [
              {
                "line": 2,
                "column": 25
              },
              {
                "line": 1,
                "column": 1
              }
            ],
            "extensions": {
              "code": "GRAPHQL_VALIDATION_FAILED",
              "exception": {
                "stacktrace": [
                  "GraphQLError: Variable \"$email\" is not defined.",

我应该怎么做？

亲切的问候

【问题讨论】：

标签： reactjs graphql apollo

【解决方案1】：

好的，找到答案了

如果有人在找这个，那就去吧：

import { gql } from '@apollo/client';

export const SIGN_IN = gql`
  query SIGN_IN($email: String!, $password: String!) {
    signIn(input: { email: $email, password: $password }) {
      token
    }
  }
`;

【讨论】：

【解决方案2】：

查询定义应该是这样的：

export const SIGN_IN = gql`
 query signIn($email: String!, $password: String!) {
    signIn(input: { email: $email, password: $password }) {
      token
    }
  }
;

【讨论】：