DEV Community: Wonder2210

My first AI Agent

Wonder2210 — Tue, 14 Oct 2025 01:53:14 +0000

Just wrapped up building "Appointments Agent", a small AI that can edit my calendar.

For now (V1) it only touches events marked as Available ✅ — so my real meetings stay safe.

Tech stack ⚡:
🧩 Pydantic AI → structuring the agents
🔗 LangGraph → running the workflow across the graph
🤖 Claude 3.7 Sonnet → main model (fast!)
🧠 DeepSeek → also tested, super solid but slower than Claude for this use case

👉 Open to feedback and ideas — would love to hear what you think!

You can found the source code here

Building My Own Solution: How a VSC Extension Fixed My Git Workflow

Wonder2210 — Fri, 16 May 2025 05:32:43 +0000

As developers, we're conditioned to reuse rather than reinvent. We instinctively reach for libraries, plugins, Stack Overflow answers, or AI before considering whether we should—or could—build our own solution. I was no different.

One of my regular workflows involved editing a configuration file exclusively for development purposes. As changes accumulated, I kept accidentally committing that file along with my actual work. The manual process—dropping to the terminal, carefully staging the right files over and over—became tedious. Like many of us, I kept thinking, "Someone must have built a better way."

But no one had—at least, not the way I needed it.

So I built it myself.

This post isn't just about writing a VSC extension—it's about why solving your own problems first is one of the most valuable habits a developer can cultivate.

The Problem

Working with Git presented me with two frustrating options when handling specific files:

Precise manual staging: Carefully selecting individual files to stash or commit
Error-prone workarounds: Manually copying changes, resetting, and reapplying changes

I searched for existing extensions, but none offered the simple, one-click solution I needed.

The Realization

Instead of waiting for someone else to solve my problem, I asked myself:

Why not build it myself?
What's actually stopping me?

The answer? Nothing but my own habits and assumptions.

The Process

My initial assumption: "Building a VSCode extension must be complicated." After some research, I discovered it's more accessible than most developers think.

The official VSCode extension guide provides everything you need, complete with practical examples.

For Git integration, I found simple-git, a perfect npm package for my needs.

My development approach:

Define the workflow: Shortcut-based or UI button?
Build a basic prototype: Core functionality first
Iterate and refine: Add features gradually

"Reading docs teaches you how to use tools. Building them teaches you how they work."

The Unexpected Wins

Building this small tool provided benefits I hadn't anticipated:

Deeper Git understanding: I now truly grasp how stashes work
Transferable skills: Applicable to other VSC automation
Conversation starter: Colleagues asked about the solution
Mindset shift: Now I first ask "Can I automate this?"

Conclusion

Should you always build instead of reuse? Of course not—that wouldn't be time-efficient. But when you:

Want deeper understanding
Have some free time
Need a perfect-fit solution

...building your own tool can be incredibly rewarding.

Next time you face a workflow annoyance, ask yourself:

How would I solve this if no existing tools existed?
What's the simplest version I could build today?

You might surprise yourself with what you can create.

Try the extension:

Git File Stash on VSC Marketplace

Contribute or fork:

GitHub Repository

Build forms using React-Hook-Form and ChakraUi

Wonder2210 — Tue, 24 May 2022 04:01:46 +0000

Once of the common tasks as a react developer you will encounter is, build forms

That means that if you wanna do it the proper way you have to validate the fields, handle the state of the fields , errors, types etc, things will get complex

And as you introduce more complexity to your forms the more difficult develop will be, This is where React-Hook-Form kicks in

Tools we are going to use :

Node (version 16 or greater)
Yarn

Set Up:

We are going to be using create react app for this project, but whichever frontend react tooling you like is good to go

initialize your project with :
yarn create react-app rhf-tut
then:
cd rhf-tut

Install dependencies:

Chakra Ui:
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
React Hook form + Yup:
yarn add react-hook-form @hookform/resolvers yup

Usage of the React hook form:

Basically we import the useForm hook from react-hook-form, this hook will return us, some functions like

register:this 'register' each of the inputs will use , it basically returns props needed to control the input)
handleSubmit: This function is going to be passed to the onSubmit of the form, and it will have as parameter a function that will get the data of our form
formState: It will held the state of our form , values like the errors, if the form was successFully submitted , or if the form is dirty

There is some other functions that we will be using later, but basically these are the most commonly used

import { useForm } from "react-hook-form";

const UserForm = () => {
  const {register, handleSubmit, formState: { errors }} = useForm();
  return (
    // Inputs code here
  );
};

export default UserForm;

Text Inputs:

As i told before, register function is meant to 'register' our inputs, so let's import Input from chakra-ui and pass down on props {...register('textInput')} using as argument of register the name for our input :

import { Input } from '@chakra-ui/react';
import { useForm } from "react-hook-form";

const UserForm = () => {
  const {register, handleSubmit, formState: { errors }} = useForm();
  return (
    <Input {...register('textInput')} />
  );
};

export default UserForm;

Radio Inputs:

For radio inputs , we are going to do something a little bit different, since the RadioGroup component of chakra-ui (which is the one that handles the onChange and value ) is not an input so , if we use the register function won't work , we'll have to use the <Controller /> component from react-hook-form that gives us a little bit more control over our inputs

import { Radio, RadioGroup, Stack } from '@chakra-ui/react';
import { useForm, Controller } from "react-hook-form";

const UserForm = () => {
  const {register, handleSubmit, formState: { errors }, control} = useForm();
  return (
    <Controller
          name="radio"
          control={control}
          render={({ field: { onChange, value } }) => (
            <RadioGroup onChange={onChange} value={value}>
              <Stack direction="row">
                <Radio value="1">First</Radio>
                <Radio value="2">Second</Radio>
                <Radio value="3">Third</Radio>
              </Stack>
            </RadioGroup>
          )}
        />
  );
};

export default UserForm;

Checkbox Inputs:

For checkbox we can use the register function as we do with normal text input but this time adding the value attribute , as you can notice this time we use the register function passing the same name.

import { Radio, RadioGroup, Stack } from '@chakra-ui/react';
import { useForm, Controller } from "react-hook-form";

const UserForm = () => {
  const {register, handleSubmit, formState: { errors }, control} = useForm();
  return (
 <FormControl>
        <FormLabel>Choose many</FormLabel>
        <Stack direction="row">
          <Checkbox value="1" {...register('multiple')} >
            Here
          </Checkbox>
          <Checkbox value="2" {...register('multiple')} >
            Here
          </Checkbox>
        </Stack>
      </FormControl>
  );
};

export default UserForm;

Handling submit

Now comes the time we need to get the data from our form to send it to our backend or any other action we would like to do with the data of our form,

const UserForm = () => {
  const {register, handleSubmit, formState: { errors }} = useForm();
  const onSubmit = (formData) => apiCallToSaveData(formData);
  const onInvalid = () => alert('This form is invalid try again'); 
  return (
    <VStack
      as="form"
      minWidth="30%"
      bgColor="#FFF"
      padding="2em"
      borderRadius="12px"
      shadow="md"
      mt="4em"
      onSubmit={handleSubmit(onSubmit, onInvalid)}
    >
      // here some inputs
    </VStack>

  );
};

handleSubmit will take our onSubmit function and optionally onInvalid function as parameters , it will pass to onSubmit all the data in our form , and onInvalid , will be executed just in case our form is invalid, that's our next topic

Validation

To verify the data in our form with react hook form we are going to use Yup, an awesome tool for schema validation , this is my favorite approach, and one of the things i love the most of React hook form, because you just have to describe the way your data looks, with its types, if it is required or not, length, etc

We define our schema of types:

import * as yup from "yup";
const formSchema = yup
  .object({
    name: yup.string(),
    email: yup
      .string()
      .email("Please introduce a valid email")
      .required("Email is required"),
    phoneNumber: yup
      .string()
      .matches(phoneRegExp, "It doesn't seem to be a phone number")
      .length(11, "Phone number is too short"),
    multiple: yup
      .array()
      .of(yup.string())
      .ensure()
      .compact()
      .min(1, "I bet you like one of those").required(),
    radio: yup.string(),
  })
  .required();

as you can see we pass a string as parameter on some functions inside the schema, like in required or email, that's the text we are going to display in case that The data in our form doesn't match that property of our schema,
And add it to RHF :

import { yupResolver } from "@hookform/resolvers/yup";
...
const {
    register,
    handleSubmit,
    formState: { errors },
    control,
  } = useForm({
    resolver: yupResolver(formSchema),
  });

Display errors:

As you can notice above we are getting errors from formState, this will have the errors found in the form, we can access to them using the same name we assigned to the input, we are going to add a proper error info to our form like this:

....
<FormControl isInvalid={errors?.email}>
        <FormLabel htmlFor="email">Email address</FormLabel>
        <Input type="text" {...register("email")} />
        {errors?.email ? (
          <FormErrorMessage>
            {errors.email.message}
          </FormErrorMessage>
        ) : (
          <FormHelperText>We'll never share your email.</FormHelperText>
        )}
      </FormControl>
.....

the message will be the one defined on our schema (For me that's so awesome, i love it), and if you need the type of the error, just error.email.type(it will depend on the schema of yup), in case you need to execute a different action than show the error message while error

Thanks for reading,i hope it's useful for you, you can leave any suggestion or doubt about it in the comments box below 👇, also you can find the Code used for this Post here

Next.js + Storybook + Typescript : 2021 guide

Wonder2210 — Thu, 04 Mar 2021 15:59:35 +0000

The first post that I have ever done was about this topic, it was one year ago, and many things have changed since that, and due to that this is a common toolkit, widely adopted for many developers and work teams, here is a little guide step by step updated to set up your project with next.js + storybook + typescript successfully

Initialize project:

create our folder and initialize the project with yarn:

mkdir nextstorybook
cd ./nextstorybook
yarn init -yes

let's install the main packages for our project:

yarn add next react react-dom

Set Up Next.js with typescript

We'll need to create a "/pages" folder where we are going to hold our pages starting with index.tsx and add tsconfig.json

mkdir /pages
touch ./pages/index.tsx
touch tsconfig.json

and to our package.json

...
 "scripts":{
       "dev": "next",
    "start": "next start",
    "build": "next build"
  },
...

and we need to install Typescript and the types needed to run next.js with

yarn add --dev typescript @types/react @types/node

fill your index.tsx with the following code:

const Index = ()=>( <h1>Here i am</h1> );
export default Index;

now you can run

yarn run dev

And we have next.js working with Typescript

Storybook

if you have used before Storybook you should know that use typescript is not so easy ( well it doesn't use to be so easy ) , that chnged with Storybook 6.0’s , now the support to typescript is built-in with just run

npx sb init

At this point, we are all done

Using storybook:

until here we have everything set up and ready to start now you just have to run yarn run storybook and you should see something like

Some useful tips

Documentation 📄 :

If you are developing an Ui library or a larger set of component shared across a wide team, this would help you, now with storybook you can write the documentation for your components using MDX this helps to understand it better more info here

Using Theme Providers 🎨 :

if you are using a library like MaterialUI, ChakraUI, or any other that requires the use of a provider ( or decorator ) on top of your app, that code goes here on ./storybook/preview.js

import React from 'react';

export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];

Use custom font family 🔠:

To use the font of your choose, create in ./storybook a file named preview-head.html and put inside your font links:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

Serving static files 📁:

to serve the files that you need from a specific folder you have to update the storybook script on package.json
From:

...
"storybook": "start-storybook -p 6006",
...

To:

"storybook": "start-storybook -s ./path_of_your_folder -p 6006",

Naming and hirearchy

To sort your components in folders like structure you have to set in your stories file

export default {
  title: 'Main class of components/Subtype/Components',
};

export default {
  title: 'Component type/Component',
};

I hope this post is useful for you if you have any other suggestion for the usage of storybook or the post or any doubt about it feel free to leave it in the comments below, you can also follow me here and in my twitter, any doubt feel free to ask 👋

Generating PDF files using Next.js

Wonder2210 — Sun, 13 Dec 2020 02:50:55 +0000

Next.js is a framework based on React, it´s quite popular lately, thanks to some awesome features, like SSR, SSG... some advantages over react vanilla. A common task to do in web development generates PDF´s maybe you need to show some extra info or generate reports of some dynamically generated data, there are many use cases for it, in one of my last projects, I´ve been figuring out how to do it directly from next.js, and today I´m gonna show you how you can do it too.

Set Up

First, we need to initialize our project as we would do usually using next.js but adding the library to generate pdf's jsPDF

mkdir next-pdf
cd ./next-pdf
yarn init --yes
yarn add react react-dom next js-pdf normalize.css

PS:normalize.css is optional but useful, makes browsers render all elements more consistently, is highly suggested.

Now edit your package.json and add the next lines

...
"scripts": {
    "dev": "next",
    "start": "next start",
    "build": "next build",
  },
...

and run

mkdir pages

pages/index.js

const app =()=>(<h1>Hello world</h1>);

export default app;

with this setup is enough to start, but if you like to use typescript everywhere (like me haha) you can use the next lines to use it.

touch tsconfig.json
yarn add --dev @types/react @types/node @types/jspdf typescript

rename index.js to index.tsx and finally run

yarn run dev

Ok Let's go for it

we´ll create a folder named src where gonna be placed our component to generate PDF´s and our styles, and our scaffolding will looks like this

/src/
   /components/
       GeneratePDF.tsx
   /styles/
       styles.css
/pages/
   index.tsx
   _app.tsx

let's add global styles to our app, this is made on _app.tsx, importing styles.css and normalize.css:

import * as React from "react";
import "normalize.css"
import "../src/styles/styles.css";

const MyApp = ({ Component, pageProps }) => {
  return (
    <Component {...pageProps} />
  );
};

export default MyApp;

our styles/styles.css

.content{
    display:flex;
    align-items: center;
    flex-direction: column;
}

.main  > .content > p, h1{
    font-family: sans-serif;

}

.main > .content > p{
    font-size: 1.7em;
    text-align: justify;
    width:80%;
}

.main  button{
    display: block;
    cursor: pointer;
    background-color: crimson;
    color: white;
    font-size: 1.5em;
    font-family: sans-serif;
    width:8em;
    height: 3em;
    font-weight: 500;
    border-radius: 5px;
    border-color: transparent;
    margin:0 auto 0 auto;
}

.main .button-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

now our main components
/src/components/GeneratePDF.tsx

import React from "react";
import { jsPDF,HTMLOptionImage } from "jspdf";
import { toPng,toCanvas } from "html-to-image";
type props = {

  html?: React.MutableRefObject<HTMLDivElement>;

};

const GeneratePdf: React.FC<props> = ({ html }) => {
  const generatePdf = () => {
      const doc = new jsPDF();

      let split=doc.splitTextToSize(document.getElementById("text").innerText,200);
      let image = document.getElementById("image").getAttribute('src');
      doc.text(document.querySelector(".content > h1").innerHTML,75,5);
      doc.addImage(image,70,7,60,60);
      doc.text(split,5,75);
      doc.output("dataurlnewwindow");  

  };

  const generateImage=async ()=>{
    const image = await toPng(html.current,{quality:0.95});
    const doc = new jsPDF();

      doc.addImage(image,'JPEG',5,22,200,160);
      doc.save();


  }
  return (

    <div className="button-container">
        <button onClick={generateImage}>
        Get PDF using image
      </button>
      <button onClick={generatePdf}>
        Get PDF as text
      </button>
    </div>

  );
};

export default GeneratePdf;

explanation = we are creating 2 buttons to generate 2 pdf's with the same content but using 2 different approaches, generateImage will generate a image from our HTML , and we will put it inside a pdf , and generatePdf just create the pdf, taking the content from our Dom, all of them have their advantages and their disadvantages

Using Image:

Advantages

✅ the result is exactly like on your page
✅ easy to set up

Disadvantages

❌ Slow to generate
❌ the pdf file weight is relatively high
❌ you can't copy and paste the content(if it matters for you)

Using Content from the dom:

Advantages

✅ Lightweight file size
✅ Fast Generation
✅ The text is selectable

Disadvantages

❌ is not so easy to set up everything in their own place

let's continue with pages/index.tsx

import * as React from "react";
import Image from "next/image";
import dynamic from "next/dynamic";
const GeneratePDF = dynamic(()=>import("./../src/components/GeneratePDF"),{ssr:false});
const app =()=>{
        const ref = React.useRef();

        return(<div className="main">
        <div className="content" ref={ref}>
        <h1>Hello PDF</h1>
        <img id="image" src="/images/image_header.jpg" width="300" height="200"/>
        <p id="text">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam animi, molestiae quaerat assumenda neque culpa ab aliquam facilis eos nesciunt! Voluptatibus eligendi vero amet dolorem omnis provident beatae nihil earum!
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, est. Magni animi fugit voluptates mollitia officia libero in. Voluptatibus nisi assumenda accusamus deserunt sunt quidem in, ab perspiciatis ad rem.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil accusantium reprehenderit, quasi dolorum deserunt, nisi dolores quae officiis odio vel natus! Pariatur enim culpa velit consequatur sapiente natus dicta alias!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, asperiores error laudantium corporis sunt earum incidunt expedita quo quidem delectus fugiat facilis quia impedit sit magni quibusdam ipsam reiciendis quaerat!
        </p>
        </div>
        <GeneratePDF html={ref}/>
        </div>);
}

export default app;

Explanation

As we can see is another component made with react ... well not at all, as you can see we are using dynamic from next

import dynamic from "next/dynamic";
const GeneratePDF = dynamic(()=>import("./../src/components/GeneratePDF"),{ssr:false});

with this we are importing the component dynamically (basically only when is required) and we are deactivating the SSR (Server side rendering) because jsPDF requires to be initialized on the browser, otherwise, we would catch an error from it.

now you can generate PDF's from your next app, there are many approaches you can use for example auto generate tables

Thanks for reading

If you have any question, or suggestion please, leave a comment below, and please follow me here and also on my twitter take care 👍

Integration Tests with GraphQL

Wonder2210 — Wed, 14 Oct 2020 16:57:49 +0000

In the lasts years, GraphQL becomes in one of the preferred alternatives to REST architectures, and its popularity is growing up day to day due to its many advantages for the developers request just the data they need.

Testing is the process to evaluate the functionality of a software application with an intent to find issues or defects in our software or according to ANSI/IEEE 1059 standard – A process of analyzing a software item to detect the differences between existing and required conditions (i.e., defects) and to evaluate the features of the software item.

Testing is crucial for the success of your project, to ensure the quality of your code and identify issues on it before it would go to production because otherwise your code would break in any moment and give you headaches at midnight of Friday 😱 , the best way to be sure that it won't happen is testing, it'll give you the confidence that your code is working as you expected and free of issues.

There are some types of automated test, Unit test, Integration, End to end, testing types ... today we are just going to focus on Integration, which is in a midway between end to end, and unit test, it doesn't run as fast as unit tests, but it will give you more confidence than unit tests and will run faster than end to end testing

Set up

for this post we are going to use the GraphQL API from one of my lasts post if you already have it, it's ok, otherwise, you can clone it

Dependencies

git clone https://github.com/Wonder2210/graphql-typescript-pg-server.git

and checkout to the commit before the tests

git checkout bdcf9de8b42ce81eaa2d11683be1e399e030b7ed

then we need to install these packages

yarn add -D jest @jagi/jest-transform-graphql ts-jest apollo-graphql-test knex-cleaner

we'll use Jest as our test runner and apollo-graphql-test to test our queries, it creates a client to execute it and knex-cleaner to clean the database once we run all the tests, with we'll be sure that every time we run the tests we'll have the same result or in other words, the tests are replicable.

Note*: knex-cleaner doesn't have support for typescript so we have to add the following line to index.d.ts

declare module "knex-cleaner"

Jest set up

first of all, we need a folder to store our tests and everything need it to run it

mkdir /src/__tests__
mkdir /src/__tests__/utils

Jest need a configuration to know which files it's going to run, where are they, and how to handle some files like our schema.gql

module.exports = {
  testPathIgnorePatterns: ["/node_modules"],
  testMatch:  ["**/?(*.)+(spec|test).[jt]s?(x)"],
  transform: {
    "^.+\\.(j|t)sx?$": ["ts-jest"],
    "\\.(gql|graphql)$": ["@jagi/jest-transform-graphql"],
  },
  moduleFileExtensions: ["ts", "tsx", "js", "gql"],
};

in this case, we are specifying the files to test with testMatch this indicates that will run every file with .test.ts or jsx or tsx ... and how will process some files, due that jest is native for javascript we need to transform our ts files (with ts-jest), and the .gql or .graphql files (with @jagi/jest-transform-graphql)

and we are going to add the following line to package.json

...
"scripts":{
    ...
    "test:integration":"jest /src -c  jest.config.js --forceExit"
    ...
}
...

Database

We are going to use a database for our tests, you can use your development database but is better a database just for these tasks
and insert some data in our test database, for that we'll use the seeds from Knex, which is an automatized/programmatically way of insert data in your database

// src/database/seeds/baseSeed.js
exports.seed = function (knex) {
  // Deletes ALL existing entries
  return knex("users")
    .del()
    .then(function () {
      // Inserts seed entries
      return knex("users").insert([
        {  full_name: "luis", country_code: 58 },
        {  full_name: "jose", country_code: 59 },
        {  full_name: "raul", country_code: 39 },
      ]);
    })
    .then(() => {
      return knex("pets")
        .del()
        .then(function () {
          // Inserts seed entries
          return knex("pets").insert([
            { name: "spot", owner_id: 1, specie: "MAMMALS" },
            { name: "chief", owner_id: 2, specie: "MAMMALS" },
            { name: "king", owner_id: 3, specie: "MAMMALS" },
          ]);
        });
    });
};

Also, we need to add the unsigned attribute to the owner_id field of pet, and our migration to create the pets table will look like

/migrations/initial_migration.ts
...
.createTable("pets", (table: Knex.CreateTableBuilder) => {
      table.increments("id");
      table.string("name");
      table.integer("owner_id").references("users.id").unsigned().onDelete("CASCADE");
      table.string("specie");
      table.timestamps(true, true);
    });
...

now we are going to add the following line to package.json top run the seeds

...
"scripts":{
    ...
"test:migrate:up": "knex --knexfile ./src/database/knexfile.ts migrate:latest --env testing",
   "test:seed-db": "knex --knexfile ./src/database/knexfile.ts seed:run --env testing"
    ...
}
...

if you need it here is a template to write your own seeds

Test server

to test we need a server to serve our queries

// /src/__tests__/utils.server.ts
import { ApolloServer, Config } from "apollo-server-express";
import Knex from "knex";
import { Model } from "objection";
import dbconfig from "../../database/config";
import DataLoader from "dataloader";
import schema from "../../schema";
import { Pets, Users } from "../../utils/loaders";
import dbCleaner from "knex-cleaner";

const db = Knex(dbconfig["testing"]);
export const startDb = () => {

  Model.knex(db);
};

export const stopDB = () => {
  Model.knex().destroy();
};

export const cleanDb= async ()=>{
  const options = {
    mode: 'truncate', 
    restartIdentity: true, 
  }
 return await dbCleaner.clean(db,options);
}

const config: Config = {
  schema: schema,
  context: {
    loaders: {
      users: new DataLoader(Users),
      pets: new DataLoader(Pets),
    },
  },
};

export const server: () => ApolloServer = () => new ApolloServer(config);

Queries

Graphql use queries to retrieve data, so this is what we are gonna need to test it, Queries, this is something that you already use in GraphQl playground, but now we need those in a file to be used in our automated tests like that :

/__tests__/utils/queries.ts
import gql from "graphql-tag";

export const GET_USERS = gql`
  query getUsers {
    users {
      id
      full_name
      country_code
    }
  }
`;

export const GET_USERS_AND_PETS = gql`
  query getUsersAndItsPets {
    users {
      id
      full_name
      country_code
      pets {
        id
        name
        specie
      }
    }
  }
`;

export const GET_PETS = gql`
  query getPets {
    pets {
      id
      name
      owner_id
      specie
    }
  }
`;

export const CREATE_USER = gql`
  mutation CreateUser($name: String!, $country_code: String!) {
    createUser(user: { full_name: $name, country_code: $country_code }) {
      id
      full_name
      country_code
    }
  }
`;
export const CREATE_PET = gql`
  mutation CreatePet($name: String!, $owner_id: Int!, $specie: Species!) {
    createPet(pet: { name: $name, owner_id: $owner_id, specie: $specie }) {
      id
      name
      specie
    }
  }
`;

export const DELETE_PET = gql`
  mutation DeletePet($id: Int!) {
    deletePet(id: $id) {
      String
    }
  }
`;

export const DELETE_USER = gql`
  mutation DeleteUser($id: Int!) {
    deleteUser(id: $id)
  }
`;

export const UPDATE_USER = gql`
  mutation UpdateUser($id: Int!, $name: String, $country_code: String) {
    updateUser(
      user: { id: $id, full_name: $name, country_code: $country_code }
    ) {
      id
      full_name
      country_code
    }
  }
`;

export const UPDATE_PET = gql`
  mutation UpdatePet($id: Int!, $name: String!) {
    updatePet(pet: { id: $id, name: $name }) {
      id
      name
      owner_id
    }
  }
`;

as can you see there is all (well almost ) the queries we use in our API

now we need a client to execute them.

Client

for the client, we'll be using apollo-server-testing, it will create a 'client' to let us execute our queries in the server

Let's write tests 😄

in this case, we are not going to test if field A contains B, well no exactly, we are going to use snapshots, with that we capture the result of our queries, and with it, we can just review the results from the server, and check if they are OK or if something went broke when we are doing snapshot testing the test will be successful if match with the last snap, so if you add a new feature or your data has changed you'll have to update it the snapshots or the test will fail.
first of all, we import our queries and libraries needed and set up the actions to be realized before and after the execution of the tests

import { server, startDb, cleanDb } from "./utils/server";
import { createTestClient } from "apollo-server-testing";
import {
  GET_USERS,
  GET_PETS,
  GET_USERS_AND_PETS,
  CREATE_USER,
  CREATE_PET,
  UPDATE_USER,
  DELETE_USER,
} from "./utils/queries";

beforeAll(() => {
  return startDb(); // here we are starting the database before the tests run
});
afterAll(()=>{
  return cleanDb(); // with that we are cleaning the database after all the tests have been executed
})

and now our tests will be like :



test("query users", async () => {
  const serverTest = server();// start our tests server
  const { query } = createTestClient(serverTest); // start our client passing our server as parameter and taking the query function from it

  const res = await query({ query: GET_USERS });// we execute our query

  expect(res).toMatchSnapshot();// we get the result and create or compare the snapshot 
});

our whole tests will look like :

//  /src/__tests__/integration.test.ts
import { server, startDb, cleanDb } from "./utils/server";
import { createTestClient } from "apollo-server-testing";
import {
  GET_USERS,
  GET_PETS,
  GET_USERS_AND_PETS,
  CREATE_USER,
  CREATE_PET,
  UPDATE_USER,
  DELETE_USER,
} from "./utils/queries";

beforeAll(() => {
  return startDb(); // here we are starting the database before every test run
});
afterAll(()=>{
  return cleanDb(); // with that we are cleaning our database after all the tests have run 
})

test("query users", async () => {
  const serverTest = server();
  const { query } = createTestClient(serverTest);

  const res = await query({ query: GET_USERS });

  expect(res).toMatchSnapshot();
});

test("query pets", async () => {
  const serverTest = server();
  const { query } = createTestClient(serverTest);

  const res = await query({ query: GET_PETS });

  expect(res).toMatchSnapshot();
});

test("query users and its pets", async () => {
  const serverTest = server();
  const { query } = createTestClient(serverTest);

  const res = await query({ query: GET_USERS_AND_PETS });

  expect(res).toMatchSnapshot();
});

test("create user ", async () => {
  const serverTest = server();
  const { mutate } = createTestClient(serverTest);

  const res = await mutate({
    mutation: CREATE_USER,
    variables: {
      name: "Wonder",
      country_code: "ve",
    },
  });

  expect(res).toMatchSnapshot();
});

test("create pet", async () => {
  const serverTest = server();
  const { mutate } = createTestClient(serverTest);

  const res = await mutate({
    mutation: CREATE_PET,
    variables: {
      name: "Optimus",
      owner_id: 1,
      specie: "MAMMALS",
    },
  });

  expect(res).toMatchSnapshot();
});

test("update user", async () => {
  const serverTest = server();
  const { mutate } = createTestClient(serverTest);

  const res = await mutate({
    mutation: UPDATE_USER,
    variables: {
      id: 1,
      name: "wilson",
    },
  });

  expect(res).toMatchSnapshot();
});

test("delete user", async () => {
  const serverTest = server();
  const { mutate } = createTestClient(serverTest);

  const res = await mutate({
    mutation: DELETE_USER,
    variables: {
      id: 2,
    },
  });

  expect(res).toMatchSnapshot();
});

So finally that's what we are going to do to execute our tests for the first time

1) yarn run test:migrate:up to generate the tables

2) yarn run test:seed-db to fill with data the database

3) yarn run test:integration to run our tests

Now to run it for the second time we need to run

1) yarn run test:seed-db

2) yarn run test:integration

and you'll have an output like this

Thanks for reading , please follow me here and on twitter 😉, any doubt , suggestion, or correction please let me know in a comment below 😊

Solving N + 1 problem with GraphQL, TypeScript, and PostgresQL

Wonder2210 — Tue, 23 Jun 2020 20:23:25 +0000

One of the common problems that most of the developers face with graphql, is the N + 1 problem, it means that the server executes multiple unnecessary round trips to datastores for nested data, resulting in slow response times and expensive requests

For Example

graphql
query{
users{

id,
full_name,
pets{
name
}
}
}

in the query above, will be executed 1 query to the database to the datastore get the users and for each user another extra query for each user to fetch its pets (N queries for N users) resulting in N + 1.

Now What to do?

to solve this problem the Graphql team in Facebook created Dataloader
wich batch our data, AKA: request all the data from the database, at the start of the server, and when we are going to request one item, all that we do is pass down the identifier of the item and execute a search inside the array of data, which is a lot faster than execute a query to the database every time is made a request because is retrieving data from memory not datastore

Once this is clarified let's puts our hands on

for this post I'll be using the API example I use for my last post after clone into your PC the repo and install everything
run:

bash
yarn add dataloader

</code>  

create the following folder and file

  ...
     src/
        utils/
           loaders.ts  
  ...


and in uutils/loaders.ts

import {BatchLoadFn} from 'dataloader';
import {Pet,User} from '../database/models';



export const Pets : BatchLoadFn<number,Array<Pet>>= async (ids)=>{
    const pets= await Pet.query();

    return ids.map(i=>pets.filter(item=> item.id===i))

};

export const Users : BatchLoadFn<number,Array<User>> = async (ids)=>{
    const users = await User.query();

    return ids.map(id=> users.filter(i=> i.id===id));
}

the way it will be used in our resolvers is through the context :
src/index.ts

typescript
...
import DataLoader from 'dataloader';
import {Pets,Users} from './utils/loaders';
...

...
const config : Config = {
schema:schema,
introspection: true,//these lines are required to use the gui
playground: true,// of playground
context:{
loaders:{
users: new DataLoader(Users),
pets: new DataLoader(Pets),
}
}

}
...

now in your resolvers instead of using a query to get the data nested
you use the loaders passed down through the context and using the id to find the match in the loaders

And we can appreciate an increase of performance in the response

Thank's for read it , if you have any suggestion for me I would love to know it, leave it below in the comments box, if you liked it , please follow me here and also on twitter, Thanks! take care!

GraphQL + TypeScript + PostgreSQL API

Wonder2210 — Mon, 08 Jun 2020 01:53:41 +0000

Introduction

In the current year, one of the most popular stacks is GraphQl and Typescript (and for a while, I think). I started recently a new project, using this stack, I did some GraphQL API's using good Vanilla Javascript before, but even I'm using Typescript for few times. I've never used it for this purpose but I didn't find a tutorial who fits with my requirements, I get it done, then I ask to my self. Why not do a guide?. Here we go

before we are starting :

Why GraphQL ?:

GraphQL provides a complete description of the data in your API, giving clients the power to ask for exactly what they need and nothing more when you have to deal with a great amount of data this is a very nice choice, you can have all the data required with just Running one Query.

Why typescript? :

Typescript is a superset of Javascript that compiles to plain JavaScript.
As JavaScript code grows it gets messier to maintain and reuse, and don't have strong type checking and compile-time error checks, that's where Typescript comes in

Why PostgreSQL?

PostgreSQL is a personal preference, is widely used, open-source, and has a great community, but I'm not going to go deep about it, You can read more about why use it here

Prerequisites

yarn you can use NPM no matter
node: v.10 or superior
postgresql = 12
some typescript knowledge

1) Folder Structure

This is how's going to be structured the project

   graphql_api/
       ...
        dist/
          bundle.js
        src/
         database/
              knexfile.ts
              config.ts
              migrations/
              models/
                User.ts
                Pet.ts
          __generated__/
          schema/
              resolvers/
                  user.ts
                  pet.ts
                  index.ts

              graphql/
                  schema.ts
              index.ts/
          index.ts

2) Main Dependencies

Apollo server: Apollo Server is a community-maintained open-source GraphQL server. It works with pretty much all Node.js HTTP server frameworks
Objection: i used to use sequelize but i really like objection.js because it is an ORM that embraces SQL

Development
Webpack : webpack is used to compile JavaScript modules, node.js by its own doesn't accept files .gql or .graphql , that's where webpack comes in

First, we are going to install

yarn add graphql apollo-server-express express body-parser objection pg knex

and some dev dependencies

yarn add -D typescript @types/graphql @types/express @types/node  graphql-tag concurrently nodemon ts-node webpack webpack-cli webpack-node-external

3) Configurations

tsconfig

Webpack

4) Hello World

Add the next scripts to your package.json

json
"scripts":{
"dev": "concurrently \" nodemon ./dist/bundle.js \" \" webpack --watch\" "
}

index.ts

5) Server config

For this project we are gone to use , Executable schema from graphql-tools wich allow us to generate a GraphQLSchema instance from GraphQL schema language beside this you can also combine types and resolvers from multiple files

src/index.ts

typescript
...
const config : Config = {
schema:schema,// schema definition from schema/index.ts
introspection: true,//these lines are required to use

playground: true,// playground

}

const server : ApolloServer = new ApolloServer(config);

server.applyMiddleware({
app,
path: '/graphql'
});
...

schema/index.ts

typescript
import { makeExecutableSchema} from 'graphql-tools';
import schema from './graphql/schema.gql';
import {user,pet} from './resolvers';

const resolvers=[user,pet];

export default makeExecutableSchema({typeDefs:schema, resolvers: resolvers as any});

6) Database

Now we will be working based in the next database diagram, It will be just a register of Users and their pets.

Migration file
For creating the database in Postgres , we'll be using the migrations of knex

and generate the first migration running:

bash
npx knex --knexfile ./src/database/knexfile.ts migrate:make -x ts initial

And your migration file should look's like this

Then run the migration

bash
npx knex --knexfile ./src/database/knexfile.ts migrate:latest

Now we have two tables then we need the models for each table to start executing queries
src/database/models:

then we need to instantiate Knex and give the instance to Objection

typescript

import dbconfig from './database/config';
const db = Knex(dbconfig["development"]);

Model.knex(db);

7) Schema

8) generating types

we need the following packages for better type safeting the resolvers :

bash
yarn add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/
typescript-resolvers @graphql-codegen/typescript-operations

create the config file for generate types :

/codegen.yml

yml
overwrite: true
schema: "http://localhost:3000/graphql"
documents: null
generates:
src/generated/generated-types.ts:
config:
mappers:
User:'./src/database/User.ts'
UpdateUserInput:'./src/database/User.ts'
Pet:'./src/database/Pet.ts'
plugins:
- "typescript"
- "typescript-resolvers"

add the follow script to packages.json :

json
...
"generate:types": "graphql-codegen --config codegen.yml"
...

once your server is up , then run :

bash
yarn run generate:types

if you want to go deep generating types from graphql you can read more about here, I highly suggest to do

9) resolvers

schema/resolvers/

Now you should be able to execute all the operations defined before

BONUS:

you can see two errors from typescript

it's not terrible at all, but I would prefer to don't have them

then

the first one I get it solved splitting knexfile.ts and put the configuration that is required for knex in a standalone file

And the second one, from the import of the schema , I get it solved with this useful post
and finally, you should have working your own graphql api

Conclusion

Congratulations ! Now you have a GraphQL API
if you get stucked at any of the steps here is the repo on github , In this tutorial we learned about, how to generate types for Typescript from graphql , solve some issues , I hope you enjoyed this post , if is it the case, please follow me here on DEV and also on twitter I'll be posting more often soon , if you have any suggestion for me I would love to know it , leave it below in the comments box ,Thanks!

NextJS + Typescript + Storybook guide 2020

Wonder2210 — Mon, 30 Mar 2020 23:11:23 +0000

In the last year of developing with react i tried many stacks and each one have a different case of use, nowadays i can say that this is my favorite Stack for React apps (without talk about any state management system ) and this is my steps to get it running

requirements:

node > v10
yarn

1. Initialize the Project

bash
mkdir my-app
cd my-app
yarn init -y
yarn add react react-dom next -S

create pages directory

bash
cd my-app
mkdir pages

and in youre package.json add these scripts

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

2. Add Typescript

In pages folder create index.tsx

typescript
import * as React from 'react';

const app = ()=>{
return(

Hello world

)
}
export default app;

and in project path create

bash
touch tsconfig.json

add these packages

bash
yarn add --dev typescript @types/react @types/node

then run

bash
yarn run dev

now we have typescript working with Next

3. Adding Storybook

Storybook is an amazing tool to test components in isolation , for react , vue , Angular ... Is pretty useful on any project , specially when you are using some design metodology as Atomic Design.
First we need to add.

bash
yarn add @storybook/react babel-loader @babel/core -D

create .storybook folder

bash
mkdir .storybook

storybook out of the box does'nt accept Typescript , before use it is needed add some configurations and packages

bash
yarn add awesome-typescript-loader react-docgen-typescript-loader -D

in /.storybook we are going to create his own tsconfig.json file

bash
cp ./tsconfig.json ./.storybook/

in this case we are going to copy and paste the tsconfig file from our project path and change the follow fields

json
...
"include": [
"../types.d.ts",
"../next-env.d.ts",
"..//*.stories.ts",
"..//*.stories.tsx"
]

then , create /.storybook/main.js

javascript
const path = require('path');
module.exports = {
stories: ['../components///*.stories.tsx'],
webpackFinal: async config => {
config.module.rules.push({
test: /.(ts|tsx)$/,
use: [
{
loader: require.resolve('awesome-typescript-loader'),
options:{
configFileName: path.resolve(dirname, './tsconfig.json')
}
},
// Optional
{
loader: require.resolve('react-docgen-typescript-loader'),
options:{
tsconfigPath: path.resolve(dirname, './tsconfig.json'),

            }
          },
        ],
      });
      config.resolve.extensions.push('.ts', '.tsx');
      return config;
    },
    };

add the script to package.json

json
{
"scripts": {
...,
"storybook": "start-storybook"
}
}

write a test history inside components/button/index.stories.tsx

typescript
import * as React from 'react';

export default { title: 'Button' };

export const withText = () => Hello Button;

export const withEmoji = () => (
Click me please
);

you should see this screen on your Browser

Thanks for read , this is my first post on DEV :) any question or suggestion Leave A Comment In The Comments Box
Thanks Again :D

DEV Community: Wonder2210

My first AI Agent

Building My Own Solution: How a VSC Extension Fixed My Git Workflow

The Problem

The Realization

The Process

The Unexpected Wins

Conclusion

Build forms using React-Hook-Form and ChakraUi

Tools we are going to use :

Set Up:

Install dependencies:

Usage of the React hook form:

Text Inputs:

Radio Inputs:

Checkbox Inputs:

Handling submit

Validation

Display errors:

Next.js + Storybook + Typescript : 2021 guide

Initialize project:

Set Up Next.js with typescript

Storybook

Using storybook:

Some useful tips

Documentation 📄 :

Using Theme Providers 🎨 :

Use custom font family 🔠:

Serving static files 📁:

Naming and hirearchy

Generating PDF files using Next.js

Set Up

Ok Let's go for it

Using Image:

Advantages

Disadvantages

Using Content from the dom:

Advantages

Disadvantages

Explanation

Thanks for reading

Integration Tests with GraphQL

Set up

Dependencies

Jest set up

Database

Test server

Queries

Client

Let's write tests 😄

Solving N + 1 problem with GraphQL, TypeScript, and PostgresQL

For Example

Now What to do?

GraphQL + TypeScript + PostgreSQL API

Introduction

Why GraphQL ?:

Why typescript? :

Why PostgreSQL?

Prerequisites

1) Folder Structure

2) Main Dependencies

Development

3) Configurations

4) Hello World

index.ts

5) Server config

6) Database

7) Schema

8) generating types

9) resolvers

Conclusion

NextJS + Typescript + Storybook guide 2020

1. Initialize the Project

2. Add Typescript

Hello world

3. Adding Storybook