Introduction to Django and GraphQL - DjangoCon US 2018

GraphQL has grown a lot over time, but it seems to still be a new “thing” in the Python and Django World. This talk will be an introduction to GraphQL, explaining why it has been created and how you can use it in Python and Django.

Demo code: https://github.com/patrick91/graphene-demos/

1. Patrick Arminio San Diego Django & GraphQL DjangoCon US 2018
2. • Patrick Arminio • Chairperson @ Python Italia • Live in London • Interested in backend and frontend • @patrick91 online Who am I
3. Web 1.0 @patrick91
4. @patrick91
5. Web 2.0 @patrick91
6. @patrick91
7. REST APIs @patrick91
8. But REST is not perfect @patrick91
9. Too many API calls @patrick91
10. http GET /user/1 @patrick91
11. { "name": "Patrick", "friends": [ "/users/2", "/users/3", "/users/4" ], "avatar": "/images/123" } @patrick91
12. http GET /user/2 http GET /user/3 http GET /user/4 @patrick91
13. http GET /user_with_friends/1 @patrick91
14. { "name": "Patrick", "friends": [ { "name": "Fiorella" }, { "name": "Marco" }, { "name": "Marta" }, { "name": “Angela" } ], "avatar": "/images/123" } @patrick91
15. http GET /user_with_friends/1 @patrick91
16. http GET /user_with_friends/1 http GET /user_with_friends_and_images/1 @patrick91
17. http GET /user_with_friends/1 http GET /user_with_friends_and_images/1 http GET /user_and_images/1 @patrick91
18. http GET /user_with_friends/1 http GET /user_with_friends_and_images/1 http GET /user_and_images/1 http GET /user_and_small_images/1 @patrick91
19. http GET /user_with_friends/1 http GET /user_with_friends_and_images/1 http GET /user_and_images/1 http GET /user_and_small_images/1 http GET /user_with_friends_and_small_images/1 @patrick91
20. http GET /user_with_friends/1 http GET /user_with_friends_and_images/1 http GET /user_and_images/1 http GET /user_and_small_images/1 http GET /user_with_friends_and_small_images/1 http GET /page-1 @patrick91
21. http GET /user_with_friends/1 http GET /user_with_friends_and_images/1 http GET /user_and_images/1 http GET /user_and_small_images/1 http GET /user_with_friends_and_small_images/1 http GET /page-1 http GET /page-2 @patrick91
22. Source: Coursera [...] At the time, we had over 1,000 different REST endpoints at Coursera (and now we have many more) [...] https://dev-blog.apollodata.com/courseras-journey-to-graphql-a5ad3b77f39a @patrick91
23. Too much data @patrick91
24. { "name": "Patrick", "friends": [ { "name": “Angela", "friends": ["/users/2", "/users/3", "/users/4"], "avatar": { "url": "//cdn.x.com/123.jpg", "width": 400, "height": 300 } }, { "name": "Simone", "friends": ["/users/2", "/users/3", "/users/4"], "avatar": { "url": "//cdn.x.com/123.jpg", "width": 400, "height": 300 @patrick91
25. Can we do better? @patrick91
26. We could extend REST, but... @patrick91
27. ✨ GraphQL ✨ @patrick91
28. Source: https://graphql.org/ GraphQL is a Query Language for APIs. @patrick91
29. Single HTTP endpoint @patrick91
30. http POST /graphql @patrick91
31. { user { name email friends { name } } } @patrick91
32. { "user": { "name": "Patrick", "email": "patrick.arminio@gmail.com", "friends": [{ "name": “Marco" }, { "name": "Simone" } ] } } @patrick91
33. Types @patrick91
34. • Int • Float • String • Boolean • ID • Any user defined scalar Scalar @patrick91
35. Object Types are the objects defined in your GraphQL API. They are objects that have fields that can of scalar types or other object types. Object Types @patrick91
36. type User { name: String! email: String! friends: [Friend]! } type Friend { name: String! } @patrick91
37. Introspection @patrick91
38. @patrick91
39. Operations @patrick91
40. Query Allows you to request data from the server. Mutation Allows you to modify/create data on the server. But it is not limited to data, can be used to run anything with side effects. Subscription Similar to a query, but with real time data. @patrick91
41. { user { name email friends { name } } } @patrick91
42. query QueryName($numberOfFriends: Int!) { user { name email friends(limit: $numberOfFriends) { name } } } @patrick91
43. mutation MutationName($username: String!) { createUser(username: $username) { username } } @patrick91
44. subscription SubscriptionName { user { posts(limit: 10) { text } } } @patrick91
45. Python @patrick91
46. @patrick91
47. pip install graphene @patrick91
48. class Query(graphene.ObjectType): hello = graphene.String() def resolve_hello(self, info): return 'hi djangocon!' schema = graphene.Schema(query=Query) schema.execute(''' query { hello } ''') @patrick91
49. pip install graphene-django @patrick91
50. # settings.py INSTALLED_APPS += [ 'graphene_django', ] GRAPHENE = { 'SCHEMA': 'api.schema.schema' } @patrick91
51. # urls.py from django.conf.urls import path from graphene_django.views import GraphQLView urlpatterns = [ path('graphql/', GraphQLView.as_view(graphiql=True)), ] @patrick91
52. class IngredientType(DjangoObjectType): class Meta: model = Ingredient class Query(graphene.ObjectType): all_ingredients = graphene.List(IngredientType) def resolve_all_ingredients(self, info): return Ingredient.objects.all() schema = graphene.Schema(query=Query) @patrick91
53. ✨ Let’s make a simple API ✨ @patrick91
54. class Poll(models.Model): question = models.CharField(max_length=200) def __str__(self): return self.question class Choice(models.Model): poll = models.ForeignKey(Poll, on_delete=models.PROTECT) choice_text = models.CharField(max_length=200) votes = models.IntegerField(default=0) def __str__(self): return self.choice_text @patrick91
55. Object Types @patrick91
56. from graphene_django.types import DjangoObjectType from .models import Choice, Poll class ChoiceType(DjangoObjectType): class Meta: model = Choice class PollType(DjangoObjectType): class Meta: model = Poll @patrick91
57. Polls Query @patrick91
58. query AllPolls { polls { question choiceSet { votes choiceText } } } @patrick91
59. class PollsQuery: polls = graphene.List(graphene.NonNull(PollType)) def resolve_polls(self, info): return Poll.objects.all() @patrick91
60. Single Poll Query @patrick91
61. query SinglePoll { poll(id: "ABC") { question choiceSet { votes choiceText } } } @patrick91
62. class PollsQuery: # ... poll = graphene.Field(PollType, id=graphene.ID()) def resolve_poll(self, info, id): return Poll.objects.get(pk=id) @patrick91
63. Create Poll Mutation @patrick91
64. mutation CreatePoll { createPoll( question: "Is this cool?", choices: ["yes", "no"] ) { poll { question choiceSet { choiceText } } } } @patrick91
65. class CreatePoll(graphene.Mutation): poll = graphene.Field(PollType) class Arguments: question = graphene.String(required=True) choices = graphene.List(graphene.String, required=True) def mutate(self, info, question, choices): # non-production code poll = Poll.objects.create(question=question) for choice in choices: Choice.objects.create(poll=poll, choice_text=choice) return CreatePoll(poll) class PollsMutations: create_poll = CreatePoll.Field() @patrick91
66. ✨ Done! Let’s test it! ✨ @patrick91 code: https://github.com/patrick91/graphene-demos
67. REST framework integration @patrick91
68. Forms integration @patrick91
69. Cool! But...
70. Security @patrick91
71. Authentication @patrick91
72. Django Session Standard session based authentication, no need to pass any custom header or argument Headers Passing an authorization header so that the backend can have access to the current user Params Pass a token to all the queries and mutation that require the user to be logged in @patrick91
73. Permissions @patrick91
74. • No built in features, yet • Permissions on field level • Public / Private fields Permissions @patrick91
75. “Malicious” queries @patrick91
76. query SinglePoll { poll(id: "ABC") { question choiceSet { votes choiceText poll { question choiceSet { votes choiceText poll { question choiceSet { votes choiceText } } } @patrick91
77. • Timeouts • Nesting limits • Query Cost • Static Queries Strategies @patrick91
78. Caching @patrick91
79. Conclusion @patrick91
80. Patrick Arminio San Diego Thank you! @patrick91 x