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

编程问答 2022-05-31

问题描述

我正在努力理解如何在反应中使用 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.",

我该怎么做？

亲切的问候

解决方法

好的，找到答案

如果任何人的寻找这一点，这里有云：

<ion-input type="text" name="address" value="" formControlName="address" ngDefaultControl></ion-input>

,

查询定义应该是这样的：

with
apolloapolloapollographqlgraphqlreactjsreactjsreactjsreactjs