DEV Community: Miguel A. Gavilán Merino

Use SWR for a better data fetching

Miguel A. Gavilán Merino — Sun, 21 Feb 2021 09:33:40 +0000

Hi everyone!

In this post I'm going to talk about how we can use SWR powered by Vercel to do better and easier data fetching, as well as some of the possibilities it has.

As it says in the documentation:

The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

Therefore with SWR the components will have a data stream that is constantly and automatically updated, and the UI will always be fast and reactive.

How to use SWR?

First of all we must install it with:

yarn add swr

Or with npm:

npm install swr

We will be able to use it in the following way:

import { useSWR } from '../hooks/useSWR'

const { data: users, error: Error } = useSWR<User[]>('users', UserService.getUsers)

The data variable is the users fetched.
The error variable tells us if there has been an error during the data fetch.
'users' is a key that is passed to SWR. I will explain later what it is used for.
UserService.getUsers is the fetcher.

An example of a fetcher could be:

const fetcher = (...args) => fetch(...args).then(res => res.json())

Auto Revalidation

The power of SWR is that the data can be auto validating in different ways.

Revalidate on focus

When you re-focus a page or switch between tabs, SWR automatically revalidates data.

Revalidate on interval

We can add a time interval to SWR so that the revalidation of data occurs every so often.

import { useSWR } from '../hooks/useSWR'

const { data: users, error: Error } = useSWR<User[]>('users', UserService.getUsers, { refreshInterval: 1000 })

Revalidate with key

Earlier I mentioned that we have to pass a key to SWR.
If this key changes, the data will be automatically revalidated.
This can be combined with the use of states to have dynamic data fetching.

import { useSWR } from '../hooks/useSWR'

const [userId, setUserId] = useState(1)
const { data: user, error: Error } = useSWR<User[]>(`user-${userId}`, () => UserService.getUser(userId))

Finally, these are just some of the things SWR provides that can make our data fetching faster and better.

Thanks for reading me!

Static site generation (SSG) with Nextjs

Miguel A. Gavilán Merino — Thu, 17 Sep 2020 18:09:14 +0000

Hi! In this post I want to talk about static files in next.js, when and how to use them to improve our application performance.

I have been working with Nextjs for a while.
It is a very powerful framework, since it solves many problems that we find when code an application with reactjs, such as the use of webpack, routing, etc.
But of course all this can be modified as we want.

Also with nextjs we have two types of rendering: Server Side Rendering (SSR) and Static Generation (SSG).
Next we are going to talk about this last type, which is the competition of the well-known Gatsby to generate static pages.

How can I create static pages?

To make our pages static, we just have to add the getStaticProps function to our page.

const Contact = ({title}) => (
  <>
    <h1>{title}</h1>
  </>
)

export async function getStaticProps(context) {
  return {
    props: {
      title: "Contact"
    },
  }
}

export default Contact

As with getInitialProps or getServerSideProps, what we return are the parameters that later arrive at our application as props.

Only with this, the contact page will be rendered statically AT BUILD TIME.
We can check it by running yarn build, And this is the output we get:

We can see in the legend that the contact page has been exported to a static file and also its size, and we can see it in the file explorer.

But this is not all, for example it may be that at some point changes have been added to a page that has already been generated statically and we want it to be regenerated with this new content in production.
For this, from version 9.5 of nextjs we have "Incremental Static Regeneration" that will allow us to configure every few seconds we want this page to be rendered again.
This can be done very easily just by adding revalidate to what getStaticProps returns.

export async function getStaticProps(context) {
  return {
    props: {
      title: "Contact",
      // Next.js will attempt to re-generate the page:
      // - When a request comes in
      // - At most once every second
      revalidate: 1, // In seconds
    },
  }
}

All this is great for those pages that are not very common that can change as an information page, a contact page, etc. but ...

What happens to pages that are dynamic?

For this we have another function with which we can indicate which routes we want it to export statically.
We need a dynamic route, for example if we want to export our blog posts, we should have something like this in our files.

In this new file, we also need the getStaticProps, but we will also add a new getStaticPaths function.

const PostPage = () => {
  const router = useRouter()
  const {
    query: { id }
  } = router

  return (
    <>
      <h1>POST #{id}</h1>
    </>
  );
};

export async function getStaticPaths() {
  return {
    paths: [{
      params: {id: '1'}
    }],
    fallback: false
  }
}

export async function getStaticProps(context) {
  return {
    props: {},
  }
}

export default PostPage

What are we returning?

paths: Routes that we can export. For example we can generate them with a map function.
fallback: With this prop we can tell nextjs that if there is no certain route within paths, force its rendering.

With the previous example, if we execute yarn install, we get the following console output:

In the previous image, we can see how the routes that we have established have been exported, and we can also find them in the file system.

And with this I finish a small introduction to the generation of static pages with one of my favorite frameworks at the moment ❤️.

Thanks for reading me!

Use MirageJS to fake API calls with NextJS

Miguel A. Gavilán Merino — Fri, 10 Jul 2020 11:29:59 +0000

Welcome!

In this post, I am going to write an introduction to MirageJS, a tool that I discovered recently and I think that is very useful when you develop a Frontend application that will use an API to get its data without having the backend fully developed.

Assuming we already have a working frontend project in which we want to use Mirage, we have to follow the next steps:

1. Install Mirage in our project:

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

2. Create a `mirage` folder

Now we need to create a folder called mirage. I located it at lib folder with the next structure:

3. Inside `index.js`

Inside index.js we have to create a mirage server which will serve to generate our fake api:

import { Server } from 'miragejs'

// Some imports from routes folder. Ex:
// import { mock1Routes } from './routes/mock1Routes'

const createMirageServer = () => {
  const server = new Server({
    routes () {
      this.urlPrefix = process.env.API_BASE_URL

      // Examples:
      // mock1Routes(this)
      // mock2Routes(this)
    }
  })

  return server
}

export default createMirageServer

In urlPrefix we have to set the API base URL of our development API.

4. Create the mock routes

Now, inside the folder called routes we have to create those calls to the api that we want to mock.
For example we create a routes/mock1Routes.ts file with the next content:

import { Server, Response } from 'miragejs'

const mock1Routes = (server: Server) => {
  server.get('/api/whatever/', (_, request) => {
    if (successCondition) {
      return new Response(200, {}, {})
    } else {
      return new Response(404, {}, {})
    }
  })
}

export default mock1Routes

We can customize responses according to what we need.

NOTE:
In this example we are mocking a GET method with server.get, but we can mock any method: server.post, server.patch...

5. Configure our Next.js app to use Mirage

To finish, we have to configure our Nextjs app to use this.
I added a .env variable to switch between use or not use mirage.

USE_MIRAGE_SERVER=true

Then we need to configure the next.config.js file in order to use our env variables:

if (process.env.NODE_ENV === 'development') {
  require('dotenv').config()
}

module.exports = {
  env: {
    API_BASE_URL: process.env.API_BASE_URL,
    USE_MIRAGE_SERVER: process.env.USE_MIRAGE_SERVER
  }
}

And now in our _app.tsx file we have to use this env variable and create the mirage server:

if (process.env.USE_MIRAGE_SERVER === 'true') {
  console.log('ATTENTION - Using mirage server')
  createMirageServer()
}

And with this would be everything. We already have a functional API mock for our frontend development. 🎉🎉🎉

THANKS FOR READ ME

How to squash migrations in Django

Miguel A. Gavilán Merino — Sun, 23 Feb 2020 16:15:44 +0000

Today, when I was programming in a project with DRF, I had to create a new app with its respective model.
While I was creating my model, I had to make several changes (add fields, rename fields ...) so several migration files were also generated.
This can generate problems in the future because if for each change in our model a migration file is create, we can have a lot of migration files.

Django comes with a lot of different management commands that can be executed through the manage.py file that brings a lot of utilities.

The squashmigrations is one of these commands that can help us achieve just what we're looking for. It allows us to squash multiple migration files into a single one.

For example, if we have the following migration files:

./foo
    ./migrations
        0001_initial.py
        0002_project.py
        0003_article_project.py
        0004_auto_20200223_0123.py

We can squash all of them executing the next command:
python manage.py squashmigrations <our_app> 0004

That command generates a new file named 0001_squashed_0004_auto_<timestamp>.py

And if you open this file, you can see:

This file is marked as initial=True , meaning this is the new initial migration for your application.
A new attribute named replaces=[] and added to the Migration class with a list of strings that represent the file names of all the migrations that were squashed.

Thanks for reading me!

How to automate a deploy in a VPS with GitHub actions via SSH

Miguel A. Gavilán Merino — Sun, 02 Feb 2020 21:19:20 +0000

Hi everyone.
Some time ago I hired a VPS server to host my portfolio and do tests, but I had a problem. Every time I wanted to push a change to the server, I had to do it manually. The steps I followed were the following:

Connect to VPS via SSH
Move to project directory
Make a git pull to have the new changes on my web
Typical things of the framework used (Clear cache, etc...)

But with the appearance of Github actions, these steps changed.
Now we can write a script to tell GhActions 'do this deploy for me'.

This is very easy. Just we should create a yml file on project/.github/workflows/. For example /my_project/.github/workflows/ci.yml
And in this file, we can write something like this:



name: CI

on: [push]

jobs:
  deploy:
    if: github.ref == 'refs/heads/master'
    runs-on: [ubuntu-latest]
    steps:
      - uses: actions/checkout@v1
      - name: Push to server
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SERVER_IP }}
          username: ${{ secrets.SERVER_USERNAME }}
          password: ${{ secrets.SERVER_PASSWORD }}
          script: cd ${{ secrets.PROJECT_PATH }} && git pull

The on line says that this job is launched on push event.
The jobs block defines what jobs will be executed.
- The if line says that this job will only run in a push to the master branch.
- The runs-on line says that this job will run on latest ubuntu distro.
- And the steps block says what are the steps that we are going to execute.
  - uses: actions/checkout@v1. This is a GitHub Action for executing remote ssh commands.
  - Finally, in the with block we configure the parameters for the SSH connection.
    - In the Script label, we can write the commands that we want to run on our server, for example cd our-project-path/ && git pull

Note that I use the GitHub secrets to keep important information hidden.

Once we have this file in our repository, the next time we push the master branch, it will automatically be deployed to our server.

*It is always important to maintain good test coverage in our application to avoid unwanted errors*

Vscode linters for react.js and python

Miguel A. Gavilán Merino — Sat, 18 Jan 2020 12:38:36 +0000

Most of the team at The Neon Project (included me) uses Visual Studio Code as a favourite editor to code. In this post, I tell you a bit about this editor and share our configuration.

About Visual Studio Code

Launched in 2015, Visual Studio Code quickly became the favorite editor of many programmers. Although it is made by Microsoft, the code is open and available in Github. Microsoft has done a great job creating a powerful and flexible cross-platform editor. VSCode has a good ecosystem of add-ons (extensions). Extension management is built-in, and there are already several thousand available! Some extensions, such as the ones for Atom, are installed by default.

Our configuration and plugins

If you are new to VSCode, you will have to spend some time choosing the accessories that best suit your workflow, and I want to share our experiences doing these configurations in this post.

At The Neon Project, we approach most projects with two technologies that we believe have a lot of projection and are very scalable for the future. They are Django (Python) for the Backend part and ReactJS as a JavaScript framework for the Frontend. In order to develop fluently and with the least effort in VSCode, we use the following plugins:

ESLint

In the official documentation, ESLint is defined as a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goals of making code more consistent and avoiding bugs.

ESLint uses Espree for JavaScript parsing.
ESLint uses an AST to evaluate patterns in code.
ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.

To install it, it's as easy as going to the VSCode Extensions, searching for 'ESLint' and installing it.

In general, we leave the default settings activated, in particular, I like to fix bugs when the file is saved. To do this, we access the configuration of the 'ESLint' plugin and activate the following option:

Prettier

Prettier is a code formatter that enforces a consistent style by parsing your code and reprinting it with its own rules. These rules include considering the maximum line length into account, wrapping code when necessary, etc.
We can use this plugin together with the previous one to have a better code quality.

Pep8

Pep8 is a Style Guide for Python Code. Like ESLint, we can use Pep8 as Python Linter to improve our code.
To install it, just type the following command: pip install pep8.
With this we can already use the Python lint in VSCode.

Autopep8

Autopep8 is similar to Prettier but for Python. It is a code formatter that serves to have a cleaner and readable code. To install it, we must write the following command in the terminal: sudo -H pip install autopep8.

Once installed we can use the formatter of our editor, in this case VSCode.

For both Prettier and Autopep8 we have enabled the code to auto-format when saving files.

NOTE: In order to see the errors reported by the linters, just look in the 'Problems' window of the editor.

Now we can start coding!

DEV Community: Miguel A. Gavilán Merino

Use SWR for a better data fetching

How to use SWR?

Auto Revalidation

Revalidate on focus

Revalidate on interval

Revalidate with key

Static site generation (SSG) with Nextjs

How can I create static pages?

What happens to pages that are dynamic?

Use MirageJS to fake API calls with NextJS

1. Install Mirage in our project:

2. Create a mirage folder

3. Inside index.js

4. Create the mock routes

5. Configure our Next.js app to use Mirage

How to squash migrations in Django

Thanks for reading me!

How to automate a deploy in a VPS with GitHub actions via SSH

Vscode linters for react.js and python

About Visual Studio Code

Our configuration and plugins

ESLint

Prettier

Pep8

Autopep8

2. Create a `mirage` folder

3. Inside `index.js`