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:

pnpm create @tobiastengler/relay-app

Next steps:

• Generate a schema.graphql from api’s schema.py
• Configure relay to point to our api app’s schema.graphql
• Replace the value of the HTTP_ENDPOINT variable in the ./src/RelayEnvironment.ts file.
• Ignore *.graphql.ts files in your linter / formatter configuration.

In order to generate schema.graphql from our api’s schema, we need to run

strawberry export-schema api.schema:schema > api/schema.graphql

This commands however requires a few dependencies which we need to first install using pipenv

pipenv install rich typer libcst

Commit: https://github.com/tuan/newsfeed-demo-app/commit/6d27a76711a6857fac7206d52e79ee1844eb7dfd

After making these changes, you should be able to start Relay compiler in watch mode using pnpm relay

Prepare client side app

From now on, we will closely follow the relay tutorials. As we go along, we implement missing pieces in our Django app.

Outline:

• Copy styling from relay-examples
• Copy example components to client/components folder except for App.tsx.
• Update our App.tsx to include Newsfeed component
• Remove all components that reference graphql. We will add them back later when we get to section in relay-examples that require them.

Commit: https://github.com/tuan/newsfeed-demo-app/commit/4644a0f8a05224a9117c3f8e8dcdce0b2488dcb6

After making the changes, if you open our homepage at http://localhost:8000, you should see

Query Basics

In this step we will be making this query:

const NewsfeedQuery = graphql`
  query NewsfeedQuery {
    topStory {
      title
      summary
      poster {
        name
        profilePicture {
          url
        }
      }
      thumbnail {
        url
      }
    }
  }
`;

In order to support this query you have to implement root field topStory that resolves into a Story object. You can see that the Story object contains some nested structures such as Actor (poster field) and Image (profilePicture and thumbnail fields). So there are quite a bit of GraphQL types that we need to define and resolve.

Here’s the commit diff: https://github.com/tuan/newsfeed-demo-app/commit/e49db4f24c3f24ee6e803dfb50866360fa51c60a

Here’s how we’re structuring our code:

• api/resolvers: contains field resolvers
• api/types: contains GraphQL type definitions

After making the changes, we should be able to test the query directly using GraphiQL:

Before you continue the relay tutorial, please make sure to regenerate schema.graphql from your schema.py

# remove old schema
rm -f api/schema.graphql

# re-generate new schema to reflect newly added types
strawberry export-schema api.schema:schema > api/schema.graphql

After making client side changes, the top story should be rendered using data from Django correctly.