DEV Community: Oussama Bouthouri

Send push notification to segments with OneSignal and Loopback

Oussama Bouthouri — Mon, 07 Oct 2019 15:49:05 +0000

The scenario

Our e-commerce mobile app has grown big and we now have a lot of subscribers and items to sell.
Sending classic push notification without any strategy is not enough anymore, so we need some help.
We hire a marketing specialist and we are going to work on user engagement together.
In this article, we will talk about how to send a notification to groups of people based on a complex combination of many tags.

Segments

Let's say we need to attract active Tunisian teenagers, so we have to figure out what tag to use.

Age: between 13 and 19
Country: they are in Tunisia
Sport: they are currently practicing some sort of sport

This part is defined by the marketing team and translated to a segment.
After that when sending a notification we will address this segment.

Creating the segment

Segments cannot be created programmatically, they are only made on the OneSignal dashboard.

1- On the OneSignal dashboard go to your app then to Audience and click on 'New Segment' to create a new one.

2- On the pop up you can name your segment at the top, this name will be used by developers so a neat one would be great.
You can also add all types of tags.
There are some default tags provided by OneSignal like the country tag but you can also add your tag on 'User tag'

Select what type of tag you want to use and complete the form.
For a country tag, you will have a list to choose from.
The user number at the top right corner will update and show you how many users there are in this segment.

3- Our segment will be named ATT for active Tunisian teenager
and these are the combinations of tags we need.
Of course, you can add tags by clicking 'ADD TAGS' or you can make an alternative logic 'sort of or operator' by clicking on 'ADD OR'

Our final result will look like this after clicking on 'CREATE SEGEMNT'

Sending the notification

The code is not complicated at all, we will use the setIncludedSegments method instead of using user id or tags.
so if we change the common/model/item.js file to use segment instead of tags it will look like this:

 Item.afterRemote("create", function(ctx, modelInstance, next) {
    if (modelInstance.bio) {
      // the product is bio so we should notify the users
      // instantiate the OneSignal app client
      var myClient = new OneSignal.Client({
        userAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhmN2EwOTE3NjJm", // REST API Key
        app: {
          appAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhmN2EwOTE3NjJm", // REST API Key
          appId: "fd568c3d-4d40-405f-9214-b5acf470fac8" // OneSignal App ID
        }
      });

      // create the notification
      var availabilityNotification = new OneSignal.Notification({
        contents: { en: "There's a new bio item" }
      });

      // set the segment
      availabilityNotification.setIncludedSegments(['ATT']);

      //send notification
      myClient.sendNotification(availabilityNotification, function(
        err,
        httpResponse,
        data
      ) {
        if (err) next(err); //if there's an error we return the error as response
        next(); // else we return the response
      });
    } else {
      next();
    }
  });

Final words

In this series, I have put all my knowledge about using push notifications with loopback applications.
Every article was based on a real-life application and all the errors I talked about are actual dumb errors I have made me or my team.

In fact, I detain the record of the highest number of people receiving notification by error with a count of more than 5k users 💪

You can find the complete code in this repository, use your credentials though because what I put are fake:
https://github.com/Boussama/loopback-push-notification

Switch to the 'group-notification' branch:
git checkout segment-notification
If you have any question feel free to post a comment or a GitHub issue.

Send push notification group using tags with OneSignal and Loopback

Oussama Bouthouri — Mon, 07 Oct 2019 11:07:17 +0000

The scenario

We have an e-commerce mobile app that notifies the user if a bio item is added to the store.
This will be translated technically as follow.
We are going to make a function that will be executed when the item is created, this function will notify the bio enthusiast users about the availability of a new item.
We should make the appropriate change to the User and Item models.

Preparing the Client model

In Loopback we can't make a change directly to the User model.
If we want to make a custom function, hooks or attribute we have to create a new Model based on the User model.

Oussama-MBP-3:loopback-push-notification oussama$ lb model
? Enter the model name: Client
? Select the datasource to attach Client to: db (memory)
? Select model's base class (custom)
? Enter the base model name: User
? Expose Client via the REST API? Yes
? Custom plural form (used to build REST URL): 
? Common model or server only? common
Let's add some Client properties now.

Enter an empty property name when done.
? Enter the property name: bioFoodEnthusiast
? Property type: boolean
? Required? No
? Default value[leave blank for none]: false

Let's add another Client property.
Enter an empty property name when done.
? Enter the property name: oneSignalUserID
? Property type: string
? Required? No
? Default value[leave blank for none]:

Now we need a custom function executed at the creation of every new user.
When this function is executed we will check if the user is bio enthusiast so we can make appropriate decisions.

Inside common/client.js put this code:

var OneSignal = require("onesignal-node");

module.exports = function(Client) {
  Client.afterRemote("create", function(ctx, modelInstance, next) {
    if (modelInstance.oneSignalUserID && modelInstance.bioFoodEnthusiast) {
      // instantiate the OneSignal app client
      var myClient = new OneSignal.Client({
        userAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhmN2EwOTE3NjJm", // REST API Key
        app: {
          appAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhmN2EwOTE3NjJm", // REST API Key
          appId: "fd568c3d-4d40-405f-9214-b5acf470fac8" // OneSignal App ID
        }
      });

      // create a device object and specify what tag it has
      var deviceBody = {
        tags: {
          bioFoodEnthusiast: modelInstance.bioFoodEnthusiast //name of the tag and the value
        }
      };

      // edit the current user device with what we created
      myClient.editDevice(modelInstance.oneSignalUserID, deviceBody, function(
        err,
        httpResponse,
        data
      ) {
        if (err) next(err);
        next();
      });
    } else {
      next();
    }
  });
};

Now, whenever you create a new bio food, enthusiast client it will update his tag in OneSignal automatically.

The difference will be available on your OneSignal dashboard.
App > Audience > All Users

Prepare the Item model

We already have the Item model so we are not going to use the CLI, instead, we are doing it manually.
Edit the common/item.json file to add the bio attribute:

{
  "name": "Item",
  "base": "PersistedModel",
  "idInjection": true,
  "options": {
    "validateUpsert": true
  },
  "properties": {
    "name": {
      "type": "string",
      "required": true
    },
    "quantity": {
      "type": "number",
      "required": true,
      "default": 0
    },
    "OneSignalUsersID": {
      "type": "array"
    },
    "bio": {
      "type": "boolean",
      "required": false,
      "default": false
    }
  },
  "validations": [],
  "relations": {},
  "acls": [],
  "methods": {}
}

Send the notification

We already know what is there to know.
We hook to the create remote and we send a new notification for every new item that is bio.

Add this function to common/models/item.js:

  Item.afterRemote("create", function(ctx, modelInstance, next) {
    if (modelInstance.bio) {
      // the product is bio so we should notify the users
      // instantiate the OneSignal app client
      var myClient = new OneSignal.Client({
        userAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhmN2EwOTE3NjJm", // REST API Key
        app: {
          appAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhmN2EwOTE3NjJm", // REST API Key
          appId: "fd568c3d-4d40-405f-9214-b5acf470fac8" // OneSignal App ID
        }
      });

      // create the notification
      var availabilityNotification = new OneSignal.Notification({
        contents: { en: "There's a new bio item" }
      });

      // set the filter to the correspandant tag
      availabilityNotification.setFilters([
        { field: "tag", key: "bioFoodEnthusiast", value: true }
      ]);

      //send notification
      myClient.sendNotification(availabilityNotification, function(
        err,
        httpResponse,
        data
      ) {
        if (err) next(err); //if there's an error we return the error as response
        next(); // else we return the response
      });
    } else {
      next();
    }
  });

And that's it, now we have our final result in the most optimized way.

When selecting the tags to apply there's not just the value that you can put but you can use relation. For example, if you used numbers you can select the 'higher' relation.
{"field": "tag", "key": "age","relation": ">", "value": 18}

Final words

Finally, I can say that this solution is a good solution without any problem. When we are going to send notification we just send notification without doing any logic work. and the logic work will be divided into many operations that it won't affect our performances.

You can find the complete code in this repository, use your credentials though because what I put are fake:
https://github.com/Boussama/loopback-push-notification

Switch to the 'group-notification' branch:

git checkout tags-notification

If you have any question feel free to post a comment or a GitHub issue.

Send push notification to groups with OneSignal and Loopback

Oussama Bouthouri — Mon, 07 Oct 2019 05:12:52 +0000

The scenario

If you read the previous chapter you can jump straight to the next section, else let's consider this scenario.
We have an e-commerce mobile app that notifies the user if an out-of-stock item is available again.
This will be translated technically as follow.
We are going to make a function that will be executed when the item quantity is higher than zero, this function will notify the users about the update.
The difference is that this time we have many users that are waiting for the item to be available instead of a single one.

The solution

The first thing that came to my mind is that we can get a list of users and make a loop that sends notifications one by one.
This solution was tested with an app of 5k users in prod, our first attempt was not even asynchronous and the server was down after reaching peak performance. The second time we did it asynchronously and the performance was so bad! the loopback server was busy sending notification and could not work on other requests. Of course like any amateur, we did update our server specs! in vain.
Those were some dark days...

The real solution

after many tries that got us to read the documentation properly, we found many solutions the easiest one is to add the players' id in the
include_player_ids parameter of the notification.

First, our model has changed slightly and the parameter that stores the OneSignal ID is now an array.

{
  "name": "Item",
  "base": "PersistedModel",
  "idInjection": true,
  "options": {
    "validateUpsert": true
  },
  "properties": {
    "name": {
      "type": "string",
      "required": true
    },
    "quantity": {
      "type": "number",
      "required": true,
      "default": 0
    },
    "OneSignalUsersID": {
      "type": "array"
    }
  },
  "validations": [],
  "relations": {},
  "acls": [],
  "methods": {}
}

Then if we change our previous code this will give us a function like this.

var OneSignal = require("onesignal-node");

module.exports = function(Item) {
  Item.beforeRemote("prototype.patchAttributes", function(ctx, unused, next) {
    if (
      ctx.instance.oneSignalUserID &&
      ctx.instance.quantity === 0 &&
      ctx.args.data.quantity > 0
    ) {
      // instantiate the OneSignal app client
      var myClient = new OneSignal.Client({
        userAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhxdN2EwOTE3NjJm", // REST API Key
        app: {
          appAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhxdN2EwOTE3NjJm", // REST API Key
          appId: "fd568c3d-4d40-405f-9214-b5aaf470fac8" // OneSignal App ID
        }
      });

      // we put the item inside an object
      const instance = {
        ...((ctx && ctx.instance && ctx.instance.toJSON()) || {})
      };

      // create the notification
      var firstNotification = new OneSignal.Notification({
        contents: { en: "The item is available again" },
        data: instance, // we can send the item data so the user know what exactly is available again
        include_player_ids: ctx.instance.oneSignalUsersID // the oneSignalUsersID is now an array you have to check the new model definition
      });

      //send
      myClient.sendNotification(firstNotification, function(
        err,
        httpResponse,
        data
      ) {
        if (err) {
          console.log("Something went wrong...");
        } else {
          console.log(data, httpResponse.statusCode);
        }
      });
    }
    next();
  });
};

Conciderations

In this example it was really simple the IDs were in a simple array, we get it without a problem. It won't be like that in real apps. Probably it will be a relation between the User and the Item model. with a one-to-many relation, you have to fetch the complete list, after applying filters maybe and then extract the id from the instances and put them inside an array. It's tedious and not optimal at all. certainly, it will consume resources that we need. Be careful if it's not as simple as an already prepared list.

Optimisation

An optimization that came to my mind and that already exist in OneSignal SDK is segments and tags. These two methods will let you select a group of users from an already specified segment/tag.
This will be of course more optimal because we are not going to make any logic when we are sending the notification but we are going to apply the logic when we create the user or the item. Like this, we divide the workload so that we prepare the population before we contact them.
I will write about these two methods next time.

Final word

Next time I will explain how to send a notification to a specific group using segments.

You can find the complete code in this repository, use your credentials though because what I put are fake:
https://github.com/Boussama/loopback-push-notification

Switch to the 'group-notification' branch:

git checkout single-notification # branch that contain all the groupe work
git checkout 852a1d5f542d187c0bb30860e28ba1d7dc1aed4 # this article work

If you have any question feel free to post a comment or a GitHub issue.

Automating your boring code with yeoman - Part 1

Oussama Bouthouri — Mon, 30 Sep 2019 02:59:14 +0000

I began this project mainly because I was working with a lot of command-line tools "CLI" and I discovered through time that they can be very helpful. Especially when you are looking to automate the task or integrate it with some other cli.

The best example is the loopback cli which can create the whole architecture, generate a model, create a relation between them and a lot more…

Basically, when you master the cli you don't have to code a lot or at least it helps generate a big part of the project with just a few strokes of the keyboard.

The first time that I was reading the code source of loopback, I was interested in their cli and how they generate all these files, and it was there that I discovered Yeoman…

Without further ado, let's learn by coding, but first, we have to install the necessary tools.

All we need is just node and npm that you can install with nvm, after that we can use a generator to generate the minimum code of our generator! Crazy I know, that's how much the Yeoman's peoples love to generate…

npm install -g yo
npm install -g generator-generator

Finally, after installing all the tool we can start:

yo generator

This will ask you a few questions to create the necessary files. There are a few steps that you need to pay attention to if you are going to publish your generator to the pubic.

The name of the generator must begin with generator-
Keywords must contain yeoman-generator
The repo needs to be public

In our case all of that is not important we are creating a generator for local usage at least for now.

By default, the generator name will be generator-directoryName.

Now is the time to open the newly created folder in our favorite editor and begin some simple coding.

There's a lot of files but we have to pay attention only to the generators folder.

Because one project can contain many generator Yeoman will create a separated folder for each one and the app folder will contain the main generator, in our case generator-code.

generator/app/index.js will contain all the logic of our generator, delete the already existing code and paste this code:

'use strict';
const Generator = require('yeoman-generator');

module.exports = class extends Generator {
  writing() {
    this.fs.copy(
      this.templatePath('dummyfile.txt'),
      this.destinationPath('dummyfile.txt')
    );
  }
};

We are going to copy a file from the template directory to the destination folder, so we have deleted all the unnecessary code and kept the strict minimum.

Inside the writing() method we will copy the file with the this.fs.copy() function which take two arguments the file to copy and a destination.

this.templatePath('fileName') will return the absolute path of the file inside the template directory of the generator and this.destinationPath('fileName) will return the current folder concatenated with the file name.

For example, if our generator is inside some/place , this.templatePath('dummyfile.txt') will return some/place/generator-code/generators/app/templates/dummyfile.txt and if your current directory is other/place the function this.destinationPath('directory/dummyfile.txt) will return other/place/directory/dummyfile.txt .

Other things you have to know about the this.fs.copy() function, is that it will automatically create any folder that doesn't exist and it will warn you if the file already exists and if you want to override it or not.

That's it all the necessary tools and code is here and the last thing we want to do is use our generator, which is basically an npm module that is in development. For that a simple

npm link

Will do the trick and wrap your module and link it.
To use the generator:

yo generator-code

That's it for this tutorial, copying some files is enough. Next time we will learn some other tricks, till the next time, I hope you keep learning more and more.

Send push notification to single users with OneSignal and Loopback

Oussama Bouthouri — Mon, 30 Sep 2019 02:35:24 +0000

The scenario

To better illustrate this probleme let's consider this scenario.
We have an e-commerce mobile app that let the user be notified if an out-of-stock item is again available.
This will be translated technically as follow.
We are going to make a function that will be executed when the item quantity is higher than zero, this function will notify the user about the update.

The OneSignal User ID

We are assuming that the User model already contains the OneSignalUserID.
This scenario is very popular with mobile apps, and they add the OneSignal user ID when signing up.
I did not see any example like this in a web client, but if you are curious how to do it, this is a hint.

      OneSignal.push(function() {
            OneSignal.showNativePrompt().then(function(val) {
              OneSignal.getUserId().then(function(userId) {
                if (userId == null) {
                  console.log("there's an error");
                } else {
                  // you have the OneSignal user ID do what you want with it
                }
              });
            });
          }

Listening to change

In loopback we can use hooks to trigger actions after or before a remote method is called using the API.
In our scenario, we have to listen to the change in the item quantity. This change is done by patching the quantity attribute inside the Item model. After every patch on the Item model we check if this change affects the quantity or not if it's the case we send our notification.

I am using beforeRemote so I can make a comparison between the item instance and the change that happens, which we can't do in the afterRemote.

Inside common/models/item.js put this

var OneSignal = require('onesignal-node');

module.exports = function(Item) {
  Item.beforeRemote('prototype.patchAttributes', function(ctx, unused, next) {
    if (
      ctx.instance.oneSignalUserID && // we check if the item contain OneSignal user that wait for a change
      ctx.instance.quantity === 0 && // if the quantity is zero
      ctx.args.data.quantity > 0 // and we are going to increase it
    ) {
      // then we send our notification to the user
    }
    next();
  });
};

In Loopback we use the keyword prototype if the function is attached to an instance and not the model itself, like a static function.
We can get the item instance data from the context using ctx.instance
and we can get arguments data from ctx.args.data

Sending the notification

In order to make things simple, I assumed that every item has an attribute that contains a OneSignal user ID and not many users, but the logic is the same.

var OneSignal = require("onesignal-node");

module.exports = function(Item) {
  Item.beforeRemote("prototype.patchAttributes", function(ctx, unused, next) {
    if (
      ctx.instance.oneSignalUserID &&
      ctx.instance.quantity === 0 &&
      ctx.args.data.quantity > 0
    ) {
      // instantiate the OneSignal app client
      var myClient = new OneSignal.Client({
        userAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhxdN2EwOTE3NjJm", // REST API Key
        app: {
          appAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhxdN2EwOTE3NjJm", // REST API Key
          appId: "fd568c3d-4d40-405f-9214-b5aaf470fac8" // OneSignal App ID
        }
      });

      // we put the item inside an object
      const instance = {
        ...((ctx && ctx.instance && ctx.instance.toJSON()) || {})
      };

      // create the notification
      var firstNotification = new OneSignal.Notification({
        contents: { en: "The item is available again" },
        data: instance, // we can send the item data so the user know what exactly is available again
        include_player_ids: [ctx.instance.oneSignalUserID] // we put the user OneSignal id here
      });

      //send
      myClient.sendNotification(firstNotification, function(
        err,
        httpResponse,
        data
      ) {
        if (err) {
          console.log("Something went wrong...");
        } else {
          console.log(data, httpResponse.statusCode);
        }
      });
    }
    next();
  });
};

Final word

Next time I will explain how to send a notification to a specific group of users.

You can find the complete code in this repository, use your credentials though because what I put are fake:
https://github.com/Boussama/loopback-push-notification

Switch to the 'single-notification' branch:
git checkout single-notification

If you have any question feel free to post a comment or a GitHub issue.

Send push notification on Loopback with OneSignal

Oussama Bouthouri — Sun, 29 Sep 2019 12:32:32 +0000

Push notification is a technology that let your server communicates with your app in one way communication.
For example when you have new content on your blog and you want to notify your users about it.
Push notification is an active way to contact your user even when they are not visiting your website/app.
Used in the right way it will lead to more user interaction, but in the wrong hands, it will lead to spam and an angry user and ultimately to your app delete.

In this tutorial, I will explain how to send a push notification using Loopback and OneSignal to a web app or a mobile app.

Why OneSignal?

The free plan has unlimited push notification both for web and mobile users
You can customize your users by segment 'up to 6 segments for the free plan'
Easy integration with mobile and web apps
Tested in production with a massive amount of users and push notification

Why Loopback?

Opensource solution by StrongLoop/IBM
Highly performant "tested in production also"
Highly extensible
Create APIs so can be used with either mobile, desktop or web apps

Setting up OneSignal app

First of all, create an account in OneSignal and sign-in.
Then create an app and name it.

Then select what type of integration you want, in our case we are going to use the web app integration.

After that, you fill the info form for the application.
What you need to pay attention to is:

1- The site URL:
If you are testing in your computer you are going to use http://localhost:[optional-port]
I used create React app to create a simple web app but you can use what you want, even a simple HTML page.
Because I use React I am going to append 3000 as an optional port for the site URL so the result would be http://localhost:3000

2- Http & Https:
Because we are not using secure connexion "https" we have to add a label to our app.

3- Permission prompt:
You need to choose at least one Permission prompt setup.
This permission prompt is the way that will be used to contact the visitors.
Either a bell in the corner, a native prompt or something else it is going to be set in this section.

The final result should look something like that.

Setting up the webApp

Now that all is good from the OneSignal part we need to set up our project so it can receive the notifications.
Inside my React app I am going to copy the provided code inside the public/index.html file inside the head tag.

Now when you visite your application you will find the little bell in the right corner "if you choose the bell prompt"

If you click on the bell you will be subscribed to the website/web app notification channel. Which in the dashboard will result in something like this.

Send notification

Initialise the project

We create a new Loopback app and install the OneSignal package then we are ready to go.

Oussama-MacBook-Pro-3:~ oussama$ lb lb-push-notification
? Enter name of the directory to contain the project: lb-push-notification
   create lb-push-notification/
     info change the working directory to lb-push-notification

? Which version of LoopBack would you like to use? 3.x (Active Long Term Support)
? What kind of application do you have in mind?
  api-server (A LoopBack API server with local User auth)
  empty-server (An empty LoopBack API, without any configured models or datasources)
❯ hello-world (A project containing a controller, including a single vanilla Message and a single remote method)
  notes (A project containing a basic working example, including a memory database)

npm install onesignal-node --save

Get your app credential from OneSignal dashboard

go to your dashboard, click on your app name then go to settings and you will find the credential on 'Keys & IDs'.
Keep them safe and don't share them publicly.

Send the notification

The project already contains a remote function that accepts a name and returns a greeting message.
The idea is to tweak the project a little bit so it will send the greeting to all the users via push notification.

To do so we need to change the model definition on the common/models/message.json file.
We don't need any argument so we will erase the accept part.

{
  "name": "Message",
  "base": "Model",
  "properties": {},
  "methods": {
    "greet": {
      "isStatic": true,
      "returns": {
        "arg": "greeting",
        "type": "string"
      },
      "http": {
        "verb": "get"
      }
    }
  }
}

After that, we modify the function to integrate OneSignal logic.

// import the OneSignal library
var OneSignal = require("onesignal-node");

module.exports = function(Message) {
  Message.greet = function(cb) {
    // instantiate your onesignal app client
    var myClient = new OneSignal.Client({
      userAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhxdN2EwOTE3NjJm", // REST API Key
      app: {
        appAuthKey: "OGE0MzUyNjAtMjM4Ny00NjNhLTk5NjctMDhxdN2EwOTE3NjJm", // REST API Key
        appId: "fd568c3d-4d40-405f-9214-b5aaf470fac8" // OneSignal App ID
      }
    });

    // we need to create a notification to send
    // inside contents we can add many languages I just used the en for English
    // I set the target to all the user who has subscribed
    var firstNotification = new OneSignal.Notification({
      contents: { en: "Hello dear user" },
      included_segments: ["Subscribed Users"]
    });
    // sending the notification and use the callback 
    // for both successfull and unseccessfull status

    myClient.sendNotification(firstNotification, function(
      err,
      httpResponse,
      data
    ) {
      if (err) {
        console.log("Something went wrong...");
      } else {
      // return a message to the api if everything is ok
        cb(null, "The notification was sent");
      }
    });
  };
};

Here's the final result on the explorer with the return message and the push notification on the top right corner.

Final word

Next time I will explain how to send a notification to a single user.

You can find the complete code in these repositories, use your credentials though because what I put are fake:
https://github.com/Boussama/loopback-push-notification
https://github.com/Boussama/react-push-notification

If you have any question feel free to post a comment or a GitHub issue.

Complete guide to Wordpress menu sourcing in Gatsby

Oussama Bouthouri — Sat, 13 Jul 2019 16:49:49 +0000

Using the Gatsby plugin gatsby-source-wordpress we can fetch almost everything from a Wordpress website.
There are only two things that were not there by default, the menus and the custom options.
This blog post is about menus.

1. Preparing the menu

As I have just mentioned, the Wordpress menu are, by default, not available on the Wordpress REST api, so the first step is to make them visible.

We can make this easily with a Wordpress plugin WP REST API Menus that you can't find when you want to install it directly from your website.

You need to download it and use WordPress Admin Plugin Upload, here's a link to a tutorial if you don't know how the.
Now that you have installed the plugin, your menus are available on the rest api.

WP-REST-API V2 Menus is not the good plugin to install.

2. The request:

After installing the plugin if you run gatsby develop a new GraphQL request will be available:

allWordpressWpApiMenusMenus to get the menus available
allWordpressWpApiMenusMenusItems to get the item of the menus
allWordpressWpApiMenusMenuLocations to get the available menu location

3. Useful request:

There are a lot of useful requests but in our case we just need to retrieve the menus and their items "content", and this is the request for that.

{
  allWordpressWpApiMenusMenusItems {
    edges{
      node {
        slug
        name
        items {
          title
          url
        }
      }
    }
  }
}

If your menu contains sub-menus use the wordpress_childer attribute

{
  allWordpressWpApiMenusMenusItems {
    edges{
      node {
        slug
        name
        items {
          title
          url
          wordpress_children {
            title
            url
          }
        }
      }
    }
  }
}

If you want to retrieve a specific menu use filters like this

{
  allWordpressWpApiMenusMenusItems(filter: {slug: {eq: "sidebar-menu"}}) {
    edges{
      node {
        slug
        name
        items {
          title
          url
          object_slug
          wordpress_children {
            title,
            url
          }
        }
      }
    }
  }
}

4. Getting the menu

The complete code in a Gatsby component:
Now that we have all what we need, this is a small component to display the Wordpress menu

import React from "react"
import { StaticQuery, graphql } from "gatsby"

export default () => (
  <StaticQuery
    query={graphql`
      query {
        allWordpressWpApiMenusMenusItems(
          filter: { slug: { eq: "sidebar-menu" } }
        ) {
          edges {
            node {
              slug
              name
              items {
                title
                url
                object_slug
                wordpress_children {
                  title
                  url
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      return (
        <nav className="menu">
          <ul className="nav flex-column">
            {data &&
              data.allWordpressWpApiMenusMenusItems &&
              data.allWordpressWpApiMenusMenusItems.edges &&
              data.allWordpressWpApiMenusMenusItems.edges[0] &&
              data.allWordpressWpApiMenusMenusItems.edges[0].node &&
              data.allWordpressWpApiMenusMenusItems.edges[0].node.items &&
              data.allWordpressWpApiMenusMenusItems.edges[0].node.items.map(
                prop => {
                  return (
                    <li className="nav-item">
                      <a
                        className="nav-link active"
                        href={prop.url}
                        alt={prop.title}
                      >
                        {prop.title}
                      </a>
                      <div className="sub-menu">
                        {prop &&
                          prop.wordpress_children &&
                          prop.wordpress_children.map(child => {
                            console.log("child ", child)

                            return (
                              <a
                                className="dropdown-item"
                                href={child.url}
                                alt={child.title}
                              >
                                {child.title}
                              </a>
                            )
                          })}
                      </div>
                    </li>
                  )
                }
              )}
          </ul>
        </nav>
      )
    }}
  />
)

5. The correct url

If your Wordpress domain name is not the same as your Gatsby website don't forget to replace them.
In gatsby-config.js put this in the plugin declaration

searchAndReplaceContentUrls: {
    sourceUrl: "http://localhost:8080",
    replacementUrl: "http://localhost:8000",
}

here's the complete example:

{
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "http://localhost:8080/",
        protocol: "http",
        hostingWPCOM: false,
        useACF: false,
        excludedRoutes: ["**/settings", "**/themes", "**/users/me"],
        verboseOutput: true,
        searchAndReplaceContentUrls: {
          sourceUrl: "http://localhost:8080",
          replacementUrl: "http://localhost:3000",
        },
      },
    }

6. Conclusion

This is not always the good approach and sometime it's overkill, but it's nice to know everything about Wordpress's menus and their use in Gatsby. You might have another opinion or a different method.
Please share your point of view with me in comment.