5803024009/04_GraphQLAPI_Melvyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add embedded Apollo Sandbox page

Browse Source
This commit is contained in:
MelvynFaith
2026-09-09 18:23:47 +07:00
parent 6edf45b5f4
commit 3b458298e0
4 changed files with 97 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/api/graphql.js
+36 -9
View File
@@ -2,14 +2,16 @@ const { ApolloServer } = require('@apollo/server');
const { startServerAndCreateNextHandler } = require('@as-integrations/next');
const { Pool } = require('pg');
// 1. Inisialisasi Pool PostgreSQL untuk Serverless
const pool = new Pool({
connectionString: process.env.DATABASE_URL,
ssl: {
rejectUnauthorized: false,
},
max: 1, // Menjaga batas koneksi pada lingkungan serverless
max: 1, // Batasi 1 koneksi per instance serverless
});
// 2. Definisi Schema GraphQL (typeDefs)
const typeDefs = `#graphql
type Category {
id: ID!
@@ -35,6 +37,7 @@ const typeDefs = `#graphql
}
`;
// 3. Definisi Resolver (Query + Nested Resolvers)
const resolvers = {
Query: {
categories: async () => {
@@ -46,14 +49,21 @@ const resolvers = {
return result.rows[0] || null;
},
products: async () => {
const result = await pool.query('SELECT id, title, price::float, category_id, created_by FROM products ORDER BY id ASC');
const result = await pool.query(
'SELECT id, title, price::float, category_id, created_by FROM products ORDER BY id ASC'
);
return result.rows;
},
product: async (_, { id }) => {
const result = await pool.query('SELECT id, title, price::float, category_id, created_by FROM products WHERE id = $1', [id]);
const result = await pool.query(
'SELECT id, title, price::float, category_id, created_by FROM products WHERE id = $1',
[id]
);
return result.rows[0] || null;
},
},
// Resolver Relasi Category -> Products (One-to-Many)
Category: {
products: async (parent) => {
const result = await pool.query(
@@ -63,6 +73,8 @@ const resolvers = {
return result.rows;
},
},
// Resolver Relasi Product -> Category (Many-to-One)
Product: {
category: async (parent) => {
if (!parent.category_id) return null;
@@ -72,25 +84,40 @@ const resolvers = {
},
};
// 4. Inisialisasi Apollo Server
const server = new ApolloServer({
typeDefs,
resolvers,
introspection: true,
csrfPrevention: false, // Mematikan proteksi CSRF agar request dari browser Sandbox tidak dicegat
});
const apolloHandler = startServerAndCreateNextHandler(server);
// Wrapper untuk menangani CORS Apollo Studio Sandbox
// 5. Handler CORS untuk Apollo Studio dan Embedded Sandbox
module.exports = async function handler(req, res) {
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.setHeader('Access-Control-Allow-Origin', 'https://studio.apollographql.com');
res.setHeader('Access-Control-Allow-Methods', 'GET,OPTIONS,POST');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
const allowedOrigins = new Set([
'https://studio.apollographql.com',
'https://embeddable-sandbox.cdn.apollographql.com',
]);
const origin = req.headers.origin;
if (allowedOrigins.has(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
res.setHeader('Vary', 'Origin');
}
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
res.setHeader(
'Access-Control-Allow-Headers',
'Content-Type, Authorization, apollo-require-preflight, x-apollo-operation-name'
);
// Respons langsung untuk preflight OPTIONS request
if (req.method === 'OPTIONS') {
res.status(200).end();
return;
}
return apolloHandler(req, res);
};
};