Мутация в Apollo Angular возвращает 400 Bad Request, но работает в Песочнице - PullRequest
Новая
       18

Мутация в Apollo Angular возвращает 400 Bad Request, но работает в Песочнице

0 голосов
/ 22 октября 2019

POST http://localhost:4000/graphql 400 (неверный запрос)

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

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

Песочница

На моем песочнице GraphQL-сервере я могу успешно запустить следующую мутацию: 

mutation {
  updateUser(userId:4, firstName:"Bob", lastName:"Vance", email:"bobvance@vancerefridgeration.com", phone:"555.555.COLD") {
    uuid
    firstName
    lastName
    email
  }
}

ответ: 

{
  "data": {
    "updateUser": {
      "uuid": "4",
      "firstName": "Bob",
      "lastName": "Vance",
      "email": "bobvance@vancerefridgeration.com"
    }
  }
}

затем, если я сделаю запрос в моем списке пользователей, я увижу изменение: 

query {
  users(email: "bobvance@vancerefridgeration.com") {
    firstName
    lastName
    email
  }
}

# yields...

{
  "data": {
    "users": [
      {
        "firstName": "Bob",
        "lastName": "Vance",
        "email": "bobvance@vancerefridgeration.com"
      }
    ]
  }
}

Apollo Angular

У меня возникли проблемы при воссоздании этого в Angular. Я хочу обновить пользователя через форму. Вот соответствующий код:

user.component.ts 

const UPDATE_USER = gql`
  mutation updateUser(
    $userId: Int!
    $firstName: String
    $lastName: String
    $email: String
    $phone: String
  ) {
    updateUser(
      userId: $userId
      firstName: $firstName
      lastName: $lastName
      email: $email
      phone: $phone
    ) {
      uuid
      firstName
      lastName
      email
      phone
    }
  }
`;

...

const variables = {
    uuid: this.me.uuid,
    firstName: this.profileForm.value.firstName,
    lastName: this.profileForm.value.lastName,
    email: this.profileForm.value.email,
    phone: this.profileForm.value.phone,
};

...

this.updateUserSub = this.apollo
      .mutate({
        mutation: UPDATE_USER,
        variables,      
      })
      .subscribe(({ data }) => {
        console.log('mutation data:', data);
      }, (error) => {
        console.error('Error sending updateUser mutation:', error);
      });

Я вижу, что variables хорошо: {uuid: "4", firstName: "Bob", lastName: "Vance", email: "bobvance@vancerefridgeration.com", phone: "555.555.COLD"}. На сервере не регистрируются ошибки.

Конфигурация сервера

. / Resolvers /

update-user.ts 

import { users, User } from './users';

function updateUser(_: any, args: any) {
  console.log('updateUser hit');
  let user: User;

  try {
    user = users.filter((user) => user.uuid === args.userId)[0];
    console.log(user);
  } catch (error) {
    throw error;
  }

  if (args.firstName !== undefined) {
    user.firstName = args.firstName;
  }
  if (args.lastName !== undefined) {
    user.lastName = args.lastName;
  }
  if (args.email !== undefined) {
    user.email = args.email;
  }
  if (args.phone !== undefined) {
    user.phone = args.phone;
  }

  return user;
}

export default updateUser;

users.ts 

interface User {
  uuid: number;
  firstName: string;
  lastName: string;
  email: string;
  phone?: string;
}

const users: Array<User> = [
  {
    uuid: 1,
    firstName: 'Sara',
    lastName: 'Smith',
    email: 'ssmith@gmail.com',
    phone: '666.666.6669',
  },
  {
    uuid: 2,
    firstName: 'Jimmy',
    lastName: 'Jones',
    email: 'jjones@yahoo.ca',
    phone: '666.666.6669',
  },
  {
    uuid: 3,
    firstName: 'Bob',
    lastName: 'Benson',
    email: 'bbenson@hotmail.com',
    phone: '666.666.6669',
  },
  {
    uuid: 4,
    firstName: 'Farah',
    lastName: 'Fanning',
    email: 'ffanning@hotmail.com',
    phone: '555.222.6636',
  },
];

function usersResolver(_: any, args: any) {
  return users.filter((user) => user.email === args.email);
}

export { User, users, usersResolver };

index.ts 

import books from './books';
import { usersResolver } from './users';
import updateUser from './update-user';

const resolvers = {
  Query: {
    books,
    users: usersResolver,
  },
  Mutation: {
    updateUser,
  },
};

export default resolvers;

. / Types /

index.ts 

import { gql } from 'apollo-server';
import book from './book';
import user from './user';

const typeDefs = gql`
  ${book}
  ${user}

  type Query {
    books: [Book]
    users(email: String!): [User]
  }

  type Mutation {
    updateUser(
      userId: Int!
      firstName: String
      lastName: String
      email: String
      phone: String
    ): User
  }
`;

export default typeDefs;

user.ts 

import { gql } from 'apollo-server';

const userType = gql`
  # Comments in GraphQL strings (such as this one) start with the hash (#) symbol.

  # This "Book" type defines the queryable fields for every book in our data source.
  type User {
    uuid: ID!
    firstName: String
    lastName: String
    email: String
    phone: String
    accessLevel: Int
    status: Int
    signature: String
    roleIDs: [Int]
  }
`;

export default userType;
...