In part one of this series we’ve setup the API for this project using Symfony and API Platform. In part two we’ll make this API more functional by creating a user entity and allowing users to sign up. The complete application for part 2 can be found in my github repository.Continue Reading “How to create a simple application using Symfony and React Native – Part 2”
How to create a simple application using Symfony and React Native – Part 1
This is the first part of a new series I want to do. In this series I’ll be making a simple stock portfolio application using Symfony with API Platform. For the app we will use React Native. I’ll take you through the whole process, from setting up the basic Symfony application to the deployment of the API. You can follow along with me at Github.Continue Reading “How to create a simple application using Symfony and React Native – Part 1”
3 Useful services for Symfony applications
A lot of the time you find yourself writing a lot of the same code over and over. Not only is this annoying, but it’s also prone to copy / paste errors. That is why you should stop repeating yourself and leverage service classes in your applications. Today I’ll share some of my services for Symfony which I find very useful in my day to day life as a developer. Feel free to use them in your applications.
Logging is essential to see what happened in your application when and error occurred. Because I didn’t want to scatter my application with log statements enclosed in
null checks to see if the logger is actually available, I created this
Using the Symfony Messenger component
When developing a large scale application the software often needs to do a lot of different tasks. These tasks can consume a lot of time. Because you want your application to be fast and offer a great user experience you don’t want to process these tasks immediately. This is where the Symfony Messenger component comes into play.
What is the Symfony Messenger component?
The Messenger component is an easy to use component for sending and receiving messages to and from a message bus. The bus consists of different middleware classes. This middleware can perform different actions on the messages and manipulate the metadata of the messages. There are a few concepts we need to cover before diving in too deep.Continue Reading “Using the Symfony Messenger component”
Integrate API’s in React and Redux with ease
When building a frontend for a web application in React and Redux it can be really tedious to integrate the backend API into it. You have to integrate a http library like axios, write the code to do the requests and much more. In your components you’ll call the requests and you have to keep track of the status of the requests. This creates a lot of boilerplate code, which can be really annoying. To combat this the folks at Redux created a nice tool called RTK Query.
What is RTK Query?
RTK Query is part of the Redux Toolkit. It’s a tool specifically created for fetching and caching data. It is built on top of other Redux Toolkit components like
createSlice. This is what makes it so puwerful.
The API it exposes is really easy to use and removes a lot of the boilerplate code that was necessary in the past. For example when you want to fetch the data of the current user you had to do it like this.
As you can see in the example you’ll have to manage the loading and error states by yourself. With RTK Query you don’t have to do this. Let me explain that with the same example as above, but this time with RTK Query.
Now doesn’t this look a lot cleaner? You get the same functionality as the example above, but it much cleaner. And it gets even better.
Setup RTK Toolkit
It comes installed with the Redux Toolkit library. To install this toolkit simple install
@reduxjs/toolkit using your favorite package manager like
npm. I’m going to assume you’ve setup your Redux Store already, so I’ll skip this part. Now we can implement our API using the
createApi function provided by the RTK Query tool. Let’s create our user API:
It doesn’t take much to define an API in RTK Query. We have to define the
baseUrl and for security we’ve added an extra header using
prepareHeaders which contains the bearer token. This callback has access to the state of your Redux store, so we can fetch the JWT Token from it.
The next part is the definition of the
endpoints. We’ve added support for the
/api/users/me endpoint which returns the user details of the owner of the JWT Token and a
createUser endpoint, which, like the name implies creates a new user.
Then we export the react hooks created by the
createApi function, which we can use in our application. And lastly we export the
To make this all work we need to register our API to the Redux Store, so let’s make this happen!
First we need to add the reducer created by the
createApi function. This will make sure the data from the API calls will be stored in the Redux store. The next change we’ve made is to add the middleware the
createApi function created to the store using
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware). This will make sure the advanced features of RTK Query like caching and such works correctly.
When you have an API with a lot of endpoints, your
api.js file will become pretty large and a nightmare to maintain. To remedy this RTK Query made it possible to inject endpoints in an existing API object. This makes the files a lot smaller and easier to maintain.
Let start with the base
api.ts file into which we can inject the extra endpoints from the other files.
It looks pretty much the same as the other example, but we initialized the endpoints with an empty object. We’ll inject the endpoints later in the different files we’ll create.
The object returned from the
createApi function has an
injectEndpoints method which we’ll use in our ‘API Extension points’. In the
injectEndpoints method we can simply add the endpoints we want.
Because we’ve already added the base API to our Redux store, there is no need to add extra reducers and middleware for our injected endpoints. When we want to load the current user we can simply use the
useGetMeQuery from the
usersApi.ts file above. This works the same as before.
I haven’t even touched the surface of all the capabilities of the RTK Query tool. There are many more options for caching the data, refetching when needed and many more. I’ll write another article about this in the future. For now check out their official documentation for the information.