In the previous part of this two-part series, we built the backend of our fullstack Todo mobile application using ExpressJS and tRPC. We looked at several tRPC concepts, such as query procedures, mutation procedures, and request body validation. If you haven't read the previous part yet, I suggest you do so.

In this part of the series, we will showcase the power of tRPC by creating our UI using React Native and connecting it to our backend.

The code for this series can be found on Github.

Getting started

If you have followed the first part of this series, you will already have a project folder containing a client and server folder set up. If not, you can head over to Github and clone the project, and follow along using the part2-starter folder.

Let's take a look inside the client folder of our project. As you can see, the client folder contains a basic React Native project that was generated using the React Native CLI.

Installing our dependencies

Let's get started by using the terminal to navigate to the client directory in our project directory, and install the following dependencies:

cd client && npm install @trpc/client@next @trpc/server@next @trpc/react@next @tanstack/react-query

You might be wondering why we install @trpc/server in the client-side code of our project. This is due to @trpc/server being a peer dependency of @trpc/client, and is therefore required to be installed. Another package we install is @tanstack/react-query. @trpc/react provides a thin wrapper over @tanstack/react-query, therefore it is required as a peer dependency.

React query

If you have never heard (or used) React Query, I'd recommend you take a look at their docs, but in simple terms, React Query is a library that helps you fetch and manage data in your React applications. It makes it easy to fetch data from an API, store it in a local state, and then update your UI when the data changes. Since @trpc/client is a thin wrapper over React Query, we will be utilizing the concepts of React Query quite a lot.

Setting up our tRPC utility

Now that we have installed our dependencies, we can finally start programming! Let's start by creating a tRPC utility which helps us share types between server and client. Head over to the client/src directory, and create a new directory called utils. Within that folder, create a new file called trpc.ts, and add the following code:

import { createTRPCReact } from '@trpc/react'
import type { AppRouter } from '../../../server/src/routers'

export const trpc = createTRPCReact<AppRouter>()

All this file will do, is import our AppRouter type we have defined in our server code, and create a set of strongly-typed React Query hooks. This step is important because this 'ties' the backend to the frontend, making it possible to have end-to-end typing.

Setting up our tRPC providers

Let's head over to the App.tsx file and set it up to match the following code:

// Import React
import React from 'react'
import { Text } from 'react-native'

// Import tRPC dependencies
import { httpLink } from '@trpc/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

// Import our tRPC utility
import { trpc } from './utils/trpc'

// Define our URL
const API_URL = 'http://localhost:3000/trpc'

const App: React.FC = () => {
  // initialize queryClient & trpcClient
  const [queryClient] = React.useState(() => new QueryClient())
  const [trpcClient] = React.useState(() =>
    trpc.createClient({
      links: [
        httpLink({
          url: API_URL,
        }),
      ],
    })
  )

  // Wrap our main component with providers and pass along the appropriate clients.
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <Text>Temp</Text>
      </QueryClientProvider>
    </trpc.Provider>
  )
}

export default App

In the code snippet above, we declare an API_URL variable which defines the URL of our endpoint. After that, we initialize React Query's queryClient which is needed for tRPC to run properly. We also define a new trpcClient instance using our trpc utility and pass it our API_URL.

You might be wondering why createClient takes an array of links. This is due to links (in tRPC) being a way to customize the data flow between a tRPC client and server. A link should do one thing, which can be either a self-contained change to a tRPC operation (query, mutation, or subscription) or a side-effect based on the operation (such as logging).

When making a request using the tRPC client, the tRPC client will execute all the links in the order they are added in the links array. In our case, we only pass a httpLink. All that will do is pass our tRPC operation to a tRPC procedure in our backend using HTTP. If you wanted to add logging to gain a better overview of what operations are queries, mutations, or subscriptions, all you would have to do is add tRPC's loggerLink to our links array.

More on links can be found in the tRPC docs.

Lastly, we wrap a temporarily Text component with the trpc.Provider and QueryClientProvider and pass along the corresponding clients.

Creating our first component

Now that we have finished setting up tRPC, we can finally start creating components. Let's start by making a Todo component, which will containerize and tie together all our todo components, such as the form and list.

Head over to the client/src folder and create a new folder components. In that folder, we'll create a new component todo.tsx. The Todo component will, for now, only consist of a title, subtitle, hr, and some basic styling.

import React from 'react'
import { StyleSheet, View, Text, SafeAreaView } from 'react-native'

const Todo: React.FC = () => {
  return (
    <SafeAreaView style={$.flex}>
      <View style={$.container}>
        <Text style={$.title}>My Todos</Text>
        <Text style={$.subTitle}>0 out of 5 todos completed</Text>
        <View style={$.hr} />
      </View>
    </SafeAreaView>
  )
}

const $ = StyleSheet.create({
  container: {
    paddingHorizontal: 35,
    paddingTop: 50,
    flex: 1,
  },
  flex: {
    flex: 1,
  },
  title: {
    fontSize: 40,
    fontWeight: 'bold',
  },
  subTitle: {
    marginTop: 8,
    fontWeight: '500',
    fontSize: 12,
    color: '#a3a3a3',
  },
  hr: {
    height: 3,
    backgroundColor: '#e8e8e8',
    marginVertical: 30,
  },
})

export default Todo

Now, let's jump back to our App.tsx file, and import our newly created Todo component, and also swap our temporarily Text component with the new Todo component.

// client/App.tsx
return (
  <trpc.Provider client={trpcClient} queryClient={queryClient}>
    <QueryClientProvider client={queryClient}>
      // Old (removed)
      <Text>Temp</Text>
      // New
      <Todo />
    </QueryClientProvider>
  </trpc.Provider>
)

Llet's test if everything is working correctly by opening the terminal, and running npx react-native run-ios in our client folder. If all went well, you should have an app that looks something like this:

Creating our useTodosQuery hook

To keep our API logic seperated from our components we will be creating seperate hooks responsible for making the API calls. Let's start by creating a useTodosQuery hook which will be responsible for fetching all todos. Start by creating a new folder hooks in the client/src of our project. Within that folder create a new file use-todos-query.ts.

import { trpc } from '../utils/trpc'

const useTodosQuery = () => {
  return trpc.todo.all.useQuery()
}

export default useTodosQuery

I would recommend you type the above-mentioned code out yourself to really see the magic of tRPC. I'll include a small demonstration of the power of tRPC in case you're too lazy (which I know most of you are 😋) to type it out yourself.

The autocomplete and linting is great, isn't it?

You can breakdown the line trpc.todo.all.useQuery(); as followed:

trpc: is our trpc utility
todo: is the namespace we used on the server when we defined our router
all: is the name of our procedure
useQuery: is React Query's useQuery because we defined the all procedure in the backend to be a query procedure.

Using the `useTodosQuery` hook

Let's utilize our newly created useTodosQuery hook. Head over to our Todo component and change the code to match the following code:

import React from 'react'
import { StyleSheet, View, Text, SafeAreaView } from 'react-native'

import useTodosQuery from '../hooks/use-todos-query'

const Todo: React.FC = () => {
  const { data } = useTodosQuery()

  return (
    <SafeAreaView style={$.flex}>
      <View style={$.container}>
        <Text style={$.title}>My Todos</Text>
        <Text style={$.subTitle}>0 out of 5 todos completed</Text>
        <View style={$.hr} />
      </View>
    </SafeAreaView>
  )
}

const $ = StyleSheet.create({
  container: {
    paddingHorizontal: 35,
    paddingTop: 50,
    flex: 1,
  },
  flex: {
    flex: 1,
  },
  title: {
    fontSize: 40,
    fontWeight: 'bold',
  },
  subTitle: {
    marginTop: 8,
    fontWeight: '500',
    fontSize: 12,
    color: '#a3a3a3',
  },
  hr: {
    height: 3,
    backgroundColor: '#e8e8e8',
    marginTop: 30,
  },
})

export default Todo

As you can see, we are simply importing and calling our useTodosQuery hook. We can check if the hook is working properly by logging data. Since we haven't added any todos yet, our data will be an empty array. Considering we are yet to implement the functionality to add todos, we will just use mock data. Head over to our todo router in our server code, and modify the following lines of code:

// old
let todos: Todo[] = []

// new
let todos: Todo[] = [
  {
    id: 1,
    title: 'First todo',
    completed: false,
  },
  {
    id: 2,
    title: 'Second todo',
    completed: false,
  },
  {
    id: 3,
    title: 'third todo',
    completed: false,
  },
]

Now if we go back and log our data object, we should receive an array with todos.

Creating our `List` component

The list component will be responsible for taking in an array of todos as prop, and displaying those todos using a FlatList. Create a new file list.tsx in the src/components/ directory and add the following code:

import React from 'react'
import { FlatList, ListRenderItem, Text, StyleSheet } from 'react-native'

import { Todo } from '../../../server/src/models/todo'

type Props = {
  todos?: Todo[]
}

const List: React.FC<Props> = ({ todos }) => {
  const renderTodoItem: ListRenderItem<Todo> = ({ item }) => {
    return <Text>{item.title}</Text>
  }

  return (
    <FlatList
      keyExtractor={({ id }) => String(id)}
      contentContainerStyle={styles.container}
      data={todos}
      renderItem={renderTodoItem}
    />
  )
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
  },
})

export default List

I don't think this component requires much of an explanation, as it's pretty straightforward. You might have noticed that we import our Todo type from our server. This is done because we want to utilize the same todo schema we created on our backend on the frontend.

Creating our `TodoItem` component

Instead of rendering a Text component, we will be creating a new TodoItem component which will render the todos items. Let's create a new file todo-item.tsx in the src/components/ folder of our project. Add the following code:

import React from 'react'
import { View, Text, StyleSheet, Pressable } from 'react-native'

import { Todo } from '../../../server/src/models/todo'

type Props = {
  todo: Todo
}

const TodoItem: React.FC<Props> = ({ todo }) => {
  return (
    <Pressable style={({ pressed }) => [styles.container, pressed && styles.pressed]}>
      <View style={styles.innerContainer}>
        <View style={[styles.checkbox, todo.completed && styles.checkboxCompleted]}>
          <Text style={styles.icon}>✓</Text>
        </View>
        <Text style={[styles.todo, todo.completed && styles.todoCompleted]}>{todo.title}</Text>
      </View>
      <View style={styles.hr} />
    </Pressable>
  )
}

const styles = StyleSheet.create({
  checkbox: {
    borderWidth: 2,
    height: 20,
    width: 20,
    borderRadius: 3,
    marginRight: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  checkboxCompleted: {
    backgroundColor: '#645bb4',
    borderColor: '#645bb4',
  },
  container: {
    marginVertical: 12,
  },
  hr: {
    height: 1,
    backgroundColor: '#f5f5f5',
    marginTop: 25,
  },
  icon: {
    color: 'white',
    fontSize: 10,
    fontWeight: '900',
  },
  innerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  todo: {
    fontWeight: '800',
  },
  todoCompleted: {
    color: '#645bb4',
    textDecorationLine: 'line-through',
  },
  pressed: {
    opacity: 0.5,
  },
})

export default TodoItem

This component takes in a todo as a prop, and renders that todo with some styling. It also makes use of the completed property on the todo object to conditionally check the checkbox and cross out the title.

Note: we are using React Native's Pressable component without passing an onPress handler. We will do this later.

Let's jump back to our list.tsx file to swap out the Text component with the new TodoItem component.

import React from 'react'
import { FlatList, ListRenderItem, StyleSheet } from 'react-native'

import TodoItem from './todo-item'

import { Todo } from '../../../server/src/models/todo'

type Props = {
  todos?: Todo[]
}

const List: React.FC<Props> = ({ todos }) => {
  const renderTodoItem: ListRenderItem<Todo> = ({ item }) => {
    // Swap Text component to TodoItem
    return <TodoItem todo={item} />
  }

  return (
    <FlatList contentContainerStyle={styles.container} data={todos} renderItem={renderTodoItem} />
  )
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
  },
})

export default List

Now also jump to our todo.tsx file to update our render method to make use of our List component.

return (
  <SafeAreaView style={$.flex}>
    <View style={$.container}>
      <Text style={$.title}>My Todos</Text>
      <Text style={$.subTitle}>0 out of 5 todos completed</Text>
      <View style={$.hr} />
      // Add this
      <List todos={data} />
    </View>
  </SafeAreaView>
)

Your app should look something like this:

Creating our update and delete todo mutations hooks

Now that we can view our todos, let's add the ability to mark them as complete and/or delete them.

Creating our `useDeleteTodoMutation` and `useUpdateTodoMutation` hooks

Start by creating two new files, use-delete-todo-mutation.ts and use-update-todo-mutation.ts in our components/hooks folder. These files will be almost identical. use-update-todo-mutation.ts will have the following content:

import { trpc } from '../utils/trpc'

const useUpdateTodoMutation = () => {
  const utils = trpc.useContext()

  return trpc.todo.update.useMutation({
    onSuccess: () => {
      utils.todo.all.invalidate()
    },
  })
}

export default useUpdateTodoMutation

When used, this hook will simply execute our todo.update mutation procedure. You might have noted that we make use of query invalidation. This is a React Query feature, which makes it possible to refetch data for a given query. In our case, we tell tRPC to refetch our todo.all procedure after the todo.update procedure has been run successfully (HTTP 2xx status codes), thus making the todos re-render.

Our use-delete-todo-mutation.tsx will be similar. The only change we will be applying is that instead of hitting the todo.update procedure, we will be hitting todo.delete mutation.

import { trpc } from '../utils/trpc'

const useDeleteTodoMutation = () => {
  const utils = trpc.useContext()

  return trpc.todo.delete.useMutation({
    onSuccess() {
      utils.todo.all.invalidate()
    },
  })
}

export default useDeleteTodoMutation

Easy enough, right?

Using our update and delete mutation

Let's jump back to our Todo component and use our new hooks. Update our Todo component to match the following code:

import React from 'react'
import { StyleSheet, View, Text, SafeAreaView } from 'react-native'

import { Todo as TodoType } from '../../../server/src/models/todo'

import useDeleteTodoMutation from '../hooks/use-delete-todo-mutation'
import useUpdateTodoMutation from '../hooks/use-update-todo-mutation'
import useTodosQuery from '../hooks/use-todos-query'

import List from './list'

const Todo: React.FC = () => {
  const { data } = useTodosQuery()

  const updateMutation = useUpdateTodoMutation()
  const deleteMutation = useDeleteTodoMutation()

  const handleMarkTodo = ({ id, completed }: TodoType) => {
    updateMutation.mutate({
      id,
      completed: !completed,
    })
  }

  const handleDeleteTodo = ({ id }: TodoType) => {
    deleteMutation.mutate({ id })
  }

  return (
    <SafeAreaView style={$.flex}>
      <View style={$.container}>
        <Text style={$.title}>My Todos</Text>
        <Text style={$.subTitle}>0 out of 5 todos completed</Text>
        <View style={$.hr} />
        <List todos={data} onMarkTodo={handleMarkTodo} onDeleteTodo={handleDeleteTodo} />
      </View>
    </SafeAreaView>
  )
}

const $ = StyleSheet.create({
  container: {
    paddingHorizontal: 35,
    paddingTop: 50,
    flex: 1,
  },
  flex: {
    flex: 1,
  },
  title: {
    fontSize: 40,
    fontWeight: 'bold',
  },
  subTitle: {
    marginTop: 8,
    fontWeight: '500',
    fontSize: 12,
    color: '#a3a3a3',
  },
  hr: {
    height: 3,
    backgroundColor: '#e8e8e8',
    marginTop: 30,
  },
})

export default Todo

After we import and initialize our hooks, we create handlers that will invoke our mutations function when fired. Lastly, we pass those handlers to our List component. The parameters we pass to our mutate function have to match the input validation schema we have defined for our procedures in the backend. If they don't match, you will receive a linting error, which again showcase the power of tRPC. Awesome, right?

Now, let's alter our List component to take in those handlers and pass them down more layer to our TodoItem.

import React from 'react'
import { FlatList, ListRenderItem, StyleSheet } from 'react-native'

import TodoItem from './todo-item'

import { Todo } from '../../../server/src/models/todo'

type Props = {
  todos?: Todo[]
  /*
    Add these 2 lines
  */
  onMarkTodo: (todo: Todo) => void
  onDeleteTodo: (todo: Todo) => void
}

const List: React.FC<Props> = ({ todos, onMarkTodo, onDeleteTodo }) => {
  const renderTodoItem: ListRenderItem<Todo> = ({ item }) => {
    return (
      <TodoItem
        todo={item}
        // Pass down to TodoItem
        onMarkTodo={onMarkTodo}
        onDeleteTodo={onDeleteTodo}
      />
    )
  }

  return (
    <FlatList
      keyExtractor={({ id }) => String(id)}
      contentContainerStyle={styles.container}
      data={todos}
      renderItem={renderTodoItem}
    />
  )
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 30,
  },
})

export default List

Let's also update our TodoItem to also make use of onMarkTodo and onDeleteTodo

import React from 'react'
import { View, Text, StyleSheet, Pressable } from 'react-native'

import { Todo } from '../../../server/src/models/todo'

type Props = {
  todo: Todo
  // Add these again
  onMarkTodo: (todo: Todo) => void
  onDeleteTodo: (todo: Todo) => void
}

const TodoItem: React.FC<Props> = ({ todo, onMarkTodo, onDeleteTodo }) => {
  // Create handlers
  const handlePress = () => {
    onMarkTodo(todo)
  }

  const handlelongPress = () => {
    onDeleteTodo(todo)
  }

  return (
    <Pressable
      // pass handlers to `Pressable`
      onPress={handlePress}
      onLongPress={handlelongPress}
      style={({ pressed }) => [styles.container, pressed && styles.pressed]}
    >
      <View style={styles.innerContainer}>
        <View style={[styles.checkbox, todo.completed && styles.checkboxCompleted]}>
          <Text style={styles.icon}>✓</Text>
        </View>
        <Text style={[styles.todo, todo.completed && styles.todoCompleted]}>{todo.title}</Text>
      </View>
      <View style={styles.hr} />
    </Pressable>
  )
}

const styles = StyleSheet.create({
  checkbox: {
    borderWidth: 2,
    height: 20,
    width: 20,
    borderRadius: 3,
    marginRight: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  checkboxCompleted: {
    backgroundColor: '#645bb4',
    borderColor: '#645bb4',
  },
  container: {
    marginVertical: 12,
  },
  hr: {
    height: 1,
    backgroundColor: '#f5f5f5',
    marginTop: 25,
  },
  icon: {
    color: 'white',
    fontSize: 10,
    fontWeight: '900',
  },
  innerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  todo: {
    fontWeight: '800',
  },
  todoCompleted: {
    color: '#645bb4',
    textDecorationLine: 'line-through',
  },
  pressed: {
    opacity: 0.5,
  },
})

export default TodoItem

You should now be able to mark todos as complete by pressing on them, and delete them by pressing and holding on a todo.

[Gif]

Creating our add todo mutation hook

Let's create our last mutation, the add todo mutation. Start by creating a new file, use-add-todo-mutation.tsx, in the src/hooks directory. The use-add-todo-mutation.tsx will have following content:

import { trpc } from '../utils/trpc'

const useAddTodoMutation = () => {
  const utils = trpc.useContext()

  return trpc.todo.add.useMutation({
    onSuccess() {
      utils.todo.all.invalidate()
    },
  })
}

export default useAddTodoMutation

This mutation should be pretty self-explanatory by now, since it's pretty much identical to our remove and update mutations. All it does is invoke our todo.add procedure, and when successfully run, refetch our todos using React Query's invalidate() function.

Users will be able to create todos by pressing on a floating action button which opens a modal where users can enter a todo title. So let's create 3 new components:

FloatingActionButton

Our FloatingActionButton component will be a simple component that takes in an onPress function and renders a simple button in the bottom right corner of our todo app. Let's create a new file in the src/components folder of our app, and add the following code:

import React from 'react'
import { Text, StyleSheet, Pressable } from 'react-native'

type Props = {
  onPress: () => void
}

const FloatingActionButton: React.FC<Props> = ({ onPress }) => {
  return (
    <Pressable
      style={({ pressed }) => [styles.button, pressed && styles.pressed]}
      onPress={onPress}
    >
      <Text style={styles.addIcon}>+</Text>
    </Pressable>
  )
}

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 50,
    position: 'absolute',
    bottom: 10,
    right: 40,
    height: 50,
    backgroundColor: '#645bb4',
    borderRadius: 100,
    zIndex: 1,
  },
  addIcon: {
    fontWeight: 'bold',
    fontSize: 20,
    color: 'white',
  },
  pressed: {
    opacity: 0.8,
  },
})

export default CreateTodoModal

AddTodoModal

When the users presses on the FloatingActionButton we will open a modal which allows the user to enter a todo title. Let's creare that modal. Create a new file add-todo-modal.tsx with the following content:

import React from 'react'
import { View, Modal, StyleSheet, Text, TextInput } from 'react-native'

import Button from './button'

type Props = {
  onSubmit: (title: string) => void
  onCancel: () => void
  visible: boolean
}

const AddTodoModal: React.FC<Props> = ({ visible, onSubmit, onCancel }) => {
  const [value, setValue] = React.useState('')

  const handleSubmit = () => {
    onSubmit(value)
  }

  return (
    <Modal animationType="fade" visible={visible} transparent>
      <View style={styles.backdrop}>
        <View style={styles.box}>
          <Text style={styles.title}>Enter Todo</Text>
          <TextInput onChangeText={setValue} style={styles.input} />
          <View style={styles.buttonContainer}>
            <Button onPress={onCancel} secondary title="Cancel" />
            <Button onPress={handleSubmit} title="Submit" />
          </View>
        </View>
      </View>
    </Modal>
  )
}

const styles = StyleSheet.create({
  backdrop: {
    backgroundColor: '#00000095',
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: '80%',
    height: 200,
    backgroundColor: 'white',
    paddingHorizontal: 35,
    paddingTop: 40,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  input: {
    borderWidth: 1,
    borderColor: 'black',
    marginVertical: 20,
    paddingVertical: 12,
    paddingHorizontal: 10,
  },
  title: {
    fontWeight: '800',
  },
})

export default AddTodoModal

As you can see, we are leveraging React Native's Modal component to create our modal. In this modal, the user can either enter a new todo title and submit it or close the modal by pressing cancel.

You may have noted that the AddTodoModal makes use of a custom Button component. This Button component is agian, a simple React Native Pressable that has some styling, and takes in an onPress prop. Here is the code:

import React from 'react'
import { Pressable, StyleSheet, Text } from 'react-native'

type Props = {
  title: string
  onPress: () => void
  secondary?: boolean
}

const Button: React.FC<Props> = ({ title, onPress, secondary = false }) => {
  return (
    <Pressable style={[styles.button, secondary && styles.buttonSecondary]} onPress={onPress}>
      <Text style={[styles.buttonText, secondary && styles.buttonTextSecondary]}>{title}</Text>
    </Pressable>
  )
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#645bb4',
    paddingHorizontal: 20,
    paddingVertical: 12,
    flex: 1,
    borderRadius: 3,
    alignItems: 'center',
    marginRight: 5,
  },
  buttonSecondary: {
    backgroundColor: 'white',
    borderColor: '#645bb4',
    borderWidth: 2,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  buttonTextSecondary: {
    color: '#645bb4',
  },
})

export default Button

Now that we have created the components, let's put them to use. Go back to the todo.tsx file, and update it to make use of our newly created components.

import React from 'react'
import { StyleSheet, View, Text, SafeAreaView } from 'react-native'

import { Todo as TodoType } from '../../../server/src/models/todo'

import useDeleteTodoMutation from '../hooks/use-delete-todo-mutation'
import useUpdateTodoMutation from '../hooks/use-update-todo-mutation'
import useTodosQuery from '../hooks/use-todos-query'
import useAddTodoMutation from '../hooks/use-add-todo-mutation'

import List from './list'
import FloatingActionButton from './floating-action-button'
import AddTodoModal from './add-todo-modal'

const Todo: React.FC = () => {
  const [isAddTodoModalVisble, setIsAddTodoModalOpen] = React.useState(false)

  const { data } = useTodosQuery()

  const addTodoMutation = useAddTodoMutation()
  const updateMutation = useUpdateTodoMutation()
  const deleteMutation = useDeleteTodoMutation()

  const handleMarkTodo = ({ id, completed }: TodoType) => {
    updateMutation.mutate({
      id,
      completed: !completed,
    })
  }

  const handleDeleteTodo = ({ id }: TodoType) => {
    deleteMutation.mutate({ id })
  }

  const handleAddTodo = (title: string) => {
    addTodoMutation.mutate({ title })

    // Close our modal
    setIsAddTodoModalOpen(false)
  }

  const handleOpenAddTodoModal = () => {
    setIsAddTodoModalOpen(true)
  }

  const handleCancelAddTodo = () => {
    setIsAddTodoModalOpen(false)
  }

  return (
    <>
      <AddTodoModal
        visible={isAddTodoModalVisble}
        onSubmit={handleAddTodo}
        onCancel={handleCancelAddTodo}
      />
      <SafeAreaView style={styles.flex}>
        <View style={styles.container}>
          <FloatingActionButton onPress={handleOpenAddTodoModal} />
          <Text style={styles.title}>My Todos</Text>
          <Text style={styles.subTitle}>0 out of 5 todos completed</Text>
          <View style={styles.hr} />
          <List todos={data} onMarkTodo={handleMarkTodo} onDeleteTodo={handleDeleteTodo} />
        </View>
      </SafeAreaView>
    </>
  )
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 35,
    paddingTop: 50,
    flex: 1,
  },
  flex: {
    flex: 1,
  },
  title: {
    fontSize: 40,
    fontWeight: 'bold',
  },
  subTitle: {
    marginTop: 8,
    fontWeight: '500',
    fontSize: 12,
    color: '#a3a3a3',
  },
  hr: {
    height: 3,
    backgroundColor: '#e8e8e8',
    marginTop: 30,
  },
})

export default Todo

As you can see from the provided code snippet, we have added a new isAddTodoModalVisble state to keep track of whether the AddTodoModal should be visible or not. After that, we initialize our useAddTodoMutation hook and create a handleAddTodo handler which will pass the entered title and fire our mutation when a submit has been triggered in the AddTodoModal.

Finishing touches

By now, you should almost have a fully functional Todo Application. Only thing that's left is making our subtitle (x out of x todos completed) dynamic. Let's head back to our todo.tsx and add two new variables:

const todosCompletedCount = data?.filter(x => x.completed).length;
const todosCount = data?.length;.

And update our Text subtitle to make use of those variables.

<Text style={styles.subTitle}>
  {todosCompletedCount} out of {todosCount} todos completed
</Text>

Testing our App

Now that we have implemented all our features, it's time to run through the app and test!

There ya go! An fully functional full stack todo app 🥳

Conclusion

In this two-part series, we looked at what tRPC is by building a full-stack Todo application. tRPC is a library that allows you to set up end-to-end typing, which leads to fewer bugs and a better development experience! tRPC can be used in conjunction with many front-end frameworks such as React, React Native, Vue, and even Svelte! For more information, take a look at the tRPC docs. The code used in this series can be found in this Github repo.

Thank you for reading!

Upcoming events

The Test Automation Meetup
PLEASE RSVP SO THAT WE KNOW HOW MUCH FOOD WE WILL NEED Test automation is a cornerstone of effective software development. It's about creating robust, predictable test suites that enhance quality and reliability. By diving into automation, you're architecting systems that ensure consistency and catch issues early. This expertise not only improves the development process but also broadens your skillset, making you a more versatile team member. Whether you're a developer looking to enhance your testing skills or a QA professional aiming to dive deeper into automation, RSVP for an evening of learning, delicious food, and the fusion of coding and quality assurance! 🚀🚀 18:00 – 🚪 Doors open to the public 18:15 – 🍕 Let’s eat 19:00 – 📢 First round of Talks 19:45 – 🍹 Small break 20:00 – 📢 Second round of Talks 20:45 – 🍻 Drinks 21:00 – 🙋‍♀️ See you next time? First Round of Talks: The Power of Cross-browser Component Testing - Clarke Verdel, SR. Front-end Developer at iO How can you use Component Testing to ensure consistency cross-browser? Second Round of Talks: Omg who wrote this **** code!? - Erwin Heitzman, SR. Test Automation Engineer at Rabobank How can tests help you and your team? Beyond the Unit Test - Christian Würthner, SR. Android Developer at iO How can you do advanced automated testing for, for instance, biometrics? RSVP now to secure your spot, and let's explore the fascinating world of test automation together!
December 11 | Coven of Wisdom - Amsterdam
Go to page for The Test Automation Meetup
Coven of Wisdom - Herentals - Winter `24 edition
Worstelen jij en je team met automated testing en performance? Kom naar onze meetup waar ervaren sprekers hun inzichten en ervaringen delen over het bouwen van robuuste en efficiënte applicaties. Schrijf je in voor een avond vol kennis, heerlijk eten en een mix van creativiteit en technologie! 🚀 18:00 – 🚪 Deuren open 18:15 – 🍕 Food & drinks 19:00 – 📢 Talk 1 20:00 – 🍹 Kleine pauze 20:15 – 📢 Talk 2 21:00 – 🙋‍♀️ Drinks 22:00 – 🍻 Tot de volgende keer? Tijdens deze meetup gaan we dieper in op automated testing en performance. Onze sprekers delen heel wat praktische inzichten en ervaringen. Ze vertellen je hoe je effectieve geautomatiseerde tests kunt schrijven en onderhouden, en hoe je de prestaties van je applicatie kunt optimaliseren. Houd onze updates in de gaten voor meer informatie over de sprekers en hun specifieke onderwerpen. Over iO Wij zijn iO: een groeiend team van experts die end-to-end-diensten aanbieden voor communicatie en digitale transformatie. We denken groot en werken lokaal. Aan strategie, creatie, content, marketing en technologie. In nauwe samenwerking met onze klanten om hun merken te versterken, hun digitale systemen te verbeteren en hun toekomstbestendige groei veilig te stellen. We helpen klanten niet alleen hun zakelijke doelen te bereiken. Samen verkennen en benutten we de eindeloze mogelijkheden die markten in constante verandering bieden. De springplank voor die visie is talent. Onze campus is onze broedplaats voor innovatie, die een omgeving creëert die talent de ruimte en stimulans geeft die het nodig heeft om te ontkiemen, te ontwikkelen en te floreren. Want werken aan de infinite opportunities van morgen, dat doen we vandaag.
December 12 | Coven of Wisdom Herentals
Go to page for Coven of Wisdom - Herentals - Winter `24 edition
Mastering Event-Driven Design
PLEASE RSVP SO THAT WE KNOW HOW MUCH FOOD WE WILL NEED Are you and your team struggling with event-driven microservices? Join us for a meetup with Mehmet Akif Tütüncü, a senior software engineer, who has given multiple great talks so far and Allard Buijze founder of CTO and founder of AxonIQ, who built the fundaments of the Axon Framework. RSVP for an evening of learning, delicious food, and the fusion of creativity and tech! 🚀 18:00 – 🚪 Doors open to the public 18:15 – 🍕 Let’s eat 19:00 – 📢 Getting Your Axe On Event Sourcing with Axon Framework 20:00 – 🍹 Small break 20:15 – 📢 Event-Driven Microservices - Beyond the Fairy Tale 21:00 – 🙋‍♀️ drinks 22:00 – 🍻 See you next time? Details: Getting Your Axe On - Event Sourcing with Axon Framework In this presentation, we will explore the basics of event-driven architecture using Axon Framework. We'll start by explaining key concepts such as Event Sourcing and Command Query Responsibility Segregation (CQRS), and how they can improve the scalability and maintainability of modern applications. You will learn what Axon Framework is, how it simplifies implementing these patterns, and see hands-on examples of setting up a project with Axon Framework and Spring Boot. Whether you are new to these concepts or looking to understand them more, this session will provide practical insights and tools to help you build resilient and efficient applications. Event-Driven Microservices - Beyond the Fairy Tale Our applications need to be faster, better, bigger, smarter, and more enjoyable to meet our demanding end-users needs. In recent years, the way we build, run, and operate our software has changed significantly. We use scalable platforms to deploy and manage our applications. Instead of big monolithic deployment applications, we now deploy small, functionally consistent components as microservices. Problem. Solved. Right? Unfortunately, for most of us, microservices, and especially their event-driven variants, do not deliver on the beautiful, fairy-tale-like promises that surround them.In this session, Allard will share a different take on microservices. We will see that not much has changed in how we build software, which is why so many “microservices projects” fail nowadays. What lessons can we learn from concepts like DDD, CQRS, and Event Sourcing to help manage the complexity of our systems? He will also show how message-driven communication allows us to focus on finding the boundaries of functionally cohesive components, which we can evolve into microservices should the need arise.
September 19 | Coven of Wisdom - Utrecht
Go to page for Mastering Event-Driven Design

Getting started with tRPC v10 by building a todo app - Frontend

Part of series

Getting started with tRPC v10 by building a todo app

Getting started

Installing our dependencies

React query

Setting up our tRPC utility

Setting up our tRPC providers

Creating our first component

Creating our useTodosQuery hook

Using the `useTodosQuery` hook

Creating our `List` component

Creating our `TodoItem` component

Creating our update and delete todo mutations hooks

Creating our `useDeleteTodoMutation` and `useUpdateTodoMutation` hooks

Using our update and delete mutation

Creating our add todo mutation hook

FloatingActionButton

AddTodoModal

Finishing touches

Testing our App

Conclusion

Upcoming events

The Test Automation Meetup

Coven of Wisdom - Herentals - Winter `24 edition

Mastering Event-Driven Design

Share

Jobs

Customer Success Manager

Solution Architect

(PHP) Drupal developer

Java Developer

View all jobs

Getting started with tRPC v10 by building a todo app - Frontend

Part of series

Getting started with tRPC v10 by building a todo app

Getting started

Installing our dependencies

React query

Setting up our tRPC utility

Setting up our tRPC providers

Creating our first component

Creating our useTodosQuery hook

Using the useTodosQuery hook

Creating our List component

Creating our TodoItem component

Creating our update and delete todo mutations hooks

Creating our useDeleteTodoMutation and useUpdateTodoMutation hooks

Using our update and delete mutation

Creating our add todo mutation hook

Creating our floating action button and add todo modal

FloatingActionButton

AddTodoModal

(Modal) Button

Finishing touches

Testing our App

Conclusion

Upcoming events

The Test Automation Meetup

Coven of Wisdom - Herentals - Winter `24 edition

Mastering Event-Driven Design

Share

Jobs

View all jobs

Using the `useTodosQuery` hook

Creating our `List` component

Creating our `TodoItem` component

Creating our `useDeleteTodoMutation` and `useUpdateTodoMutation` hooks