dotansimha / graphql-yoga

🧘 Rewrite of a fully-featured GraphQL Server with focus on easy setup, performance & great developer experience. The core of Yoga implements WHATWG Fetch API and can run/deploy on any JS environment.
https://the-guild.dev/graphql/yoga-server
MIT License
8.23k stars 565 forks source link

Cloudflare worker w/ GraphQL Yoga is unable to start using `useSofaWithSwaggerUI` #2387

Closed rhino88 closed 1 year ago

rhino88 commented 1 year ago

Describe the bug

Unable to start Cloudflare Worker with useSofaWithSwaggerUI in plugins for GraphQL Yoga.

Your Example Website or App

https://github.com/rhino88/graphql-yoga-cloudflare-sofa-issue

Steps to Reproduce the Bug or Issue

Working state without useSofaWithSwaggerUI:

$ npm i wrangler -g
$ wrangler generate graphql-yoga-worker https://github.com/the-guild-org/yoga-cloudflare-workers-template
$ cd graphql-yoga-worker/
$ npm i graphql-yoga@latest
$ npm i
$ wrangler publish

With the above steps everything works as expected. However...

Adding Sofa with the following steps will cause an error which usually indicates the worker was unable to start:

  1. npm i @graphql-yoga/plugin-sofa
  2. Replace index.ts with the following:
import { createYoga, createSchema } from "graphql-yoga";
import { useSofaWithSwaggerUI } from "@graphql-yoga/plugin-sofa";

const schema = createSchema({
  typeDefs: /* GraphQL */ `
    type PokemonSprites {
      front_default: String!
      front_shiny: String!
      front_female: String!
      front_shiny_female: String!
      back_default: String!
      back_shiny: String!
      back_female: String!
      back_shiny_female: String!
    }
    type Pokemon {
      id: ID!
      name: String!
      height: Int!
      weight: Int!
      sprites: PokemonSprites!
    }
    type Query {
      pokemon(id: ID!): Pokemon
    }
  `,
  resolvers: {
    Query: {
      pokemon: async (_parent, { id }) => {
        const result = await fetch(
          new Request(`https://pokeapi.co/api/v2/pokemon/${id}`),
          {
            // @ts-expect-error
            cf: {
              // Always cache this fetch regardless of content type
              // for a max of 1 min before revalidating the resource
              cacheTtl: 50,
              cacheEverything: true,
            },
          }
        );
        return await result.json();
      },
    },
  },
});

const yoga = createYoga({
  schema,
  graphiql: {
    defaultQuery: /* GraphQL */ `
      query samplePokeAPIquery {
        pokemon: pokemon(id: 1) {
          id
          name
          height
          weight
          sprites {
            front_shiny
            back_shiny
          }
        }
      }
    `,
  },
  plugins: [
    useSofaWithSwaggerUI({
      basePath: "/rest",
      swaggerUIEndpoint: "/swagger",
      servers: [
        {
          url: "/", // Specify Server's URL.
          description: "Development server",
        },
      ],
      info: {
        title: "Example API",
        version: "1.0.0",
      },
    }),
  ],
});

self.addEventListener("fetch", yoga);
  1. Try to publish via wrangler publish or run via wrangler dev

Error:

✘ [ERROR] A request to the Cloudflare API (/accounts/1234/workers/scripts/my-worker-dev) failed.

  Uncaught ReferenceError: process is not defined
    at worker.js:19312:131
    at worker.js:20345:3
   [code: 10021]

Expected behavior

As a user I expected to add this plugin and view the rest/swagger endpoints.

Screenshots or Videos

No response

Platform

Additional context

No response

rhino88 commented 1 year ago

It looks like it's coming from here: https://github.com/Urigo/SOFA/blob/1e914d742717bef8528fba651951ee92da272f61/src/logger.ts#L12

I'll try to submit a fix today.

ardatan commented 1 year ago

It is not there now; https://github.com/Urigo/SOFA/blob/master/src/logger.ts#L12 It should be fixed in the following release.

ardatan commented 1 year ago

This should be fixed in the latest release. Let us know if the issue is still happening.