React: Each child in a list should have a unique “key” prop

February 7, 2023February 4, 2023 by John Graff

This error occurs when you have a list of elements that don’t have a key prop defined. This prop tells React which element is which and helps it to understand when to re-render elements. Fix this by adding a key prop to each element and setting it to a value that uniquely identifies the element. … Read more

React: how to add routes to your app with react-router-dom

February 21, 2023February 2, 2023 by John Graff

The code for this article can be found here: https://github.com/jmgraff/strawberry-graphql-chat-app/tree/add-react-routes In this article, we’re going to be taking a look at how to use the popular React routing package react-router-dom to add routes to your app. We’re going to build off of our GraphQL real-time chat app example. If you haven’t read it yet, and … Read more

URQL: No exchange has handled operations of kind “subscription”

February 12, 2023January 30, 2023 by John Graff

This error happens when you try to use subscriptions in your URQL app but don’t have a subscription exchange. Fix this by installing subscriptions-transport-ws and adding the subscriptionExchange to your URQL config. This error was discovered when writing the real-time chat app example. If you haven’t already, you should check it out. Let’s look at … Read more

GraphQL Example: Real-time Chat App Using Subscriptions

February 4, 2023January 28, 2023 by John Graff

The code for this example can be found on GitHub here: https://github.com/jmgraff/strawberry-graphql-chat-app. This project builds off our previous full-stack GraphQL example. If you’re new to GraphQL and haven’t read it yet, you should check it out. What we’re making We’re going to make a real-time chat application using GraphQL subscriptions. GraphQL subscriptions are implemented with … Read more

Strawberry GraphQL: Field must have a selection of subfields

January 25, 2023 by John Graff

This Strawberry GraphQL error occurs when you have selected a field in your GraphQL query that has subfields, but didn’t specify them. To fix this, simply add the fields you want in brackets after the field that’s causing the error. So, instead of query{ foo }, you’d put query{ foo { bar }}. Forgetting subfields … Read more

Full Stack GraphQL Example: FastAPI, Strawberry, and URQL

January 29, 2023January 23, 2023 by John Graff

The source code for this article is available on GitHub: https://github.com/jmgraff/fastapi-strawberry-urql This example will walk you through creating a docker compose based full-stack GraphQL API using FastAPI+Strawberry on the backend, and React+URQL on the frontend. The associated GitHub repo is a template and is designed to be used as a starting point for new GraphQL … Read more