Another creative use of my Page Redirect extension for Safari ! I have been playing with Django a lot lately. Because Django has been around for a long time, there are so many articles and tutorials out there, which is great. However, when they reference Django documentation, they reference not the latest version in the documentation. Modifying the URL manually to change to a latest version or a version that you’re using, could be tiring.

This is the final part in this series After part 9, I’ve a realized we’ve established a solid foundation for our GraphiQL backend. Further changes in the backend to support the rest of the official Relay tutorial will just follow the same pattern we have set up so far in this series. Therefore instead of creating a new post for each subsequent chapter in the tutorial, I will document all server side changes needed in this post to round up the series

This is part 9 of this series We continue with the next chapter in the official Relay’s Newsfeed example: GraphQL Types, Interfaces, and Polymorphism | Relay This is very straightforward chapter. We do not need to make any changes on server side. What we have implemented just works. This simplicity is made possible by Relay’s schema. Recall that when you make changes in your GraphQL types on the server side, you need to run a command to generate schema.

This is part 8 in this series This part is based on Queries for Interactions | Relay Outline: Implement resolve_nodes method for all classes that extend Node interface in our schema Add node field to our Query type Copy PosterDetailsHovercardContents component from relay-examples/newsfeed/future at main · relayjs/relay-examples to client side Load data for the hover card on hover Implements resolve_nodes In the Query Variables section, we need to use a new field node to fetch the current poster information.

This is part 7 of this series This part is based on Arrays and Lists | Relay Outline: Implement topStories field in Query Re-generate schema.graphql Query topStories in Newsfeed component For this part we need to implement topStories field that returns the first 3 stories in our demo dataset. This is straighforward given our current setup: https://github.com/tuan/newsfeed-demo-app/commit/93088f7225567bf7014ec7759072ff5417073add After making the change, you can do a quick test using GraphiQL:

This is part 6 of series This part is based on the Fragments section of this tutorial useFragment After all the work we have done so far, following Fragments section in Relay tutorial is a breeze. Commit: https://github.com/tuan/newsfeed-demo-app/commit/b3ce37e71a9007a9cd717ebd06d6cc5efa78ee64 There are a few things related to fragment that might be beneficial if you’re new to Relay: Think of the Relay query as a tree: each fragment is a node. This Relay tree is a mirror of React component tree.

This is part 5 of series At the end of part 4 we have a working API that resolves topStory field. This is the setup: # schema.py @strawberry.type class Query: top_story: Story | None = strawberry.field(resolver=top_story.resolve) # top_story.py def resolve() -> Story | None: first = next(node for node in db.nodes if node.get("__typename") == "Story") if not first: return None return Story( id=str(first.get("id")), created_at=first.get("createdAt", ""), title=first.get("title", ""), summary=first.get("summary", ""), updated_at=first.get("updated_at", ""), like_count=first.

This is part 4 of this series Let’s recap what we have done so far: We set up Django project We set up Vite project We configure Django to retrieve client side’s assets from Vite We set up GraphQL Endpoint using Strawberry We prepare the demo data Phew, that’s a lot! I think we’re ready to dive into Relay now! Relay installation The npm dependencies and boilerplate code to set up Relay on client side can all be done using one command:

This is part 3 in this series Now that we have our GraphQL endpoint working. It’s time to get some data for newsfeed demo app. Create fake database If you’re looking at the source of Newsfeed Demo app here, you can see that they hardcode the data in a nodes variable. Let’s do just that, but in Python. Outline: Copy and paste fake data from relay-examples Update urls for the images hardcoded in fake data Create a db module to use as the “database” for our demo app.

This is part 2 of this series After part 1 we have our Django server running with client side assets served by Vite. This is good time to remind ourselves of the goal we started out with: recreating this Tutorial Intro | Relay with Django and Strawberry as backend. In order for us to start following the Relay tutorial, we need to set up our GraphQL backend. Entering A Python library for GraphQL | 🍓 Strawberry GraphQL