Fix graphiql explorer styles by including official CSS, and update local example app for testing (#1418)

* Add venv and .venv to gitignore since common venv paths

* Update cookbook-plain app requirements and local-dev notes

This also adds the DEFAULT_AUTO_FIELD to the app's Django settings to
resolve this warning when running `migrate`:

```
ingredients.Category: (models.W042) Auto-created primary key used when not defining a primary key type, by default 'django.db.models.AutoField'.
	HINT: Configure the DEFAULT_AUTO_FIELD setting or the IngredientsConfig.default_auto_field attribute to point to a subclass of AutoField, e.g. 'django.db.models.BigAutoField'.
```

* Fix #1417 graphiql explorer styles by including official CSS

Like in the official graphiql-plugin-explorer example here
https://github.com/graphql/graphiql/blob/619864691941c46cc0b0848e8713028e20212c36/packages/graphiql-plugin-explorer/examples/index.html#L26-L29

Resolves #1417

* Update GraphiQL version

---------

Co-authored-by: Steven DeMartini <sjdemartini@users.noreply.github.com>
Co-authored-by: Kien Dang <mail@kien.ai>

Author: sjdemartini

.gitignore

@@ -11,6 +11,8 @@ __pycache__/
 # Distribution / packaging
 .Python
 env/
+venv/
+.venv/
 build/
 develop-eggs/
 dist/

examples/cookbook-plain/README.md

@@ -62,3 +62,12 @@ Now head on over to
 and run some queries!
 (See the [Graphene-Django Tutorial](http://docs.graphene-python.org/projects/django/en/latest/tutorial-plain/#testing-our-graphql-schema)
 for some example queries)
+
+Testing local graphene-django changes
+-------------------------------------
+
+In `requirements.txt`, replace the entire `graphene-django=...` line with the following (so that we install the local version instead of the one from PyPI):
+
+```
+../../  # graphene-django
+```

examples/cookbook-plain/cookbook/settings.py

@@ -5,10 +5,10 @@
 Generated by 'django-admin startproject' using Django 1.9.
 
 For more information on this file, see
-https://docs.djangoproject.com/en/1.9/topics/settings/
+https://docs.djangoproject.com/en/3.2/topics/settings/
 
 For the full list of settings and their values, see
-https://docs.djangoproject.com/en/1.9/ref/settings/
+https://docs.djangoproject.com/en/3.2/ref/settings/
 """
 
 import os
@@ -18,7 +18,7 @@
 
 
 # Quick-start development settings - unsuitable for production
-# See https://docs.djangoproject.com/en/1.9/howto/deployment/checklist/
+# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/
 
 # SECURITY WARNING: keep the secret key used in production secret!
 SECRET_KEY = "_$=$%eqxk$8ss4n7mtgarw^5$8^d5+c83!vwatr@i_81myb=e4"
@@ -81,7 +81,7 @@
 
 
 # Database
-# https://docs.djangoproject.com/en/1.9/ref/settings/#databases
+# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
 
 DATABASES = {
     "default": {
@@ -90,9 +90,11 @@
     }
 }
 
+# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
+DEFAULT_AUTO_FIELD = "django.db.models.AutoField"
 
 # Password validation
-# https://docs.djangoproject.com/en/1.9/ref/settings/#auth-password-validators
+# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
 
 AUTH_PASSWORD_VALIDATORS = [
     {
@@ -105,7 +107,7 @@
 
 
 # Internationalization
-# https://docs.djangoproject.com/en/1.9/topics/i18n/
+# https://docs.djangoproject.com/en/3.2/topics/i18n/
 
 LANGUAGE_CODE = "en-us"
 
@@ -119,6 +121,6 @@
 
 
 # Static files (CSS, JavaScript, Images)
-# https://docs.djangoproject.com/en/1.9/howto/static-files/
+# https://docs.djangoproject.com/en/3.2/howto/static-files/
 
 STATIC_URL = "/static/"

examples/cookbook-plain/requirements.txt

@@ -1,4 +1,3 @@
-graphene>=2.1,<3
-graphene-django>=2.1,<3
-graphql-core>=2.1,<3
-django==3.1.14
+django~=3.2
+graphene
+graphene-django>=3.1

graphene_django/templates/graphene/graphiql.html

@@ -21,6 +21,10 @@
         integrity="{{graphiql_css_sri}}"
         rel="stylesheet"
         crossorigin="anonymous" />
+  <link href="https://cdn.jsdelivr.net/npm/@graphiql/plugin-explorer@{{graphiql_plugin_explorer_version}}/dist/style.css"
+        integrity="{{graphiql_plugin_explorer_css_sri}}"
+        rel="stylesheet"
+        crossorigin="anonymous" />
   <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@{{whatwg_fetch_version}}/dist/fetch.umd.js"
           integrity="{{whatwg_fetch_sri}}"
           crossorigin="anonymous"></script>

graphene_django/views.py

@@ -66,18 +66,21 @@ class GraphQLView(View):
     react_dom_sri = "sha256-nbMykgB6tsOFJ7OdVmPpdqMFVk4ZsqWocT6issAPUF0="
 
     # The GraphiQL React app.
-    graphiql_version = "2.4.1"  # "1.0.3"
-    graphiql_sri = "sha256-s+f7CFAPSUIygFnRC2nfoiEKd3liCUy+snSdYFAoLUc="  # "sha256-VR4buIDY9ZXSyCNFHFNik6uSe0MhigCzgN4u7moCOTk="
-    graphiql_css_sri = "sha256-88yn8FJMyGboGs4Bj+Pbb3kWOWXo7jmb+XCRHE+282k="  # "sha256-LwqxjyZgqXDYbpxQJ5zLQeNcf7WVNSJ+r8yp2rnWE/E="
+    graphiql_version = "2.4.7"
+    graphiql_sri = "sha256-n/LKaELupC1H/PU6joz+ybeRJHT2xCdekEt6OYMOOZU="
+    graphiql_css_sri = "sha256-OsbM+LQHcnFHi0iH7AUKueZvDcEBoy/z4hJ7jx1cpsM="
 
     # The websocket transport library for subscriptions.
-    subscriptions_transport_ws_version = "5.12.1"
+    subscriptions_transport_ws_version = "5.13.1"
     subscriptions_transport_ws_sri = (
         "sha256-EZhvg6ANJrBsgLvLAa0uuHNLepLJVCFYS+xlb5U/bqw="
     )
 
     graphiql_plugin_explorer_version = "0.1.15"
     graphiql_plugin_explorer_sri = "sha256-3hUuhBXdXlfCj6RTeEkJFtEh/kUG+TCDASFpFPLrzvE="
+    graphiql_plugin_explorer_css_sri = (
+        "sha256-fA0LPUlukMNR6L4SPSeFqDTYav8QdWjQ2nr559Zln1U="
+    )
 
     schema = None
     graphiql = False