Apollo Mutation 不识别变量

Apollo Mutation does not recognize variables

我正在关注 Apollo [Mutation DOC][1],我唯一改变的是我有一个“Speaker”和三个参数,但是,它在尝试时给出了这个错误给一个“addSpeaker”:

[
    {
        "message": "The field `bio` does not exist on the type `AddSpeakerPayload`.",
        "locations": [
            {
                "line": 3,
                "column": 5
            }
        ],
        "path": [
            "addSpeaker"
        ],
        "extensions": {
            "type": "AddSpeakerPayload",
            "field": "bio",
            "responseName": "bio",
            "specifiedBy": "http://spec.graphql.org/October2021/#sec-Field-Selections-on-Objects-Interfaces-and-Unions-Types"
        }
    },
    {
        "message": "The field `name` does not exist on the type `AddSpeakerPayload`.",
        "locations": [
            {
                "line": 4,
                "column": 5
            }
        ],
        "path": [
            "addSpeaker"
        ],
        "extensions": {
            "type": "AddSpeakerPayload",
            "field": "name",
            "responseName": "name",
            "specifiedBy": "http://spec.graphql.org/October2021/#sec-Field-Selections-on-Objects-Interfaces-and-Unions-Types"
        }
    },
    {
        "message": "The field `webSite` does not exist on the type `AddSpeakerPayload`.",
        "locations": [
            {
                "line": 5,
                "column": 5
            }
        ],
        "path": [
            "addSpeaker"
        ],
        "extensions": {
            "type": "AddSpeakerPayload",
            "field": "webSite",
            "responseName": "webSite",
            "specifiedBy": "http://spec.graphql.org/October2021/#sec-Field-Selections-on-Objects-Interfaces-and-Unions-Types"
        }
    },
    {
        "message": "The argument `bio` does not exist.",
        "locations": [
            {
                "line": 2,
                "column": 14
            }
        ],
        "extensions": {
            "type": "Mutation",
            "field": "addSpeaker",
            "argument": "bio",
            "specifiedBy": "http://spec.graphql.org/October2021/#sec-Required-Arguments"
        }
    },
    {
        "message": "The argument `name` does not exist.",
        "locations": [
            {
                "line": 2,
                "column": 25
            }
        ],
        "extensions": {
            "type": "Mutation",
            "field": "addSpeaker",
            "argument": "name",
            "specifiedBy": "http://spec.graphql.org/October2021/#sec-Required-Arguments"
        }
    }
]

前端 POC 代码:

const Container = () => {
  const EXCHANGE_RATES = gql`
query GetSpeakersAndChocolates {
  getSpeakers : speakers {
    id,
    name,
    bio,
    webSite
  }
},
`;

  const ADD_SPEAKERS = gql`
mutation AddSpeakers($name: String!, $bio: String, $webSite: String) {
  addSpeaker(
    bio: $bio,
    name: $name,
    webSite: $webSite
  ) {
    bio
    name
    webSite
  }
}
`;

  const [getSpeakers2, { loading, error, data }] = useLazyQuery(EXCHANGE_RATES);
  const [addSpeaker, mutateObj] = useMutation(ADD_SPEAKERS);


  return (
    <DIV>
      {/* {networkStatus === NetworkStatus.refetch && <h1 style={{ color: 'red' }}>Refetching!</h1>} */}
      {loading && <h1>CARREGANDO</h1>}
      {error && <h1>DEU PAU</h1>}
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {data?.getSpeakers.map(({
          id, name, bio, webSite,
        }: any) => (
          <span key={id}>
            {name}
-
            {bio}
-
            {webSite}
          </span>
        ))}

      </div>

      <button onClick={() => getSpeakers2()}>Refetch!</button>
      <button onClick={() => addSpeaker({ variables: { name: 'oi', bio: 'ae', webSite: 'boa' } })}
      >
ADD SPEAKERS!

      </button>
    </DIV>
  );
};

后端 POC 代码: 型号:

namespace XP.POC.GraphQL.API.Models
{
    public class Speaker
    {
        public int Id { get; set; }

        [Required]
        [StringLength(200)]
        public string Name { get; set; }

        [StringLength(4000)]
        public string Bio { get; set; }

        [StringLength(1000)]
        public virtual string WebSite { get; set; }
    }
}

查询

namespace XP.POC.GraphQL.API.GraphQL.Queries.Speakers
{
    public class Query
    {
        public IQueryable<Speaker> GetSpeakers([Service] ApplicationDbContext context) =>
            context.Speakers;
    }
}

突变:

namespace XP.POC.GraphQL.API.GraphQL.Mutations.Speakers
{
    public record AddSpeakerInput(
            string Name,
            string Bio,
            string WebSite);
}

namespace XP.POC.GraphQL.API.GraphQL.Mutations.Speakers
{
    public class AddSpeakerPayload
    {
        public AddSpeakerPayload(Speaker speaker)
        {
            Speaker = speaker;
        }

        public Speaker Speaker { get; }
    }
}

namespace XP.POC.GraphQL.API.GraphQL.Mutations.Speakers
{
    public class Mutation
    {
        public async Task<AddSpeakerPayload> AddSpeakerAsync(AddSpeakerInput input,
                                                             [Service] ApplicationDbContext context)
        {
            var speaker = new Speaker
            {
                Name = input.Name,
                Bio = input.Bio,
                WebSite = input.WebSite
            };

            context.Speakers.Add(speaker);
            await context.SaveChangesAsync();

            return new AddSpeakerPayload(speaker);
        }
    }
}


  [1]: https://www.apollographql.com/docs/react/data/mutations/#include-modified-objects-in-mutation-responses

试试这个:

mutation AddSpeaker($name: String!, $bio:String, $webSite: String) {
  addSpeaker(input: {name: $name, bio: $bio, webSite: $webSite})
  {
    speaker {
      id
      name
      bio
      webSite
    }
  }
}