absinthe-graphql/absinthe_plug#199 workaround

README.md

Here's a quick workaround (at least for local use) that involves downloading the assets:

First, make sure you're running absinthe_plug from master (you need an unreleased fix for HTTPS downloads):

In your mix.exs:

defp deps do
  [
    # ...
    {:absinthe_plug, github: "absinthe-graphql/absinthe_plug"},
    # ....
  ]
end

Make sure you update your dep:

$ mix deps.update absinthe_plug

Then, download the assets:

$ mix absinthe.plug.graphiql.assets.download
* creating priv/static/absinthe_graphiql/whatwg-fetch/fetch.js
* creating priv/static/absinthe_graphiql/react/react.js
* creating priv/static/absinthe_graphiql/react-dom/react-dom.js
* creating priv/static/absinthe_graphiql/bootstrap/fonts/glyphicons-halflings-regular.eot
* creating priv/static/absinthe_graphiql/bootstrap/fonts/glyphicons-halflings-regular.ttf
* creating priv/static/absinthe_graphiql/bootstrap/fonts/glyphicons-halflings-regular.woff2
* creating priv/static/absinthe_graphiql/bootstrap/fonts/glyphicons-halflings-regular.svg
* creating priv/static/absinthe_graphiql/bootstrap/css/bootstrap.css
* creating priv/static/absinthe_graphiql/graphiql/graphiql.css
* creating priv/static/absinthe_graphiql/graphiql/graphiql.js
* creating priv/static/absinthe_graphiql/graphiql-workspace/graphiql-workspace.css
* creating priv/static/absinthe_graphiql/graphiql-workspace/graphiql-workspace.js
* creating priv/static/absinthe_graphiql/typeface-source-code-pro/index.css
* creating priv/static/absinthe_graphiql/typeface-source-code-pro/files/source-code-pro-latin-400.woff2
* creating priv/static/absinthe_graphiql/typeface-source-code-pro/files/source-code-pro-latin-700.woff2
* creating priv/static/absinthe_graphiql/typeface-open-sans/index.css
* creating priv/static/absinthe_graphiql/typeface-open-sans/files/open-sans-latin-300.woff2
* creating priv/static/absinthe_graphiql/typeface-open-sans/files/open-sans-latin-400.woff2
* creating priv/static/absinthe_graphiql/typeface-open-sans/files/open-sans-latin-600.woff2
* creating priv/static/absinthe_graphiql/typeface-open-sans/files/open-sans-latin-700.woff2
* creating priv/static/absinthe_graphiql/@absinthe/graphql-playground/playground.css
* creating priv/static/absinthe_graphiql/@absinthe/graphql-playground/playground.js
* creating priv/static/absinthe_graphiql/@absinthe/socket-graphiql/socket-graphiql.js

Then, replace playground.js with the "latest" copy from jsdelivr:

$ curl https://cdn.jsdelivr.net/npm/@absinthe/graphql-playground@latest/build/static/js/middleware.js > \
       priv/static/absinthe_graphiql/@absinthe/graphql-playground/playground.js

Make sure your endpoint.ex Plug.Static entry is present & serving absinthe_graphiql:

  plug(
    Plug.Static,
    at: "/",
    from: :exchange,
    gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt absinthe_graphiql)
  )

Start your server and navigate to your GraphiQL Playground route:

$ iex -S mix phx.server

We'll get this fixed soon. In the meantime, hopefully this band-aid is at least mildly helpful for local development.