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.