search

ardatan / graphql-mesh

🕸️ GraphQL Federation Framework for any API services such as REST, OpenAPI, Swagger, SOAP, gRPC and more...
https://the-guild.dev/graphql/mesh
MIT License
3.29k stars 342 forks source link

Mesh and Sveltekit on Vercel? #7130

Closed roeeklinger closed 4 months ago

roeeklinger commented 4 months ago

if this guide is followed, mesh can run well with Sveltekit: https://the-guild.dev/graphql/mesh/docs/getting-started/deploy-mesh-gateway#mesh-and-sveltekit

package.json

{
    "name": "supabase-sveltekit",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "build:mesh": "mesh build",
        "serve:mesh": "mesh dev",
        "preview": "vite preview",
        "test": "playwright test",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "test:unit": "vitest",
        "lint": "prettier --plugin-search-dir . --check . && eslint .",
        "format": "prettier --plugin-search-dir . --write ."
    },
    "devDependencies": {
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "houdini": "^1.2.47",
        "houdini-svelte": "^1.2.47",
        "svelte": "^4.2.7",
        "svelte-check": "^3.6.0",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^5.0.3"
    },
    "type": "module",
    "dependencies": {
        "@graphql-mesh/cli": "^0.90.10",
        "@graphql-mesh/graphql": "^0.98.8",
        "@supabase/auth-ui-shared": "^0.1.8",
        "@supabase/auth-ui-svelte": "^0.2.9",
        "@supabase/ssr": "^0.3.0",
        "@supabase/supabase-js": "^2.42.3",
        "graphql": "^16.8.2",
        "node-libcurl": "^4.0.0"
    }
}

src/routes/api/+server.ts

import { createBuiltMeshHTTPHandler } from '../../../../.mesh'

const meshHttp = createBuiltMeshHTTPHandler()

export { meshHttp as get, meshHttp as post }

after that I can run these commands:

npm run npmbuild:mesh
npm run serve:mesh

this works well.

however, if I try to run it as serverless, since I am deploying on Vercel:

npm run dev
curl http://localhost:5173/api/graphql

I get this error:

2:18:23 AM [vite] Error when evaluating SSR module /.mesh/index.ts: failed to import "graphql"
|- SyntaxError: [vite] Named export 'GraphQLScalarTypeConfig' not found. The requested module 'graphql' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'graphql';
const {GraphQLResolveInfo, SelectionSetNode, FieldNode, GraphQLScalarTypeConfig} = pkg;

    at analyzeImportedModDifference (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:54078:19)
    at nodeImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55114:9)
    at async ssrImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55011:24)
    at async eval (/Users/roeeklinger/Github/svelteket-website/.mesh/index.ts:3:44)
    at async instantiateModule (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9)

2:18:23 AM [vite] Error when evaluating SSR module /Users/roeeklinger/Github/svelteket-website/src/routes/api/graphql/+server.ts: failed to import "/.mesh/index.ts"
|- SyntaxError: [vite] Named export 'GraphQLScalarTypeConfig' not found. The requested module 'graphql' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'graphql';
const {GraphQLResolveInfo, SelectionSetNode, FieldNode, GraphQLScalarTypeConfig} = pkg;

    at analyzeImportedModDifference (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:54078:19)
    at nodeImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55114:9)
    at async ssrImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55011:24)
    at async eval (/Users/roeeklinger/Github/svelteket-website/.mesh/index.ts:3:44)
    at async instantiateModule (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9)

SyntaxError: [vite] Named export 'GraphQLScalarTypeConfig' not found. The requested module 'graphql' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'graphql';
const {GraphQLResolveInfo, SelectionSetNode, FieldNode, GraphQLScalarTypeConfig} = pkg;

    at analyzeImportedModDifference (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:54078:19)
    at nodeImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55114:9)
    at async ssrImport (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55011:24)
    at async eval (/Users/roeeklinger/Github/svelteket-website/.mesh/index.ts:3:44)
    at async instantiateModule (file:///Users/roeeklinger/Github/svelteket-website/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:55071:9)

Mesh can be deployed to Vercel using NextJS, and it can be deployed using Sveltekit, can I also deploy Mesh to Vercel as serverless when using Sveltekit?

enisdenjo commented 4 months ago

@roeeklinger can you try with:

@graphql-mesh/cli@0.91.0-alpha-20240620123302-b0b8c297177208f5e5378cf7da64c3220c4a9c0c

from #7131. Thanks!

If it still doesn't work, a repro would be much appreciated!

roeeklinger commented 4 months ago

Thanks @enisdenjo ! I tested the package hash you suggested, but unfortunately it had the same result.

My project had a lot of private stuff, so I gathered some public APIs from the web and stitched together a repro repo for you here.

Simply run: npm run dev

and try: curl -X POST http://localhost:5174/api

You will see the error come up.

You can also use the following commands to pull schema: npm run build:mesh

Hope that helps!

enisdenjo commented 4 months ago

Hey @roeeklinger, I've dug around v0 and couldn't get it to work... Our docs seem to be outdated.

However, I've tried the same with the new upcoming Mesh v1 here: https://github.com/roeeklinger/graph-mesh-sveltekit/pull/1 and it seems to work! Can you please try it and report?

Also updated the documentation for v1 showcasing what I did: https://github.com/ardatan/graphql-mesh/pull/7263.

roeeklinger commented 4 months ago

Hey @enisdenjo ! Thanks for the update, much appreciated.

Initially I thought this fixed the issue, After reviewing the code and mesh up close, I realized the code you suggested didn't really work, we were mislead by Houdini. When you configured Houdini with watchSchema, it watched the tcgdex schema and updated the root schema.graphql, overriding what mesh-compose generated, this gave us the illusion that mesh worked while in reality, if you tested the API directly it did not. Houdini was sending the requests to tcgdex directly.

However, your old "not native" implementations did work, I managed to play around with them a bit and get them working "natively" in the latest main commit in roeeklinger/graph-mesh-sveltekit.

I am not sure if everything there is needed, but at least it works.

It seems like #7263 will need to be updated, as the current docs again reflect code that doesn't actually work on Sveltekit.

enisdenjo commented 4 months ago

@roeeklinger mind the closed issue. I'll continue to investigate as per https://github.com/ardatan/graphql-mesh/issues/7130#issuecomment-2221733936 and get back to you here. We'll open other issues if necessary! Thank you for your patiance.

enisdenjo commented 2 months ago

Hey hey, sorry for the delay - we're quite busy ahead of the upcoming GraphQL Conf 2024. I've noticed you managed to get the integration working with Mesh and have the knowhow of it. A PR updating the SvelteKit documentation would be very welcome and much appreciated!