DEV Community: Naur

GraphQL Tips & Tricks

Naur — Tue, 09 Dec 2025 14:24:11 +0000

When discussing APIs, two models always come up: REST and GraphQL. Both operate over the HTTP protocol, but differ in how they deliver data and the level of control the client has over what is returned.

This article explores these differences and answers several common questions, including the famous ! in GraphQL and how to test everything using request files.

📌 Code examples are available in this repository:
https://github.com/SrLuc/GrapQL-Example

GraphQL vs REST

Imagine you walk into a restaurant:

At a REST, you look at the menu and each dish is served exactly as is. Want just rice? You might even get rice, beans, salad, and farofa all together.

Need more details? You have to order another dish.

At GraphQL, you choose exactly what goes on your plate, “I just want rice and farofa.” or “I want everything: rice, meat, juice, and dessert.”

That's the essence of the difference.

Exemple REST

GET /dishes

Simple and functional…
But sometimes you just want beans, and the restaurant brings you the complete "PF" (a full plate), which means you receive more data than necessary.

{
  "dishes": [
    {
      "id": "1",
      "name": "Dish of the Day",
      "rice": true,
      "beans": true,
      "meat": true,
      "salad": true
    }
  ]
}

Even if you only want the name, REST sends the entire object.

Exemple de GraphQL

POST /graphql

with GraphQL, you build your meal:

query {
  dishes {
    id
    name
    rice
  }
}

And the server returns only what you requested.

{
  "dishes": [
    {
      "id": "1",
      "name": "Dish of the Day",
      "rice": true
    }
  ]
}

Nothing more, nothing missing.

⚠️ Most GraphQL requests are POST because GraphQL sends the query within the request body, and POST is the standard method that supports this structure.

Rest vs GraphQL Ilustration :

What is a query in GraphQL?

Think of a query like your order at a restaurant.

query {
  dishes {
    name
    rice
  }
}

A query is the way to describe exactly what data you want.

What is the relationship between a query and a schema?

Think of the schema as a restaurant menu.

type Dish {
  id: ID!
  name: String!
  rice: Boolean!
  beans: Boolean
  meat: Boolean
  salad: Boolean
}

It defines everything that is available and how each dish is structured:

⚠️ The ! means that the field is required. It's like saying:

“This dish always comes with rice. No exceptions.”

Final Concepts :

Concept	REST (ready-made dishes)	GraphQL (build your own dish)
Endpoints	Many	Only one
Data returned	Fixed	Customized
Process	GET, POST, PUT, DELETE	Queries and Mutations
Common problems	Overfetching / underfetching	Queries becoming too complex
Ideal for	Simple APIs	Apps that consume lots of data

📌 Code examples are available in this repository:

https://github.com/SrLuc/GrapQL-Example
Thank you all

[Boost]

Naur — Mon, 03 Nov 2025 14:18:55 +0000

React Hooks Tutorials: Introduction

ABIDULLAH786 ・ Oct 22 '22

#react #javascript #webdev #tutorial

How to Start a Front Software Project from Scratch (in less than 5 minutes)

Naur — Wed, 22 Oct 2025 19:02:37 +0000

A quick and practical guide to starting your first frontend web project with the main tools and without complications.

Prerequisites

Before getting started, it's important to have some basic knowledge:

🧩 Programming Logic
📦 Package Managers (NPM, Yarn, or PNPM)
🧭 Git and GitHub (for versioning and code hosting)
🎨 CSS Libraries (such as Tailwind, Material UI)
🗂️ Project Structure (understanding folders like /src and files like package.json)

📍 In this guide, we'll focus on frontend web development using React + TypeScript and Vite as a startup tool.

Choosing Technologies

The first crucial decision is choosing the project type and the appropriate technologies, since the choice of project type can indirectly define some of the technologies that will be used.

Project Type	Recommended Technology
Simple Landing Page	HTML, CSS, JavaScript
Website with Login/Components	React, Vue
Complex Application	React + TypeScript, Vuejs, Nuxt, Next

For this tutorial, we chose React because of its gentle learning curve.

🛠️ Managing Packages in Node.js

Node.js uses a package manager called NPM (Node Package Manager).

It is responsible for installing, updating, and removing libraries used by your project. These libraries (also called dependencies) are listed in the package.json file.

NPM is automatically installed with Node.js and is one of the most important tools for any modern JavaScript or TypeScript project.

📦 Main NPM Commands

🧩 Action	💻 Command
Install a package	npm install package-name
Uninstall a package	npm uninstall package-name
Install development dependency	`npm install -D package-name`
Check installed dependencies	Check the `package.json` file

💡 Tips

NPM creates a folder called node_modules, where all installed packages are stored.
If you prefer, you can also use Yarn, an alternative to NPM with similar commands (e.g., yarn add, yarn remove, etc.).

Step 1 — Creating the repository on GitHub

I like to first create a repository on GitHub and clone it to my machine, as this makes it easier to version code directly in the project repository, both locally and remotely after using git commands.

Access your GitHub Account and
Create a new repository (public or private)
Copy the repository's HTTPS link

In the explorer, clone the repository using the command:

git clone https://github.com/your-username/your-repository.git

Then access the cloned repository.

Step 2 — Installing React with Vite

Vite is a lightning-fast frontend build tool that powers the next generation of web applications.

Open the terminal inside your repository folder and run:

npm create vite

This will download essential dependencies and libraries to start the project.

During the interactive setup, you can use the arrow keys to navigate and the keyboard to type in the terminal, for example:

Enter/Set the project name
Select React as the main library
Choose TypeScript (TS) as the language (or JavaScript if you prefer)

Step 3 — Installing Dependencies

Dependencies are small pieces and snippets of code responsible for managing the application between high- and low-level modules, things that this blog won't delve into at this time.

Therefore, open the terminal in the project folder (project root) and run the following command to install these software dependencies for your project.

npm install

Step 4 — Running the Project

To run the project, you need to check which scripts are provided in the package.json file. In this case, we're looking for the dev script.

The dev script makes the new application run, as if we were going to play it. Therefore, in your project's terminal in VScode (or any other IDE you're using), run the command

npm run dev

And That's It!

Your project is running on localhost:5173 (Vite's default port).

Localhost means your project is running only with the files they already have or even the files you've written, but it's not yet online—that is, it exists only locally on your computer. Only you can access it.

Step 5 — Installing Additional Libraries (Tailwind CSS)

Tailwind its Rapidly build modern websites without ever leaving your HTML.

Tailwind is a famous CSS library widely used in frontend development due to its versatility and mobile-first foundation. This means that Tailwind's intention is to style the project responsively—in other words, to have a UI that works for desktops, tablets, and mobile platforms.

To install Tailwind CSS (example of an additional library):

in the terminal, at the project root:

npm install -D tailwindcss

Furthermore, it's important to clarify that it's EXTREMELY necessary to read the libraries you want to include in your project, since code generated by Generative Artificial Intelligence tends to be poorly written and outdated.

Therefore, as a professional concerned with your work, it's also your job to read these important documents about the dependencies you want to have in your own project.

Furthermore, installation alone doesn't guarantee that the dependency is 100% working; it's also necessary to configure it, and these configurations are usually found in the first pages of the library and framework documentation.

Your package.json contains important scripts for running the project.

Package.json is an extremely important file for web projects, as it contains the main information about the system/project, such as name, version, repository, main dependencies, and scripts.

For example, within the "scripts" object, we have the following scripts:

"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
 }

npm run dev - Starts the development server
npm run build - Generates the production build
npm run preview - Views the production build

Created Project Structure

your_project_name/
├── node_modules/ # Installed dependencies
├── public/ # Static files
├── src/
│ ├── assets/ # Images, fonts, etc.
│ ├── components/ # React Components
│ ├── App.tsx # Main Component
│ ├── main.tsx # Entry Point
│ └── index.css # Global Styles
├── index.html # Main HTML
├── package.json # Dependencies and Scripts
├── tsconfig.json # TypeScript Configuration
└── vite.config.ts # Vite Configuration

💡 Important Tips

Always consult the official documentation
ChatGPT may display outdated and incorrect code.
Keep your package.json up to date
Use Git for version control from the start
No AI replaces the user manual**
Official documentation is always more reliable
Check dependencies in package.json after each installation

To recap what was done:

✅ Created repository on GitHub
✅ Cloned to your machine
✅ Initialized project with Vite + React + TypeScript (via NPM)
✅ Installed dependencies
✅ Ran the project locally
✅ Added Tailwind CSS (optional)

🔗 Useful Links

📚 React Documentation
⚡ Vite Documentation
🎨 Tailwind CSS Documentation

This guide was created based on practical development experience.

Author: Ruan Rickelme Ramos

💡 Remember: This is a guide for beginners who want to get started quickly.

As your project grows, explore more advanced concepts like routing, state management, and testing.

THANKKSS!!

How to Study Machine Learning with Two Variables

Naur — Fri, 17 Oct 2025 19:37:13 +0000

Introduction

In software development, a common question is: Do more features generate more bugs?

Understanding this relationship can help teams better plan new features, prioritize fixes, and anticipate problems.

In this project, we'll show how to train a machine to analyze a small dataset with two variables:

Features → Number of features added
Bugs → Number of errors detected

We'll use data visualization techniques with scatter plots and learn how to create and interpret a simple decision tree to classify cases into quadrants.

Introduction

Define the variables you'll use for training (dataset).

In this example, we use a simple dataset, based on a Cartesian plane of bugs x features:

This first step simply displays the dataset, without sorting it. We manually classified the cases and obtained the following result:

Cases: 36
Features: 21
Bugs: 15

Setting Thresholds

To organize the data and prepare for decision tree training, we set thresholds.

By drawing a vertical line at the value of features = 3.6 (approximately 4), we divide the dataset into Side A and Side B:

This generates quadrants A and B, with their respective case, feature, and bug counts:

By drawing another horizontal line, we create two more quadrants (C and D), with their own data:

With this, we can choose any quadrant to explore and train a decision tree based on the features and bugs variables.

Exploring Quadrants and Decision Trees

Quadrant A (Side A)

By isolating the features = 3.6 variable or rounding it to 4, we can train the tree:

Quadrant B (Side B, encompassing B and D)

By isolating features = 3.6 or rounding, the tree can be trained:

The final result of the Cartesian plane with all quadrants:

Google Colab and Excalidraw

Also, the drawing may contain errors, so I also created a Google Colab in Python that reads, cleans, maintains, and structures the decision tree of this dataset:
Open in Colab

Furthermore, the study design is available in Excalidraw:
Open in Excalidraw

Conclusion

This approach is a small step toward understanding how machine learning works in decision tree logic.

If you've reached the end of this mini-article, be sure to follow me on Github and LinkedIn!

Happy studying!

Contacts

React Native Offline First Starter Pack: The Essential Toolkit

Naur — Thu, 16 Oct 2025 12:31:51 +0000

Introduction
Building a robust, production-ready mobile app these days requires more than just React Native. It requires a curated ecosystem of libraries that cover state management, API synchronization, secure storage, user interface (UI), and especially offline capabilities.

We don't want our system to crash when we don't have internet, do we? Hahaha

This guide introduces the React Native Fullstack Starter Pack.

A curated list of dependencies that provides all the components needed to launch a real app, complete with secure authentication, global state, API integration, and a beautiful user interface.

Why "Fullstack" Mobile?
This term applies because this setup offers everything you need to manage the entire mobile app lifecycle: from the user interface (frontend) to communication with any backend (Node.js, NestJS, Firebase, etc.).

📦 The Core Toolkit: Dependencies at a Glance

react-native-async-storage/async-storage → storing simple data (e.g., token).
@react-navigation/native + @react-navigation/native-stack → navigation between screens.
@tanstack/react-query → caching + API synchronization (much better than just axios).
axios → HTTP client.
jwt-decode → reading data from the JWT token.
react-hook-form + yup → forms with validation.
zustand → simple and lightweight global state.
styled-components → styling with CSS-in-JS.
react-native-paper → ready-made UI library (inputs, buttons, cards). - react-native-reanimated + react-native-gesture-handler → native animations and gestures.
react-native-safe-area-context + react-native-screens → safe browsing support.
react-native-vector-icons → icons.
realm → local database, useful for offline apps.

🏗️ Why is this a Fullstack starter pack?

This set covers the entire lifecycle of a real mobile app:

UI/Frontend → react-navigation, react-native-paper, styled-components
State Management → zustand
API Communication (backend) → axios + react-query
Secure Authentication → async-storage + keychain + jwt-decode
Offline First → realm (local database)
Forms and Validation → react-hook-form + yup

📂 Initial File Structure

src/
 ├── api/
 │   └── client.ts        # axios 
 ├── screens/
 │   ├── LoginScreen.tsx  # login screen
 │   └── HomeScreen.tsx   # inital screen
 ├── store/
 │   └── authStore.ts     # zustand for login/logout
 └── services/
     └── auth.ts          # auth functions

⚡ Code Skeleton (`App.tsx`)

Here's an example of a starter app with
✅ Fake Login ✅ Navigation ✅ Global State ✅ Authentication

// App.tsx
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { SafeAreaProvider } from "react-native-safe-area-context";
import LoginScreen from "./src/screens/LoginScreen";
import HomeScreen from "./src/screens/HomeScreen";
import useAuthStore from "./src/store/authStore";

const Stack = createNativeStackNavigator();
const queryClient = new QueryClient();

export default function App() {
  const { user } = useAuthStore();

  return (
    <SafeAreaProvider>
      <QueryClientProvider client={queryClient}>
        <NavigationContainer>
          <Stack.Navigator>
            {user ? (
              <Stack.Screen name="Home" component={HomeScreen} />
            ) : (
              <Stack.Screen name="Login" component={LoginScreen} />
            )}
          </Stack.Navigator>
        </NavigationContainer>
      </QueryClientProvider>
    </SafeAreaProvider>
  );
}

In other words:

👉 You already have everything you need to create an app with login, backend integration, caching, global state, a ready-made UI, and a local database.

This is why it is considered a start pack for any fullstack React Native application.

You have all the pieces from beautiful UI to secure offline data—ready to connect to any backend (Node, Nest, Firebase, etc.).

Happy coding!

DEV Community: Naur

GraphQL Tips & Tricks

GraphQL vs REST

Exemple REST

Exemple de GraphQL

Rest vs GraphQL Ilustration :

What is a query in GraphQL?

What is the relationship between a query and a schema?

Final Concepts :

📌 Code examples are available in this repository:

[Boost]

React Hooks Tutorials: Introduction

ABIDULLAH786 ・ Oct 22 '22

How to Start a Front Software Project from Scratch (in less than 5 minutes)

Prerequisites

Choosing Technologies

🛠️ Managing Packages in Node.js

📦 Main NPM Commands

💡 Tips

Step 1 — Creating the repository on GitHub

Step 2 — Installing React with Vite

Step 3 — Installing Dependencies

Step 4 — Running the Project

Step 5 — Installing Additional Libraries (Tailwind CSS)

Created Project Structure

💡 Important Tips

To recap what was done:

🔗 Useful Links

How to Study Machine Learning with Two Variables

Introduction

Introduction

Setting Thresholds

Exploring Quadrants and Decision Trees

Google Colab and Excalidraw

Conclusion

Contacts

React Native Offline First Starter Pack: The Essential Toolkit

📦 The Core Toolkit: Dependencies at a Glance

🏗️ Why is this a Fullstack starter pack?

⚡ Code Skeleton (App.tsx)

⚡ Code Skeleton (`App.tsx`)