How to launch mesh serve as a standalone server
#618
-
|
Hi there! I could have sworn I just submitted an issue that I now cannot find, but that I wanted to elaborate upon. I'm trying to launch an instance of Any guidance would be appreciated. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
I can close this as I figured out a - hacky - way to do it. |
Beta Was this translation helpful? Give feedback.
-
|
Could you share how you did it? Actually we are currently working on a recipe for serverless environments. For now, we recommend people to implement their server code like this for serverless environments. |
Beta Was this translation helpful? Give feedback.
-
|
Sure, I just copied the code from the import { findAndParseConfig, getMesh } from "@graphql-mesh/runtime"
import cluster from "cluster"
import os from "os"
import express from "express"
import http from "http"
import "regenerator-runtime/runtime"
//import dotenv from "dotenv"
//dotenv.config()
import graphqlHTTP from "express-graphql"
import graphqlUpload from "graphql-upload"
const { PORT = 1234 } = process.env
function playground(exampleQuery, graphqlPath) {
return async (req, res, next) => {
if (req.query.query) {
next()
return
}
res.setHeader("Content-Type", "text/html")
res.write(`
<script>
const localStorageMock = new Map();
Object.defineProperty(window, 'localStorage', {
get() {
return {
getItem(key) {
return localStorageMock.get(key);
},
setItem(key, val) {
return localStorageMock.set(key, val);
},
clear() {
return localStorageMock.clear();
},
key(i) {
return localStorageMock.keys()[i];
},
remove(key) {
return localStorageMock.delete(key);
},
get length() {
return localStorageMock.size;
}
}
}
});
</script>
`)
const renderPageOptions = {
title: "GraphQL Mesh Playground",
tabs: null,
}
res.write(`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"
/>
<title>GraphQL Mesh Playground</title>
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css"
/>
<link
rel="shortcut icon"
href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png"
/>
<script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
</head>
<body>
<div id="root">
<style>
body {
background-color: rgb(23, 42, 58);
font-family: Open Sans, sans-serif;
height: 90vh;
}
#root {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.loading {
font-size: 32px;
font-weight: 200;
color: rgba(255, 255, 255, 0.6);
margin-left: 20px;
}
img {
width: 78px;
height: 78px;
}
.title {
font-weight: 400;
}
</style>
<img src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/logo.png" alt="" />
<div class="loading">
Loading
<span class="title">GraphQL Mesh Playground</span>
</div>
</div>
</body>
</html>
`)
res.write(`
<script>
window.addEventListener('load', function (event) {
const renderPageOptions = ${JSON.stringify(renderPageOptions)};
const endpoint = location.protocol + '//' + location.hostname + (location.port ? (':' + location.port) : '') + '${graphqlPath}';
renderPageOptions.endpoint = endpoint;
if (renderPageOptions.tabs) {
renderPageOptions.tabs.forEach(tab => {
tab.endpoint = endpoint;
});
}
GraphQLPlayground.init(document.getElementById('root'), renderPageOptions);
});
</script>
`)
res.end()
}
}
async function serveMesh(logger, schema, contextBuilder, fork, port = 4000, exampleQuery) {
let _a
const graphqlPath = "/staging/graphql"
if (cluster.isMaster && fork) {
fork = fork > 1 ? fork : os.cpus().length
for (let i = 0; i < fork; i++) {
cluster.fork()
}
logger(
`🕸️ => Serving GraphQL Mesh GraphiQL: http://localhost:${port}${graphqlPath} in ${fork} forks`
)
} else {
const app = express()
app.set("trust proxy", "loopback")
const httpServer = http.createServer(app)
if (
((_a = process.env.NODE_ENV) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !==
"production"
) {
const playgroundMiddleware = playground(exampleQuery, graphqlPath)
app.get("/", playgroundMiddleware)
app.get(graphqlPath, playgroundMiddleware)
}
app.use(
graphqlUpload.graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }),
graphqlHTTP(async req => ({
schema,
context: await contextBuilder(req),
graphiql: false,
}))
)
httpServer.listen(port.toString(), () => {
if (!fork) {
logger(
`🕸️ => Serving GraphQL Mesh Playground: http://localhost:${port}${graphqlPath}`
)
}
})
}
}
const log = console.log
//const logger = createLogger({
// level: "info",
// format: format.prettyPrint(),
// transports: [
// new transports.Console({
// format: format.simple(),
// }),
// ],
//})
const serve = async ({ fork, port, "example-query": exampleQuery }) => {
try {
const meshConfig = await findAndParseConfig({
//dir: __dirname, //+ "/tmp/",
})
const { schema, contextBuilder } = await getMesh(meshConfig)
await serveMesh(log, schema, contextBuilder, fork, port, exampleQuery)
} catch (e) {
console.error("Unable to serve mesh: ", e)
}
}
serve({ fork: null, port: PORT, "example-query": null })
.then(() => {})
.catch(console.error) //?Two things to note:
|
Beta Was this translation helpful? Give feedback.
-
|
I wish I would have seen the weather example earlier :D |
Beta Was this translation helpful? Give feedback.
I can close this as I figured out a - hacky - way to do it.