来自客户端的错误数据通过GraphQL验证

Question

我已经用React和Apollo客户端在NestJS服务器上用GraphQL API制作了简单的CRUD应用程序。

我有一个简单的突变：

schema.gql:

type Mutation {
  createUser(input: CreateUserInput!): User! // CreateUserInput type you can see in user.input.ts below
  updateUser(id: ID!, input: UpdateUserInput!): User!
  deleteUser(id: ID!): User!
}

user.input.ts:

import { InputType, Field } from "@nestjs/graphql";
import { EmailScalar } from "../email.scalar-type";

@InputType()
export class CreateUserInput {
    // EmailScalar is a custom Scalar GraphQL Type that i took from the internet and it worked well
    @Field(() => EmailScalar)
    readonly email: string;
    @Field()
    readonly name: string;
}

“EmailScalar”类型主要检查“email”输入是否具有*@*.*格式

它不能通过验证（因为电子邮件类型工作正常）

但当从客户端发送的查询通过验证时：

NestJS服务器日志（来自下面的代码）

users.resolver.ts:

@Mutation(() => User)
async createUser(@Args('input') input: CreateUserInput) { // Type from user.input.ts
   Logger.log(input); // log from screenshot, so if it's here it passed validation
   return this.usersService.create(input); // usersService makes requests to MongoDB
}

App.tsx:

...

// CreateUserInput class is not imported to App.tsx (it is at server part) but it seems to be fine with it
const ADD_USER = gql`
  mutation AddMutation($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      name
      email
    }
  }
`

function App(props: any) {
  const { loading, error, data } = useQuery(GET_USERS);

  const [addUser] = useMutation(
    ADD_USER,
    {
      update: (cache: any, { data: { createUser } }: any) => {
        const { users } = cache.readQuery({ query: GET_USERS });
        cache.writeQuery({
          query: GET_USERS,
          data: {
            users: [createUser, ...users],
          },
        })
      }
    }
  );

...

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return <UserTable users={data.users} addUser={addUser} updateUser={updateUser} deleteUser={deleteUser} />;
}

以前从未使用过NestJS、Apollo、React或GraphQL，所以我有点迷路了。

完整代码:https://github.com/n238635/nest-react-crud-test

Answer 1

这就是如何定义自定义标量的方法：

parseValue(value: string): string {
  return value;
}

serialize(value: string): string {
  return value;
}

parseLiteral(ast: ValueNode): string {
  if (ast.kind !== Kind.STRING) {
    throw new GraphQLError('Query error: Can only parse strings got a: ' + ast.kind, [ast]);
  }

  // Regex taken from: http://stackoverflow.com/a/46181/761555
  var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
  if (!re.test(ast.value)) {
    throw new GraphQLError('Query error: Not a valid Email', [ast]);
  }

  return ast.value;
}

在分析查询内部的文字值（即用双引号包装的文字字符串）时调用parseliteral。分析变量值时调用parsevalue。当您的客户端发送查询时，它将该值作为变量发送，而不是作为文字值发送。因此使用parsevalue而不是parseliteral。但是parsevalue不执行任何类型的验证--您只是原样返回值。您需要在这两种方法中实现验证逻辑。

实现serialize方法也是一个好主意，这样您的标量可以同时用于输入和响应验证。