[251024 TIL] GraphQL Yoga 역할(+Hasura Remote Schema)

GraphQL Yoga 역할(+Hasura Remote Schema)

예시

// /api/graphql/route.ts
import { DateTimeTypeDefinition } from "graphql-scalars";
import { createSchema, createYoga } from "graphql-yoga";
import { v4 as uuid } from "uuid";

interface NextContext {
    params: Promise<Record<string, string>>;
}

const typeDefs = /* GraphQL */ `
    type Query {
        session: Session!
    }

    type Mutation {
        ok: String!
    }

    type Session {
        id: String!
        userId: String!
    }
`;

const { handleRequest } = createYoga<NextContext>({
    schema: createSchema({
        typeDefs: [DateTimeTypeDefinition, typeDefs],
        resolvers: {
            Query: {
                session: async (_, _args, ctx) => {
                    const userId = ctx.request.headers.get("x-hasura-user-id");

                    if (!userId) {
                        throw new Error("userId not exists!");
                    }

                    const cookie = ctx.request.headers.get("cookie");

                    if (!cookie) {
                        throw new Error("cookie is not exists!");
                    }

                    return {
                        id: uuid(),
                        userId,
                    };
                },
            },
            Mutation: {
                // Mutation TEST 용도. 임시코드
                ok() {
                    return "ok";
                },
            },
        },
    }),
    graphqlEndpoint: "/api/graphql",
    graphiql: process.env.NODE_ENV !== "production",
    	cors: {
    	credentials: true,
    },
    fetchAPI: {
    	Response: Response,
    },
});

export {
    handleRequest as GET,
    handleRequest as POST,
    handleRequest as OPTIONS,
};

1. GraphQL-Yoga

• 역할: 앱 내부의 GraphQL 엔드포인트
• 동작: 로컬에서 세션 정보를 리졸브(Hasura Remote Schema 에 등록 안했을 경우!)

 

2. Hasura Remote Schema 연동 시의 동작 방식

• Hasura 콘솔에서 설정
• 흐름: 앱 → Hasura → (JWT 검증) → 앱 (GraphQL-Yoga: /api/graphql)
• Hasura가 JWT를 먼저 검증하고 x-hasura-user-id 등의 세션 변수를 생성
• 검증된 세션 변수를 Remote Schema(yoga)로 전달

 

3. Apollo Client 등을 통해 쿼리하는 것과의 차이점

• Apollo Client 쿼리:
  • 역할: Hasura GraphQL로 요청을 보내는 클라이언트
  • 동작: 앱 -> Hasura
  • 그냥 Hasura 로 쿼리를 요청하는 것!
• GraphQL-Yoga 만 사용시:
  • 앱 내부 로컬 호출!
• GrapQL-Yoga + Hasura Remote Schema
  • 앱 → Hasura → (JWT 검증) → GraphQL-Yoga (`/api/graphql`)

1.