Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from Jun 2, 2023

Conversation

sjdemartini
Copy link
Collaborator

@sjdemartini sjdemartini commented Jun 1, 2023

Resolves #1417

(For the graphiql explorer styles recently added in #1397)

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

Note the scrollbar that shows up in the "after" image below. Tested this locally with the cookbook-plain app, and was able to scroll to see the full content even on a short window. Also tested this with a larger app with many query definitions, and it worked there as well.

Before After
Screenshot 2023-06-01 at 10 33 38 AM Screenshot 2023-06-01 at 10 33 50 AM

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'.
```
@@ -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/
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 1.9 links are dead, so I replaced them all with 3.2

Copy link
Collaborator

@kiendang kiendang left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! I read that example in the graphiql repo too but didn't notice the css. Was a bit bothered by the styling issue but just thought it's just that way haha.

@sjdemartini
Copy link
Collaborator Author

Yeah I also just thought that's the way it looked haha, didn't realize there was a separate CSS file until seeing that issue filed! Thanks for the review!

@kiendang
Copy link
Collaborator

kiendang commented Jun 1, 2023

I took the chance to update GraphiQL and graphql-ws version as well. Note that graphql-ws hash does not change (coz changes from 5.12.1 -> 5.13.1 are server and type related, so I guess that's why the CDN file didn't change).

@firaskafri firaskafri merged commit 520ddea into main Jun 2, 2023
24 checks passed
@firaskafri firaskafri deleted the fix-graphiql-explorer-scroll branch June 2, 2023 08:48
@Xaelias
Copy link

Xaelias commented Jun 16, 2023

👋
Thanks for the fix. Any idea when this will make it to a public release?

@firaskafri
Copy link
Collaborator

👋 Thanks for the fix. Any idea when this will make it to a public release?

its available in 3.1.2 now.

superlevure pushed a commit to loft-orbital/graphene-django that referenced this pull request Jul 19, 2023
…cal example app for testing (graphql-python#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 graphql-python#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 graphql-python#1417

* Update GraphiQL version

---------

Co-authored-by: Steven DeMartini <sjdemartini@users.noreply.github.com>
Co-authored-by: Kien Dang <mail@kien.ai>
mnasiri added a commit to mnasiri/graphene-django that referenced this pull request Sep 13, 2023
…sri param to render_graphiql function of the GraphQlView (graphql-python#1418)
@mnasiri
Copy link
Contributor

mnasiri commented Sep 13, 2023

the problem exists in the other place

kiendang pushed a commit that referenced this pull request Sep 13, 2023
…sri param to render_graphiql function of the GraphQlView (#1418) (#1460)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

v3.1.1 GraphiQL Explorer scroll don't work
5 participants