Как в React написать mutation и query на сервер GraphQL?

Question

[Нина]

Нужно написать мутацию и запрос на сервер GraphQL, чтобы зарегистрировать нового пользователя, а потом можно было проверять логин и пароль, а так же регистрировать данные пользователя. Я совершенно не знаю GraphQL, пробую написать код, используя информацию с интернета, но постоянно вылезают ошибки.

Schema у сервера:

directive @cacheControl(
  maxAge: Int
  scope: CacheControlScope
) on FIELD_DEFINITION | OBJECT | INTERFACE
directive @specifiedBy(url: String!) on SCALAR
enum CacheControlScope {
  PUBLIC
  PRIVATE
}
​
type Login {
  token: String
  user: User
}
​
type Mutation {
  signup(
    firstName: String!
    secondName: String!
    email: String!
    password: String!
  ): String
  login(email: String!, password: String!): Login
  editUser(
    id: Int!
    email: String!
    firstName: String!
    secondName: String!
    password: String
  ): User
}
​
type Process {
  id: String
  name: String
  numberOfExecutions: Int
  averageLeadTime: String
  averageActiveTime: String
  employeesInvolvedProcess: Int
  numberOfScenarios: Int
  start: String
  end: String
  loading: String
}
​
type Query {
  allUsers: [User]!
  userById(id: Int!): User
  currentUser: User
  processList: [Process]!
}
​
scalar Upload
​
type User {
  id: Int!
  firstName: String!
  secondName: String!
  email: String!
}
​

Мой код:

import { API, graphqlOperation } from "aws-amplify";

const mutation = `
mutation createUser($firstName: String,$secondName: String, $email: String,$password:String){
  createUser(firstName: $firstName,secondName:$secondName,email:$email, password:$password){ 
   signup(   
      firstName
      secondName
      email
      password   
      )
  }
}`;

const onSubmit = async(CreateUser) => {
    try {
      await API.graphql( graphqlOperation( mutation, { input: CreateUser } ) );
      console.log( "successfully created user" );
    } catch( err ) {
      console.log( "error creating user: ", err );
    }
  };

Выдается ошибка:

error creating user:  GraphQLError: Syntax Error: Expected ":", found Name "secondName".
    at syntaxError (syntaxError.mjs:8:1)
    at Parser.expectToken (parser.mjs:1397:1)
    at Parser.parseArgument (parser.mjs:317:1)
    at Parser.optionalMany (parser.mjs:1487:1)
    at Parser.parseArguments (parser.mjs:307:1)
    at Parser.parseField (parser.mjs:294:1)
    at Parser.parseSelection (parser.mjs:268:1)
    at Parser.many (parser.mjs:1507:1)
    at Parser.parseSelectionSet (parser.mjs:255:1)
    at Parser.parseField (parser.mjs:296:1)

И еще не могу понять, где нужно указать, по какому адресу находится адрес? - т.е. куда вставить строку "http://localhost:4000/api".

Answer 1

[Николай Ланец]

Нина, во-первых, у вас неправильно написана мутация, чисто синтаксически.
У вас написано

const mutation = `
mutation createUser($firstName: String,$secondName: String, $email: String,$password:String){
  createUser(firstName: $firstName,secondName:$secondName,email:$email, password:$password){ 
   signup(   
      firstName
      secondName
      email
      password   
      )
  }
}`;

а должно быть

const mutation = `
mutation createUser(
  $firstName: String
  $secondName: String
  $email: String
  $password: String
) {
  signup(
    firstName: $firstName
    secondName: $secondName
    email: $email
    password: $password
  )
}
`;

То есть у вас, во-первых, лишняя обертка получилась, во-вторых, вы не передали в запрос указанные параметры.

Но даже в этом случае у вас не пройдет запрос, так как в схеме у вас некоторые параметры указаны как обязательные, а вы в своем запросе их не указали обязательными. Вот смотрите схему:

type Mutation {
  signup(
    firstName: String!
    secondName: String!
    email: String!
    password: String!
  ): String
  // ...
}

У вас здесь все параметры обязательные, то есть ваш запрос должен выглядеть так:

const mutation = `
mutation createUser(
  $firstName: String!
  $secondName: String!
  $email: String!
  $password: String!
) {
  signup(
    firstName: $firstName
    secondName: $secondName
    email: $email
    password: $password
  )
}
`;

В целом же, судя по тому, что у вас ошибка возникает в .mjs - файлах, она возникает не на стороне фронта, а уже на стороне АПИ-сервера, так что сам механизм у вас вроде как реализован. Но сама тема слишком объемная, чтобы в одном комменте можно было бы ее раскрыть. Попробуйте посмотреть вот это видео: https://www.youtube.com/watch?v=69e-omuXdIw
Оно объемное, но зато раскрывает все уровни реализации GraphQL-API.

Comments

[Нина]

Спасибо, Вы мне подсказали как раз то, что я и просила, - где у меня ошибки в коде

[Николай Ланец]

Нина, не за что!

Answer 2

[Eugene]

Эта библиотека поможет.

Comments

[Нина]

Спасибо за подсказку. Я установила эту библиотеку, но не могу понять - как именно написать запрос. Если на сервере написано

type User {
  id: Int!
  firstName: String!
  secondName: String!
  email: String!
}

то на фронте как написать запрос? - Пишу так

const GET_USER = gql`
query GetUser{
  user{
    id
    firstName
    secondName
    email
  }
}`;

И выдается ошибка:
Error! Response not successful: Received status code 400

Библиотеку подключила
import { gql, useQuery } from "@apollo/client";

[Нина]

Вот еще что выдает

[Eugene]

Нина, название должно быть не как у типа User, а как в type Query