next.jsgraphqlprismapothos

How to create a custom mutation Output in GraphQL Pothos Builder


I have a Login Component created in GraphQL Pothos Builder. I use Prisma as my ORM. I would like to know how can I send custom output in response. Currently I can only send response for User Type. I tried creating UserAndToken ObjectRef but it does not seem to be working. Can you please help me fix this error? I have been trying for the past week but I am stuck on this. Thanks in advance.

import prisma from "@/prisma/client";
import { User as UserModel } from "@prisma/client";
import bcrypt from "bcrypt";
import { GraphQLError } from "graphql";
import ms from "ms";
import { cookies } from "next/headers";
import { builder } from "../builder";
import { User } from "../types/User";
import {
  generateAccessToken,
  generateRefreshToken,
} from "../utils/generateToken";

const UserAndToken = builder
  .objectRef<{ user: UserModel, accessToken: string }>("UserAndToken")
  .implement({
    fields: t => ({
      user: t.field({ type: User, resolve: (parent) => parent.user })
    })
  })

builder.mutationFields((t) => ({
  login: t.prismaField({
    description: "Login to time boxing platform.",
    type: UserAndToken,
    args: {
      email: t.arg({ type: "Email", required: true }),
      password: t.arg.string({ required: true }),
    },
    resolve: async (query, _, args) => {
      const user = await prisma.user.findUnique({
        where: { email: args.email },
      });

      if (
        !user ||
        !bcrypt.compare(args.password, user.password)
      ) {
        return Promise.reject(
          new GraphQLError(
            "Either email or password is incorrect."
          )
        );
      }

      try {
        const accessToken = generateAccessToken(user);
        const refreshToken = generateRefreshToken(user);

        cookies().set({
          name: "X-REFRESH-TOKEN",
          value: refreshToken,
          httpOnly: true,
          sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
          secure: process.env.NODE_ENV === "production",
          expires: new Date(Date.now() + ms("7d")), //7d
        });

        await prisma.session.create({
          data: {
            refreshToken,
            expiresAt: new Date(new Date().getDate() + 7),
            userId: user.id,
          },
        });

        // update user's last login.
        await prisma.user.update({
          where: { id: user.id },
          data: { lastLogin: new Date() },
        });

        return { user, accessToken };
      } catch (err) {
        console.log(err)
        return Promise.reject(
          new GraphQLError(
            "Unable to login. Try again later."
          )
        );
      }
    },
  }),
}));

I tried creating a ObjectRef according to this article however its not working for me. Here is the link to that article - https://github.com/hayes/pothos/discussions/1032

const UserAndToken = builder
  .objectRef<{ user: UserModel, accessToken: string }>("UserAndToken")
  .implement({
    fields: t => ({
      user: t.field({ type: User, resolve: (parent) => parent.user })
    })
})

Solution

    1. You will need to change from t.prismaField to t.field to customize response option.

    2. Install SimpleObjectsPlugin. npm i @pothos/plugin-simple-objects

    3. Add that plugin to SchemaBuilder.

        plugins: [PrismaPlugin, SimpleObjectsPlugin],
        prisma: {
          client: prisma,
        },
      });```
      
      
    4. Add a user objects from Prisma Client in builder object.

        PrismaTypes: PrismaTypes;
        Scalars: {
          DateTime: {
            Input: DateTime;
            Output: DateTime;
          };
          Email: {
            Input: string;
            Output: string;
          };
        };
        Objects: {
          User: User
        }
      };```
      
      
    5. Create a LoginResponse SimpleObject and change the type to LoginResponse

        fields: (t) => ({
          user: t.field({ type: "User" }),
          accessToken: t.string({})
        })
      })```