Adding CORS header into gqlgen default example?

Question

I'm trying to setup up a basic stack using React, Apollo served by graphQL served by Go through gqlgen.

I'm following the getting started guide for gqlgen, which works fine.

I'm also following the getting started guide for Apollo, which works fine.

My trouble lies in the chrome not allowing me to ping the backend when I try to stitch the two together. I get a CORS preflight header error which is understandable, considering React is on localhost:3000 and the Go server is on localhost:8080

gqlgen provided a helpful example on how to get CORS running on the Go server here using chi and go-cors. However the example provided is based of the starwars example of gqlgen rather then the getting-started example.

I modified the CORS example to the following:

package main

import (
    "net/http"

    "github.com/99designs/gqlgen/graphql/handler"
    "github.com/99designs/gqlgen/graphql/handler/transport"
    "github.com/99designs/gqlgen/graphql/playground"
    "github.com/FlockSupport/graphql/graph"
    "github.com/FlockSupport/graphql/graph/generated"
    "github.com/go-chi/chi"
    "github.com/gorilla/websocket"
    "github.com/rs/cors"
)

func main() {
    router := chi.NewRouter()

    // Add CORS middleware around every request
    // See https://github.com/rs/cors for full option listing
    router.Use(cors.New(cors.Options{
        AllowedOrigins:   []string{"http://localhost:8080"},
        AllowCredentials: true,
        Debug:            true,
    }).Handler)

    // srv := handler.New(starwars.NewExecutableSchema(starwars.NewResolver())) // MODIFIED THIS.
    srv := handler.New(generated.NewExecutableSchema(generated.Config{Resolvers: &graph.Resolver{}}))

    srv.AddTransport(&transport.Websocket{
        Upgrader: websocket.Upgrader{
            CheckOrigin: func(r *http.Request) bool {
                // Check against your desired domains here
                return r.Host == "example.org"
            },
            ReadBufferSize:  1024,
            WriteBufferSize: 1024,
        },
    })

    router.Handle("/", playground.Handler("GraphQL Playground", "/query"))
    // router.Handle("/", handler.Playground("Starwars", "/query")) // MODIFIED THIS.
    router.Handle("/query", srv)

    err := http.ListenAndServe(":8080", router)
    if err != nil {
        panic(err)
    }
}

The server runs, but testing queries out through the playground (localhost:8080 so CORS shouldn't matter here) gives the following error:

{
  "error": {
    "errors": [
      {
        "message": "transport not supported"
      }
    ],
    "data": null
  }
}

This also doesn't work even if I setup the Chi router only:

func main() {
    router := chi.NewRouter()

    srv := handler.New(generated.NewExecutableSchema(generated.Config{Resolvers: &graph.Resolver{}}))

    router.Handle("/", playground.Handler("GraphQL Playground", "/query"))
    router.Handle("/query", srv)

    err := http.ListenAndServe(":8080", router)
    if err != nil {
        panic(err)
    }
}

I get a Server Cannot Be Reached when I access localhost:8080 playground.

How can I enable CORS properly on the gqlgen Go server so React can ping it?

Answer 1

I had the same issue, and solved it by using the NewDefaultServer method instead of New.

srv := handler.NewDefaultServer(.....)