Functions not compatible with apollo server

mariusc23 commented 3 years ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I wanted to set up a small graphql endpoint for the frontend to use (for forms), but I couldn't get apollo-server-micro to work. This is the error I got:

Cannot use GraphQLSchema "[object GraphQLSchema]" from another module or realm.

Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

https://yarnpkg.com/en/docs/selective-version-resolutions

Duplicate "graphql" modules cannot be used at the same time since different
versions may have different capabilities and behavior. The data from one
version used in the function from another could produce confusing and
spurious results.

This happens when initializing the ApolloServer instance. If I run the file using node.js directly it does not throw an error on the same line, so I think Gatsby may be doing some loader magic that breaks things that need the graphql module, such as apollo server. I think this magic should be dispelled for Gatsby Functions.

I have verified that indeed there is only one graphql module in my node_modules using yarn why graphql and manually checking.

Reproduction Link

https://codesandbox.io/s/quirky-thompson-llnhk?file=/src/api/graphql.js

Steps to Reproduce

Install apollo-server-micro and micro
Create a src/api/graphql.js with a basic graphql server (see example below)
Attempt to load /api/graphql in browser

import { ApolloServer, gql } from "apollo-server-micro"

const typeDefs = gql`
  type Query {
    sayHello: String
  }
`

const resolvers = {
  Query: {
    sayHello(parent, args, context) {
      return "Hello World!"
    }
  }
}

// this is the line that throws
const apolloServer = new ApolloServer({ typeDefs, resolvers, debug: true })

export default async function graphqlEndpoint(req, res) {
  await apolloServer.start()
  const handler = apolloServer.createHandler()

  return handler(req, res)
}

Expected Result

The graphql endpoint would show

Actual Result

Error when executing function "/.../src/api/graphql.ts":

Cannot use GraphQLSchema "[object GraphQLSchema]" from another module or realm. Ensure that there is only one instance of "graphql" in the node_modules directory. If different versions of "graphql" are the dependencies of other relied on modules, use "resolutions" to ensure only one version is installed. https://yarnpkg.com/en/docs/selective-version-resolutions Duplicate "graphql" modules cannot be used at the same time since different versions may have different capabilities and behavior. The data from one version used in the function from another could produce confusing and spurious results.

Environment

System:
    OS: macOS 11.5.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.22.0 - ~/.nvm/versions/node/v14.15.5/bin/npm
  Languages:
    Python: 2.7.16 - /Users/marius/.pyenv/shims/python
  Browsers:
    Chrome: 93.0.4577.63
    Firefox: 89.0.2
    Safari: 14.1.2
  npmPackages:
    gatsby: ^3.13.0 => 3.13.0 
    gatsby-awesome-pagination: ^0.3.8 => 0.3.8 
    gatsby-plugin-advanced-sitemap: ^2.0.0 => 2.0.0 
    gatsby-plugin-catch-links: ^3.13.0 => 3.13.0 
    gatsby-plugin-drift: ^1.0.0 => 1.0.0 
    gatsby-plugin-feed: ^3.13.0 => 3.13.0 
    gatsby-plugin-force-trailing-slashes: ^1.0.5 => 1.0.5 
    gatsby-plugin-google-analytics: ^3.13.0 => 3.13.0 
    gatsby-plugin-image: ^1.13.0 => 1.13.0 
    gatsby-plugin-manifest: ^3.13.0 => 3.13.0 
    gatsby-plugin-mdx: ^2.13.0 => 2.13.0 
    gatsby-plugin-netlify-cms: ^5.13.0 => 5.13.0 
    gatsby-plugin-offline: ^4.13.0 => 4.13.0 
    gatsby-plugin-postcss: ^4.13.0 => 4.13.0 
    gatsby-plugin-react-helmet: ^4.13.0 => 4.13.0 
    gatsby-plugin-root-import: ^2.0.7 => 2.0.7 
    gatsby-plugin-sharp: ^3.13.0 => 3.13.0 
    gatsby-plugin-typegen: ^2.2.4 => 2.2.4 
    gatsby-plugin-typescript: ^3.13.0 => 3.13.0 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.25 => 1.1.25 
    gatsby-remark-images: ^5.10.0 => 5.10.0 
    gatsby-source-filesystem: ^3.13.0 => 3.13.0 
    gatsby-transform-carbonara: ^1.0.0 => 1.0.0 
    gatsby-transformer-remark: ^4.10.0 => 4.10.0 
    gatsby-transformer-sharp: ^3.13.0 => 3.13.0

Config Flags

No response

mariusc23 commented 3 years ago

Finally had some time to do some digging into this and it seems like an issue with webpack and the fact that apollo-server doesn't publish ESM versions yet, but the graphql module does: https://github.com/apollographql/apollo-server/issues/4983 and https://github.com/apollographql/apollo-server/issues/5627

It seems like if gatsby wants to support apollo-server in functions there needs to be a way to customize the functions webpack config. I verified if I manually define extensions: ['ts', 'mjs', 'js', '...'] in the functions webpack config that it works. Is there a plan to support customizing the webpack config?

LekoArts commented 3 years ago

The comments https://github.com/apollographql/apollo-server/issues/4983#issuecomment-848428059 & https://github.com/apollographql/apollo-server/issues/5627#issuecomment-901656537 seem to suggest though that this would (also) be fixed with adding an alias. Gatsby doesn't support ESM right now so you can't use pure ESM packages out of the box just yet.

mariusc23 commented 3 years ago

Yeah, alias should work too. Just need a way to configure the functions webpack config. The onCreateWebpackConfig hook seems to be only for non-functions webpack.

github-actions[bot] commented 3 years ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

mariusc23 commented 3 years ago

This is still an issue since there's no way to configure the functions webpack config AFAIK. Could file a ticket for that or rename this one if preferred?

github-actions[bot] commented 3 years ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions[bot] commented 2 years ago

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

gatsbyjs / gatsby