Нина

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

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.

для .page height: 100%;замените на min-height: 100%;
Не ограничивайте строго высоту - у вас из-за этого секция с формой не влазит в main

Хак: однопиксельнй транспорент гиф как постер и медиа запросы:
video[poster]{background-image:url(poster.jpg)}

У вас на странице есть псевдоэлемент, у которого ширина 1200px, поправьте это и все будет ок

Это не ошибка, это предупреждение, по сути оно работе не мешает, но если бесит легко фиксится, нужно в предложенном в доках pipe заменить browsers: ['last 2 versions'] на overrideBrowserslist: ['last 2 versions'] и тогда предупреждение пропадает))

.pipe(autoprefixer({
            overrideBrowserslist:  ['last 2 versions'],
            cascade: false
        }))