Forem: Jerónimo Cosío

How to fetch data from a GraphQL endpoint into a NextJS 13 server component using the native fetch() API

Jerónimo Cosío — Fri, 10 Feb 2023 03:35:57 +0000

I recently started testing out Next.js 13 , and even though it's still in a beta phase I think that overall it's a really nice update and I'm already testing it out on a new project.

As it's so new there are still some examples that may be missing or are a little outdated, so I just wanted to quickly write about how to call a GraphQL backend from a server component in NextJS 13 without using any extra library and only using fetch()to make the request.

To set up my GraphQL back-end I followed this really simple post from the Vercel team, if you follow it correctly you will end with a GraphQL endpoint from your blog which is exactly what I needed.

Now, here's how to use the native fetch() to call your recently created GraphQL end point and get -in my case- the information from the blog posts that I created on my Wordpress Blog.

The first step is to define your GraphQL endpoint url as en env variable, this is of course optional but it's a good practice in case it changes in the future or if you want to keep one for each of the different environments. To do this just edit or create your .env.local file on the root of your NextJS project and add your URL like so:

# .env.local
GRAPHQL_API_URL="https://youractualdomain.com/graphql"

Don't forget to also add this as an environment variable on your actual server.

After setting up the variable lets start looking at how to create our fetch() call and adding the query and the rest of the necessary information into it.

For this I'll first just create my query, here's the one I'm planning on using:

    query getPosts {
      posts {
        edges {
          node {
            title
            excerpt
            slug
            date
          }
        }
      }
    }

As you can see I'm getting all the posts from my Wordpress GraphQL endpoint and receiving the title, excerpt, slug and date fields, there's more I can get if I follow the GraphQL API for Wordpress documentation, but that's all I need for the demo.

Now for actually calling the GraphQL endpoint here's how you need to structure the fetch() call:

const { data } = await fetch(process.env.GRAPHQL_API_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: `
    query getPosts {
      posts {
        edges {
          node {
            title
            excerpt
            slug
            date
          }
        }
      }
    }
  `,
    }),
    next: { revalidate: 10 },
  }).then((res) => res.json());

I'm adding the GraphQL API endpoint as the first argument and then creating an object as the second. For the object on the argument I'm adding the different options for the call:

The method as POST which is what GraphQL normally expects, the header is optional but highly recommended, and if you're doing any authentication this is normally where it goes, then on the body I'm adding the actual query I want to make, and finally I'm adding a next object and using revalidate which is a special option that tells the server component to re-fetch the data every 'x' amount of seconds, which in this case is 10 seconds.
If you want to learn more about how to handle the cache and other options check the NextJS fetch documentation.

As I'm planning on using the API data on a server component here's how the whole example would look like on an actual component:

export default async function AllBlogPosts() {
  const { data } = await fetch(process.env.GRAPHQL_API_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query: `
    query getPosts {
      posts {
        edges {
          node {
            title
            excerpt
            slug
            date
          }
        }
      }
    }
  `,
    }),
    next: { revalidate: 10 },
  }).then((res) => res.json());

  let blogPosts = data?.posts?.edges;

  return (
    <div>
      {blogPosts?.map((post) => (
        <BlogSummary post={post.node} key={post.title} />
      ))}
    </div>
  );
}

And that's it, you would only need to create a <BlogSummary /> component to render your posts correctly.

Let me know how you would improve this code or if you have any suggestions in the comments!

How to add web push notifications to your Next.js project with One Signal

Jerónimo Cosío — Tue, 12 Oct 2021 01:37:56 +0000

I'm sure that by now you've seen the web push notifications that you get in certain websites, but maybe you aren't sure how to add them to your own. They're called web push notifications and they can help you to share relevant information to your users, or updates they're interested in even after they have left your site.

To understand better on the browser side, this push notifications are part of the Notification Web APIs, I would suggest to dive deep into the API if you want to know more details about it. But today I want to show you how to use One Signal in your Next.js project to quickly start sending web push notifications with very few lines of code, in just a couple of minutes and for free!

I won't get into the details of setting up, running and deploying a Next.js project, so I'll assume that you already have a working Next.js site. If you don't have your Next.js project running I would suggest to start there first, please check out this amazing tutorial on the official docs. (For the deployment I'll be using Vercel, but you can use any other service.)

We'll be creating a website called Woof, which is inspired by a 'startup' created in The Office. This site will send a message to all of the users that subscribed and accepted to receive notifications through their browser, so every time any user sends a message through the UI, all the subscribers will get it. I know it's not the best use case, but I think it's easy enough for everyone to understand how to use push notifications and One Signal's SDK. You can also see the finished code for this post on my Github.

But enough chit chat lets dive right in, first we need to create a new account in One Signal and validate our email. After that we need to specify the name and the platform that we'll be sending push notifications to, for this example we'll be using 'Web'.

On the setup we'll choose 'Typical Site' as we want to implement it fast and we're using Next.js which allows us to add our own JavaScript, on the second step it's really important to add the specific site url where the push notifications are going to be sent to, if you're still not sure which one to use, or you don't have a URL you can add localhost or similar, and son't worry, this can be edited later.

If you want, add an icon to be used on the notifications. On the third step you can edit the prompt message that your users will see to be subscribed to your notifications. Optionally you can create a welcome message and set up some advanced setting on step 4 & 5, but I'll skip that for now.

After configuring the first steps, we'll get to a screen where we can download the One Signal SDK files, it's important to download them, unzip them and copy/transfer the OneSignalSDKUpdaterWorker.js and OneSignalSDKWorker.js files into the publicdirectory of your Next.js project.

On that screen we're going to find some JavaScript code to add to our site, BUT as we're using Next.js/React we need to set it up a little different and the relevant information for us there is the App ID.

To add the One Signal JavaScript SDK to our site we need to edit the <Head></Head> component on each page where we want to use it:



//...project-name/pages/index.js
<Head>
    <title>Title of the website here</title>
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" 
async="">
    </script>
</Head>

Then we want to initiate One Signal after the website has been loaded, to do that we'll use the useEffect hook from react like so :



//...project-name/pages/index.js
import Head from "next/head";
import React, { useEffect, useState } from "react";

export default function Home() {
  const [resultApi, setResultApi] = useState();
  useEffect(() => {
    window.OneSignal = window.OneSignal || [];
    OneSignal.push(function () {
      OneSignal.init({
        appId: "ONE-SIGNAL-APP-ID",
        notifyButton: {
          enable: true,
        },

        allowLocalhostAsSecureOrigin: true,
      });
    });
    return () => {
      window.OneSignal = undefined;
    };
  }, []);

//...

Notice that you need to edit the appId: "ONE-SIGNAL-APP-ID",line with your own App ID.

And with that we're basically done with the implementation. After adding this code to our page component, you should be able to visit the Site URL specified in the configuration, and the notification prompt should appear for you to give permission and receive push notifications. You can look at a red bell in the lower right part of the site to debug the notifications.

Once a user subscribes and accepts to receive notifications they'll start appearing on your One Signal dashboard.

As a final step let's send our first notification, we'll create it through the One Signal dashboard by clicking on Messages on the top nav bar, and then the '+ New Push' button on the dashboard.

As you can see, you can add all the relevant information for the push notification like: audience, title, body, image, URL to launch when clicked, etc... and if needed, you can schedule the notification to be sent at a specific time. After you send it your subscribed, users should receive the notification directly in their browser/OS notifications.

And that's it! In just a couple of minutes and with minimum set-up and lines of code we can start sending notifications to all of our users to share relevant information for them.

Thank you for reading, if this post gets enough traffic/attention, I'll create a second part to show how to use the One signal REST API to start sending notifications directly from our server instead of having to get into the One Signal interface to send each one of them, so if you enjoyed this post, please react to it, or comment if it's something that you may be interested in :).

How to animate a button on click with TailwindCSS in Next.js or React.js

Jerónimo Cosío — Mon, 18 Jan 2021 20:51:15 +0000

This post will assume that you already have a working installation of Next.js or React.js and have added the TailwindCSS library, if that's not your case you can read about installing it from scratch here.

We're going to use a super simple animation of a button 'wiggling' when it's pressed, and we'll use Tailwind to create a custom animation to use it as a class in our project.

The first step is to create the animation, so if you followed step-by-step the guide at the beginning lets start by editing the tailwind.config.js file like so:

//./tailwind.config.js

module.exports = {
  purge: ["./pages/*.js"],
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          "0%, 100%": { transform: "rotate(-3deg)" },
          "50%": { transform: "rotate(3deg)" }
        }
      },
      animation: {
        wiggle: "wiggle 200ms ease-in-out"
      }
    }
  }
};

The important bit is the keyframes values inside the extend property of theme. Here we can define our CSS Transforms, for this example I added a simple rotation that simulates a 'wiggle' of the button but you can define whatever you want here.

After adding the keyframes we also need to add the animation property inside extend and here's where we'll define the name of our animation to be used later on, we're also referencing the newly created wiggle transform as a property inside the animation.

Once we have the animation created we'll use React useState to define when to show it and when to hide the animation once it's done, also take a look as how we use the animate-wiggle class which was created in the tailwind.config.js file.

Here's how I animated a button inside a generic page in Next.js:

import React, { useState } from "react";

export default function IndexPage() {
  const [effect, setEffect] = useState(false);
  return (
    <div className="flex h-screen flex-col justify-center">
      <div className="flex justify-center">
        <button
          className={`${
            effect && "animate-wiggle"
          } bg-blue-500 p-4 text-white rounded hover:bg-blue-700 hover:shadow-xl`}
          onClick={() => {
            setEffect(true);
          }}
          onAnimationEnd={() => setEffect(false)}
        >
          Wiggle wiggle...
        </button>
      </div>
    </div>
  );
}

As you can see we're using the state of effect to decide when to show the animation. We're using the onClick event to set the state to true and then the onAnimationEnd event to remove it.

If you're interested, you can play with it here:

How I created a directory for small businesses affected by COVID-19 with Next.js, Tailwind, Sheets and ZEIT and ran it for FREE

Jerónimo Cosío — Tue, 14 Apr 2020 01:36:16 +0000

The Mex vs COVID-19 project

Right now all types of businesses are being affected by the COVID-19 Pandemic, but most of all the small and medium businesses around the world. I know this first-hand as a business owned by my dad has seen declining sales in the last couple of weeks.

That's why I got extremely excited when I learnt about a project led by a friend of mine called MEX vs COVID-19, this is a platform that started on Instagram just a couple of days ago. The idea is to help this type of businesses in México by getting exposure to potential clients through Instagram as well as live events on important topics such as finance, digital transformation, mental health, etc...

The Mex vs COVID-19 web directory

To help on this project I decided to create a small web directory for the businesses as most of them are really small and don't even have a website or a lot of digital presence. My hope is that the directory will help them have a greater reach and ultimately more sales.

My goal for this project was to get something ready in the fastest way possible, with a great design -and UI/UX-, an easy way to add/edit/delete content (CMS), amazing performance in mobile (as their main channel is Instagram) and $0 or close to $0 for operational cost.

So for this post I want to share with you how I got to the current live version of the https://mexvscovid19.com/ directory in just a couple of days, as well as show you guys the code which I've open sourced in case someone else want to contribute, fork, or simply do something similar in your country or city 😄.

Front-end / Back-end

Lately I've been working a lot with Next.js, so naturally that was my choice, this was also the first time that I actually had to connect a Next.js project to some external data source, and as everything I've seen with Next.js it was flawless and the documentation was great. Next.js is a complete React Framework built for production ready sites with a ton of features built-in such as a router and SSR. If you want to start with it take 10 minutes today and go through their getting started tutorial. Also thanks to the SSR generated from the framework I achieved really good numbers in the Google Chrome audits.

Style / CSS Framework

To move fast in the design, I used Tailwind CSS a 'utility first' CSS framework that allowed me to get a really amazing UI/UX with just a couple of CSS classes on my elements. It's a mobile-first framework so the mobile UX is great out o the box and you can easily add your own theming with a couple of lines. I also added Purge CSS to remove all the unused CSS and improve the performance for the site.

Database / CMS

As my goals was to move fast, be cheap and have a simple UI/UX I decided to use Google Sheets as my database, I'm also using Google Forms as an easy way to add new businesses and gather images. To connect my Next.js App with Google Sheets I decided to use Tabletop.js, honestly it's not the best DX out there but it got the job done in record time. If you're curious of the Sheet/Database I'm using to read the information you can check it out here.
As a side effect of using Sheets I didn't had to create a complete user system or deploy a separate headless CMS as I used Google Accounts for this.

Deploying

Probably the easiest step in all of this was the deploy to a live server.I used ZEIT, which actually is the creator and maintainer of the Next.js Framework, so it took me honestly less than 5 minutes to create a deploy using their CLI, later I seted-up my project to deploy automatically with every push to Github directly to their build process and to a live site. To learn how to create your deploy just follow this steps.
And the best of all... I deployed it for FREE as it has a very generous free tier which includes custom domains (The domain was my only expense in the whole project), SSL, integration with Github and more.

This is everything you need to deploy the project using the CLI now:

now

Open source

From the start of this project I planned for it to be used with similar projects in other countries or cities, so my idea is for everyone interested to poke at the code, improve on it with pull-requests, fork it and make it better, or just learn more about how I thought around solving the issues for this project.

Thanks for reading through and hope this can help you out!

Cómo hacer un deploy de tu aplicación Next.js en Netlify

Jerónimo Cosío — Fri, 06 Mar 2020 02:29:47 +0000

Hacer un deploy de una aplicación creada en Next.js y React es muy fácil con Netlify. En estos pasos podrás tener tu aplicación funcionando en un servidor en menos de 5 minutos. Y lo mejor es que es completamente gratis. Además puedes agregar un dominio personalizado y tener SSL completamente gratis.

Puedes revisar la última versión de este tutorial en el repositorio de Github

1. Crea tu aplicación de Next.js

Si es la primera vez que utilizas Next.js, te recomiendo seguir esta guía paso a paso para entender bien cómo funciona. Para este tutorial crearemos sólo una página extremadamente sencilla para enfocarnos más en el deploy. Si ya tienes un proyecto de Next.js puedes ir directo al paso 2.

Crear la estructura de tu proyecto

Escribe estos comandos en la terminal para crear el directorio pagina-de-prueba, iniciar npm, instalar las dependencias de Next.js react react-dom next y crear un directorio pages para agregar las páginas de nuestra aplicación.

mkdir pagina-de-prueba
cd pagina-de-prueba
npm init -y
npm install --save react react-dom next
mkdir pages

Para poder correr Next.js en tu computadora abre el archivo package.json que está dentro del directorio pagina-de-prueba y reemplaza "scripts" con lo siguiente:

//package.json
...
"scripts": {
  "dev": "next",
    "build": "next build",
      "start": "next start"
}
...

Agrega una página de inicio

Sólo vamos a crear una página muy sencilla así que crea un archivo llamado 'index.js' dentro del directorio pages y agrega lo siguiente:

//pages/index.js
function IndexPage() {
    return (
            <div>
                <p>
                    ¡Este es mi primer deploy con Next.js!
                </p>
            </div>
    )
}
export default IndexPage

Corre tu aplicación localmente

Si te das cuenta estamos utilizando React, y creaste una página de inicio, para correr el proyecto sólo usa este comando en la terminal:

npm run dev

Listo, tu primer aplicación de Next.js debe estar corriendo en http://localhost:3000/
Si seguiste todos los pasos debes ver algo similar a esto:

2. Prepara tu proyecto para Netlify, agrega git y súbelo a Github

Para este tutorial vamos a usar Github como nuestro repositorio. Netlify creará un nuevo build cada vez que hagamos un push de nuestro código a un branch específico.

Configura tu proyecto de Next.js para el deploy en Netlify

En tu proyecto edita el archivo package.json para que quede así:

//package.json
...
"scripts": {
    "dev": "next",
    "build": "next build",
    "export": "next export",
    "deploy": "npm run build && npm run export",
    "start": "next start",
},
...

Crea tu repositorio de Github

Entra en tu perfil de Github, crea un repositorio y escoge un nombre. Puedes escoger si quieres que se público o privado. Para este tutorial yo elegí el nombre next-netlify-test-sitey quiero que sea un repositorio público.

Agrega git en tu proyecto

Para subir tu proyecto al repositorio de Github tienes agrega git a tu proyecto corriendo el comando git init dentro del directorio, que en este caso es pagina-de-prueba.

Antes de crear tu primer commit agrega un archivo con el nombre .gitignore y edítalo para que quede así:

# /.gitignore
# next.js build output
.next
# Dependency directories
node_modules/

Crea el primer `commit`

Con estos comandos creas tu primer commit, agregas el repositorio de Github que creaste como un remote y haces un push al repositorio remoto en el branch master. Es importante cambiar la dirección después de git remote add origin por la dirección/nombre de TU repositorio.

git add .
git commit -m 'Este es el primer commit del proyecto.'
git remote add origin https://github.com/cosio55/next-netlify-test-site.git
git push -u origin master

Si revisas tu repositorio de Github puedes ver que ya está ahí todo tu código.

3. Configura Netlify y crea tu primer sitio

Lo primero que tienes que hacer es crear tu cuenta gratuita en Netlify, te recomiendo hacer el login con Github.

Navega a la página de Sitesy selecciona New Site from Git

Selecciona Github en la parte de abajo, y dale acceso a Netlify para que pueda ver el repositorio que creaste.

Selecciona el repositorio que creaste, la branch que quieres utilizar para tu deploy, y algo muy importante escribe npm run deploy como el build commandy out como el publish directory. Dale click en el botón Deploy Site.

¡Listo! Netlify en automático empezará a correr el deploy con código de tu repositorio, y en 1-2 minutos estará listo. Puedes revisar el ejemplo de este tutorial aquí.

¡Si te gustó este tutorial no dudes en seguirme en Twitter, y también comenta si tienes dudas o algo con lo que lo podría mejorar!