Forem: Francielle Dellamora

How to Write a GraphQL Query

Francielle Dellamora — Sun, 29 Oct 2023 19:58:34 +0000

A beginner's guide to writing your first GraphQL query

Today, we will explore the basics of GraphQL and learn how to structure queries and retrieve data from a GraphQL API While no prior experience with GraphQL is required, having some familiarity with React and TypeScript will be helpful in understanding the concepts we'll cover. Whether you're a seasoned developer or a newbie like me, this guide will provide a comprehensive introduction to help you get started with writing GraphQL queries using Apollo Client.

I'll be sharing my tips and tricks along the way, and I hope that this article will be a valuable resource for anyone looking to learn about GraphQL. Feel free to explore the complete codebase in the GitHub repository.

Do you know what GraphQL is?

In short, GraphQL is an open-source query language that was developed with the aim of facilitating communication between client and server in web applications. It was created by Facebook in 2012 and quickly gained popularity among developers due to its innovative and efficient approach to fetching and manipulating data.

The great thing about GraphQL is that it allows for faster and more scalable web applications, with cool features such as intelligent caching, strong typing, querying for specific fields, multiple operations in a single request, and much more. As a result, we end up simplifying the code, making it easier to understand and maintain. And the best part? We save time because we don't have to write as much logic for fetching and manipulating data from scratch.

Understanding GraphQL queries

Basically, a GraphQL query allows clients to retrieve only the data they need and nothing more from a GraphQL API.

To write a GraphQL query, you need to specify the data you want to retrieve and the structure in which you want it to be returned. This is done using a query language that is similar to JSON, where you can specify which fields you want to retrieve, and any filters or sorting you need to use. Then, the GraphQL server uses that query to grab the data you requested and sends it back to you in a nice, tidy JSON format.

In this article, we will utilize the Rick and Morty API GraphQL playground to test. There, you can experiment with writing your own queries and seeing the data that comes back. It's a great way to get a feel for how GraphQL works and to see the benefits of being able to request exactly the data you need. So go ahead and give it a try - you might just have some fun while you're at it!

About how to use it, let's say we want to retrieve the name, gender, and status of all the characters from the Rick and Morty API.

We can write the following query:

query {
  characters {
    results {
      name
      gender
      status
    }
  }
}

In this query, we are using the query keyword to indicate that we want to retrieve data from the API. We then specify the name of the endpoint we want to query, in this case, characters. Finally, we specify the fields we want to retrieve, which are name, gender, and status.

The response from a GraphQL query is also structured in a JSON-like format.
Here is an example of what the response to our query might look like:

{
  "data": {
    "characters": {
      "results": [
        {
          "name": "Rick Sanchez",
          "gender": "Male",
          "status": "Alive"
        },js
        {
          "name": "Morty Smith",
          "gender": "Male",
          "status": "Alive"
        },
        ...
      ]
    }
  }
}

In this response, the data is returned in the same structure as our query. The data field contains the results of our query, which includes the characters field and the results subfield that contains an array of character objects, each with the name, gender, and status fields that we requested.

It's time to roll up your sleeves and get to work: Let's fetch a GraphQL query using Apollo Client.

The first thing to know is that Apollo Client is a powerful JavaScript library that helps you work with GraphQL APIs. It's not necessary to use Apollo Client to write a GraphQL query, but it can make your life a lot easier if you do.

One of the main benefits of using Apollo Client is that it abstracts away a lot of the low-level details of working with GraphQL APIs. It handles things like caching, network requests, and error handling, so you can focus on writing your application code instead of worrying about these details.

Step by step to starting a project:

Before everything, you need to create a React project with Typescript. I recommend using the T3 App template, which has excellent documentation and is simple to use. Simply run the following command: npm create t3-app@latest
After creating the project, install Apollo Client by running the following command: yarn add @apollo/client graphql
With the basic tools installed, organize the project architecture by following the steps below:

a. Create a folder named apollo inside the src folder of your project.

b. Create a file named index.tsx inside the apollo folder

c. Create a second folder named codegen inside the apollo folder. - We will see more about codegenlater. The project architecture should look similar to this:

src
└── apollo
|   └── codegen
|   └── index.tsx
└── ...

With the environment configured, it's finally time for some fun: Let's initialize our Apollo Client inside the index.tsx file:

a. To start let's import only the symbols we need from @apollo/client

import { ApolloClient, InMemoryCache } from "@apollo/client";

b. After that, we'll start our Apollo Client by configuring the uri and cache objects, passing only the data we'll be using. In this case, we'll use The Rick and Morty API, and for now, to not worry about the 'cache', we'll use only InMemoryCache.

export const apolloClient = new ApolloClient({
  uri: "https://rickandmortyapi.com/graphql",
  cache: new InMemoryCache()
});

uri indicates the URL of our GraphQL server.
cache is an instance of InMemoryCache, which stores query results retrieved by Apollo Client.

To be able to use Apollo in our React application, we need to wrap it in the Apollo Client as shown in the example below from the _app.tsx file:

import { type AppType } from "next/dist/shared/lib/utils";
import "@/styles/globals.css";
import { ApolloProvider } from "@apollo/client";
import { apolloClient } from "@/apollo";
import Head from "next/head";

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <ApolloProvider client={apolloClient}>
      <Head>
        <title>GraphQL and Morty</title>
      </Head>
      <Component {...pageProps} />;
    </ApolloProvider>
  );
};

export default MyApp;

This step is optional, but strongly recommended for TypeScript users. Anyway, we will use the GraphQL Code Generator to simplify the generation of API typings.

GraphQL Code Generator is a powerful tool that automates the process of generating type-safe code from your GraphQL schema. With just a few lines of configuration, you can generate code for your client-side application in a variety of languages, including TypeScript, JavaScript, and more.

a.First, to install the required packages you need to run the following command:yarn add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-resolvers. This will install the necessary dependencies for generating TypeScript code from your GraphQL schema.

b. Second, to initiate the configuration by running the command:Yarn graphql-codegen init. This will create a configuration file for you to customize and set up according to your needs.

c. Next, run the following command: yarn graphql-code-generator init

d. At Last, generate the code by running the command: yarn codegen. This will generate type-safe code for your client-side application based on the schema defined in your GraphQL API.

With these simple steps, you can automate the process of generating type-safe code from your GraphQL schema and enjoy the benefits of increased productivity and reduced potential for errors in your client-side application.

Now we can write our first GraphQL query

To query data from the Rick and Morty API, we can use a React Hook known as useQuery from Apollo Client. This function takes a GraphQL query defined using the gql tagged template literal as its argument.

You can get a better understanding by checking out the example below:

const result = useQuery<{ characters: Characters }>(
  gql`
    query Characters {
      characters {
        info {
          count
          next
        }
        results {
          created
          gender
          id
          image
          name
          species
          status
          type
        }
      }
    }
  `
);

Note that if you're using Visual Studio Code, I recommend downloading the Apollo GraphQL extension to make your query more readable.

The following example aims to fetch character information and display it in an infinite scroll list. To implement this, the $page parameter of type Int must be added to the GraphQL query and defined in the variables object passed as the second argument to the useQuery function

const result = useQuery<{ characters: Characters }>(
  gql`
    query Characters($page: Int) {
      characters(page: $page) {
        info {
          count
          next
        }
        results {
          ...
        }
      }
    }
  `,
  {
    variables: {
      page: 1,
    },
  },
);

The code above demonstrates that when the query is executed for the first time, the value $page is set to 1 in order to retrieve the first page of the results.

Successively, to create the infinite scroll logic, we'll create a state called isFetchingMore that is used to control whether the application is fetching more data or not.

 const [isFetchingMore, setFetchingMore] = useState(false);

Later, a callback function called fetchNextPage is defined to fetch the next page of data. The callback function is defined using the useCallback function from React to ensure that the function is only created once and reused in subsequent renders.

const fetchNextPage = useCallback(async () => {
  if (
    loading ||
    isFetchingMore ||
    !data?.characters.info?.next ||
    !inView
  ) {
    return;
  }
  setFetchingMore(true);
  await fetchMore({
    variables: { page: data.characters.info.next },
  });
  setFetchingMore(false);
}, [data, fetchMore, inView, isFetchingMore, loading]);

Within the callback, a check is made to prevent the function from being executed in unwanted situations. First, it is checked whether the loading state of the current query is true, indicating that the application is already fetching more data.** If it is true, the function is aborted.**

Next, it is checked if the isFetchingMore state is true. If it is true, the function is also interrupted, indicating that the application is already fetching more data.

Then, it is checked if the next page of data exists data?.characters.info?.next and if the element is visible on the screen inView. If either of these conditions is not met, the function is also interrupted.

If all the above conditions are met, the state of isFetchingMoreis set to true, indicating that the application is fetching more data.

Subsequently, the fetchMore function is executed with the variables parameter set as {page: data.characters.info.next}, retrieving the next page of data. The await keyword is used to ensure that the function waits for the response of the query before proceeding.

Finally, the state of isFetchingMore is set back to false, indicating that the search has been completed. This logic allows the application to search for new data only after the previous search has been completed.

To implement the infinite scroll effect was used the Intersection Observer (IO) API detects when an element, defined as a reference, enters the screen. When the element is visible, the fetchNextPage function is called to fetch the next page of data and add it to the list.

useEffect(() => {
  const timeOut = setTimeout(() => {
    if (inView) {
      fetchNextPage();
    }
  }, 100);
  return () => clearTimeout(timeOut);
}, [inView, fetchNextPage]);

If you're interested in learning more details, you can check out the full code in the GitHub repository.

After that, when the user scrolls down to the end of the character list, a new query is executed to fetch the next page of results. The page number is determined by the next property in the info object returned by the previous query. If next is null, it means there are no more pages to fetch.

We're almost there! Let's work on the final piece of the code

To complete our project, we need to go back to our Apollo Client and customize our cache.

Within the cache configuration, it's possible to define type policies for each type of data that will be stored. You can check by the following example:

export const apolloClient = new ApolloClient({
  uri: "https://rickandmortyapi.com/graphql",
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          characters: {
            keyArgs: false,
            merge(existing: Characters, incoming: Characters) {
              return {
                ...incoming,
                results: [
                  ...(existing?.results || []),
                  ...(incoming?.results || []),
                ],
              } satisfies Characters;
            },
          },
        },
      },
    },
  }),
});

In this example, the type of policy is defined for the Query type and the characters field. Inside the characters field, the keyArgs property is being set to false, which means there will be no argument keys.

The merge property is responsible for merging the data received from the API with the existing data in the cache. This property defines a function that takes two arguments, existing and incoming, representing the existing data and new data, respectively. The function uses the spread operator to merge the arrays of results from the existing and new data, ensuring that no data is duplicated.

It's worth noting that the satisfies Characters is a type check that ensures the function's return value conforms to the Characters type.

Finally, you can style, use any tools you want and try out new utilities!

Note that, like every basic guide, there is much more to explore! Now that we know the basics, we can delve deeper and explore other amazing features of GraphQL, such as mutations, subscribers, and even create our own GraphQL server!

Who knows, maybe this will be the topic of my next article, huh? So, stay tuned and keep following my content to learn more about it! See you next time (:

Boosting Woman Participation in Open Source Projects: A Beginner's Guide to Contributing

Francielle Dellamora — Fri, 10 Mar 2023 17:38:28 +0000

Tired of the abundance of articles about how is to be a woman in the tech industry, I decided to create a practical guide that helps and motivates women to become more involved in technology.

Sick and tired of hearing about tech bros ruling the industry?

Open Source is here to save the day! It's the perfect away to flip the script and become a true inspiration for all the future girls out there. So let's kick those outdated stereotypes to the curb and show the tech world what women can really bring to the table (:

Not only will you be an example for future girl coders, but you'll also be working on projects that are actually used by real people. Additionally, you will be a part of a vibrant community of developers who are passionate about creating awesome software.

And the best part? You don't have to be a genius to contribute to open source. In fact, we welcome developers of all skill levels and backgrounds. Whether you're a seasoned pro or just starting out, there's a place for you in the world of open source.

It's important to know that contributing to open source is not just about coding. There are so many other ways you can get involved, like testing, documentation and design .

Not only will you be making a real difference in the world of software, but you'll also be part of a community that values collaboration, transparency, and yes, even a little bit of humor.

Were you interested? The first step is to choose a project.

Look for a project that interests you and that you'd like to contribute to. You can search for open source projects on platforms like GitHub, GitLab, or even twitter.

Found something cool? Now it's time to understand the project

Once you've found a project, take some time to read through the project's documentation, code, and issue tracker. Make sure you understand the project's goals, the programming languages and frameworks it uses, and how the code is organized.

It's time to roll up your sleeves and get to work: choose a task

Look for issues or tasks that you can work on. Start with small, simple tasks to get familiar with the project's codebase and development process. You can also look for issues labeled "good first issue" or "help wanted."

Set up your development environment

Follow the project's documentation to set up your development environment. This may involve installing dependencies, setting up a virtual environment, or configuring a build system.

Go ahead and make your contribution

Once you've found a task to work on and set up your development environment, start coding! Follow the project's coding standards and style guidelines, and make sure your code is well-documented and tested.

Finally, submit your contribution

When you're ready to submit your contribution, create a pull request (PR) on the project's repository. Describe what you've done, why you've done it, and how you've tested it. Be open to feedback and suggestions from the project maintainers.

Remember to actively participate in the community.

Open source is about more than just code. Participate in the project's community by attending meetings, participating in discussions, and helping others. This will help you learn more about the project, make new connections, and grow as a developer.

Contributing to open source is a learning experience, and everyone starts somewhere. Don't be afraid to ask for help, and be patient with yourself as you learn and grow.

Good luck!

O mínimo que você precisa saber para iniciar um projeto em TypeScript

Francielle Dellamora — Sun, 05 Mar 2023 20:07:02 +0000

Motivação

Ao publicar o meu último artigo "Criei um hook personalizado para buscar dados da API do Rick and Morty com React Query e TypeScript" recebi alguns pedidos de ajuda para entender a parte do TypeScript.
Essa situação me fez perceber uma excelente oportunidade de consolidar e organizar o meu conhecimento sobre a linguagem, além de otimizar o meu tempo, criando um material que pudesse servir como apoio para aqueles que desejam iniciar no TypeScript.
Dessa forma, este artigo surge como uma iniciativa para compartilhar o meu aprendizado e experiência com a comunidade de desenvolvimento brasileira.

Afinal, TypeScript é uma linguagem de programação?

É normal questionar se TypeScript é ou não uma linguagem de programação por algumas razões. Primeiramente, TypeScript é um superset de JavaScript, o que significa que é uma extensão da sintaxe e recursos da linguagem JavaScript.
No entanto, é importante entender que, embora o TypeScript compile em JavaScript, ele é uma linguagem de programação de alto nível que possui suas próprias características, como a tipagem estática, sua própria sintaxe, recursos e compilador.

Passo a passo para iniciar um projeto

Certifique-se de ter o Node.js instalado em sua máquina.
Abra um terminal e navegue até o diretório onde você deseja criar o seu projeto.
Execute o seguinte comando para criar um novo projeto com o npm:

 npm init

Em seguida, instale o TypeScript como uma dependência de desenvolvimento:

 npm install -g typescript

Crie um arquivo de configuração do TypeScript chamado tsconfig.json. Este arquivo contém as opções de configuração do TypeScript para o seu projeto. Você pode criar este arquivo manualmente ou executar o seguinte comando para criar um arquivo padrão:

npx tsc --init

Agora você pode começar a escrever código TypeScript em arquivos com a extensão .ts

O que é tipagem estática?

A tipagem estática é uma característica do TypeScript que permite definir o tipo de dados de uma variável durante a sua declaração. Isso ajuda a identificar erros de tipos em tempo de compilação, antes que o código seja executado, evitando assim erros de programação que podem causar bugs e afetar o funcionamento do software.

Em JavaScript, podemos definir uma variável com a palavra-chave "const" sem especificar seu tipo.

const idade = 21;

Já em TypeScript, podemos definir o tipo da variável "idade" como "number", da seguinte forma:

const idade: number = 21;

Isso significa que a variável "idade" só pode armazenar valores do tipo "number". Caso tentemos atribuir um valor de um tipo diferente a essa variável, como por exemplo uma string, o TypeScript detectará um erro em tempo de compilação e sinalizará um aviso.

No entanto, é importante ressaltar que mesmo que o código não apresente erros de compilação, ainda podem ocorrer comportamentos inesperados durante a execução. Precisamos lembrar que todo o código TypeScript é removido no processo de compilação e o servidor em produção rodará o código JavaScript resultante.
Portanto, declarar um tipo em TypeScript não implica que um valor de tipo diferente aparecerá na variável durante a execução do programa.

Tipos de Dados: Primitivos e Não-Primitivos

Os tipos de dados primitivos são valores básicos e simples que representam dados diretamente. Esses tipos incluem number, string, boolean, null, undefined, symbol, e bigint.

Por outro lado, os tipos de dados não primitivos são complexos e não representam diretamente valores, mas sim referências a objetos que contêm valores. Esses tipos incluem object, array, function, e class.

type VS interface

Essa é uma discussão imensa na comunidade e por isso decidi exemplificar o que são e deixar você decidir como usar.

Basicamente, um type é uma forma de definir uma estrutura de dados, que pode ser usado para definir o tipo de uma variável, função, parâmetro ou qualquer outra coisa que tenha um tipo.

export type Metrics = "px" | "em" | "rem" | "vh" | "vw" | "%";

Já uma interface é uma forma de definir uma estrutura de dados que descreve a forma ou formato que um objeto deve ter. Ela define um conjunto de propriedades que um objeto deve ter, bem como os tipos dessas propriedades.

As interfaces podem ser usadas para descrever objetos, classes, funções e outros tipos de estruturas de dados.

export interface Genre {
  id: number;
  name: string;
}

As principais diferenças entre os dois são:

• Flexibilidade: Type é mais flexível e permite a definição de tipos complexos, como uniões (demonstrado no exemplo acima), tipos de diferença e inferência de tipos.
Já as interfaces são mais restritas e têm como objetivo principal definir a estrutura de objetos.

• Herança: Tanto as interfaces quanto os tipos são capazes de oferecer herança, porém as interfaces possuem uma sintaxe mais amigável e suportam a união de diversas interfaces em uma única, enquanto os tipos usam o operador Union para criar um novo tipo a partir da união de outros tipos existentes.

type Animal = {
  name: string;
  eat: (food: string) => void;
}

type Dog = Animal & {
  breed: string;
  bark: () => void;
}

interface Animal {
  name: string;
  eat(food: string): void;
}

interface Dog extends Animal {
  breed: string;
  bark(): void;
}

• Nomenclatura: Em geral, interfaces são usadas para representar objetos, enquanto type é usado para representar qualquer tipo de dados, incluindo objetos.

Como tipar Objetos e Funções

Para tipar objetos, podemos utilizar interfaces. Interfaces são uma forma de definir um conjunto de propriedades e tipos que um objeto deve ter. Por exemplo, para definir um objeto que representa uma pessoa com nome e idade, podemos fazer:

interface Pessoa {
  nome: string;
  idade: number;
}

Neste exemplo, definimos a interface Pessoa com duas propriedades: nome, que é uma string, e idade, que é um número. Agora, podemos utilizar essa interface para tipar um objeto que representa uma pessoa:

const pessoa: Pessoa = {
  nome: "Justin",
  idade: 30
};

Assim, garantimos que o objeto pessoa possui as propriedades e tipos definidos na interface Pessoa.

Para tipar uma função, é necessário especificar os tipos dos seus parâmetros e também o tipo do seu retorno. Por exemplo, para definir uma função que recebe dois parâmetros numéricos e retorna a soma desses valores, podemos fazer:

function soma(a: number, b: number): number {
  return a + b;
}

Neste exemplo, utilizamos a sintaxe : number para especificar que a função retorna um valor numérico.

Existem diversas maneiras de utilizar o TypeScript, portanto, se você gosta de explorar diferentes possibilidades, vale a pena me seguir nas redes sociais pois estou sempre compartilhando dicas que uso no meu dia a dia e descobertas legais como a do tweet abaixo:

dica da Dellamora pra quem quer aprender TypeScript é começar um projeto pessoal e usar a extensão Total TypeScript que da dicas úteis sobre sintaxe e traduções dos erros mais enigmáticos do TypeScript.

(ela foi desenvolvida pelo @mattpocockuk)

👇 https://t.co/Bot2k8O1E1
— dellamora (@francidellamora) January 23, 2023

Referencias

Ao escrever este artigo, foi dada a devida importância em utilizar fontes confiáveis de informação, visando garantir a precisão e a relevância do conteúdo abordado. Entre as fontes utilizadas, destaca-se a documentação oficial do TypeScript.
Além disso, contei como material de apoio os vídeos publicados pelo @pedrobzz , um grande amigo e referência na área, e com uma revisão feita pelo @nicolaslopess__, que foi essencial para garantir a qualidade do artigo.

Criei um hook personalizado para buscar dados da API do Rick and Morty com React Query e TypeScript

Francielle Dellamora — Thu, 23 Feb 2023 03:35:21 +0000

Você sabe o que é React Query?

De forma resumida, o React Query é uma biblioteca JavaScript open source que foi desenvolvida com o objetivo de facilitar o gerenciamento de dados em aplicações React. Ele foi criado por Tanner Linsley em 2020 e rapidamente ganhou popularidade entre desenvolvedores devido à sua abordagem inovadora e eficiente para buscar e armazenar dados.

A grande sacada do React Query é que ele permite criar aplicações React mais rápidas e escaláveis, com recursos legais como cache inteligente, paginação, cancelamento de requisições, atualizações em tempo real e muito mais. Com isso, a gente acaba simplificando o código, tornando ele mais fácil de entender e mantê-lo. E o melhor de tudo? A gente economiza tempo, porque não precisa escrever tanta lógica de busca e armazenamento de dados do zero.

Interfaces

Para otimizar a criação das interfaces, primeiramente consultei a documentação da The Rick and Morty API para identificar quais dados eram fornecidos. Uma vez encontrados, utilizei o primeiro gerador de JSON disponível na pesquisa do Google para gerar um JSON com base nesses dados. Por fim, utilizei a extensão Paste JSON as Code para gerar automaticamente as interfaces necessárias.

export interface BaseSearchResponse<T> {
  info: Info;
  results: T[];
}
export interface Info {
  count: number;
  pages: number;
  next?: string
  prev?: string
}
export interface Character {
  id: number;
  name: string;
  status: Status;
  species: Species;
  type: string;
  gender: Gender;
  origin: LocationCharacter;
  location: LocationCharacter;
  image: string;
  episode: string[];
  url: string;
  created: string;
}

export enum Gender {
  Female = "Female",
  Male = "Male",
  Unknown = "unknown",
}

export interface LocationCharacter {
  name: string;
  url: string;
}

export enum Species {
  Alien = "Alien",
  Human = "Human",
}

export enum Status {
  Alive = "Alive",
  Dead = "Dead",
  Unknown = "unknown",
}

export interface Location {
  id: number;
  name: string;
  type: string;
  dimension: string;
  residents: string[];
  url: string;
  created: string;
}

export interface Episode {
  id: number;
  name: string;
  air_date: string;
  episode: string;
  characters: string[];
  url: string;
  created: string;
}

Vale destacar que a interface BaseSearchResponse<T> é um modelo de tipo genérico que representa uma resposta de uma pesquisa na API.

O tipo genérico T é usado para especificar o tipo de dado que a resposta irá conter. Por exemplo, se a pesquisa for sobre personagens, então T seria a interface Character.

Passo a passo de como criei o hook personalizado

Para começar, eu defini um type Endpoints que associa cada tipo de dado que eu quero buscar na API (location, character, episode) a sua respectiva interface.

Depois disso, criei um hook personalizado chamado useRickAndMortyAPI, que pode ser usado para fazer chamadas à The Rick and Morty API. Ele recebe um parâmetro endpoint, que é uma string que representa o tipo de recurso que você quer buscar.

Para fazer as chamadas à API, eu criei uma função chamada getAPI usando o hook useCallback. Essa função recebe um objeto com um parâmetro opcional pageParam que representa o número da página que você quer buscar. Ela então usa o fetch para fazer a chamada à API e retorna os resultados em um objeto com duas propriedades: data (os dados retornados pela API) e nextCursor (o número da próxima página de resultados que deve ser buscada).

Em seguida, eu uso o hook useInfiniteQuery do React Query para buscar os dados da API de forma infinita. Ele usa a função getAPI como queryFn e também inclui algumas opções como keepPreviousData para manter os dados anteriores e getNextPageParam para obter o número da próxima página de resultados.

Finalmente, o hook useRickAndMortyAPI retorna um objeto com as propriedades isLoading (se os dados estão sendo carregados), data (os dados retornados pela API) e fetchNextPage (uma função que pode ser usada para buscar a próxima página de resultados).

/* eslint-disable @typescript-eslint/no-unused-vars */

import { useCallback } from "react";
import type { Location, Character, Episode } from "../../domain/interfaces";
import { useInfiniteQuery } from "@tanstack/react-query";

type Endpoints = {
  location: Location;
  character: Character;
  episode: Episode;
};
const useRickAndMortyAPI = <T extends keyof Endpoints>(endpoint: T) => {
  const getAPI = useCallback(
    async ({ pageParam = 1 }) => {
      const APILInk = "https://rickandmortyapi.com/api/";
      const response =
        (
          await fetch(`${APILInk}/${endpoint}?page=${pageParam}`).then(res =>
            res.json(),
          )
        )?.results || ([] as Endpoints[T][]);
      return {
        data: response,
        nextCursor: pageParam + 1,
      };
    },
    [endpoint],
  );

  const { isLoading, data, fetchNextPage } = useInfiniteQuery({
    queryKey: [`apiCall-${endpoint}`],
    queryFn: getAPI,
    keepPreviousData: true,
    getNextPageParam: lastPage => lastPage.nextCursor,
  });

  return {
    isLoading,
    data: !data
      ? []
      : data.pages.reduce((acc, curr) => {
          return [...acc, ...curr.data];
        }, [] as Endpoints[T][]),
    fetchNextPage,
  };
};

export default useRickAndMortyAPI;

Consumindo o hook useRickAndMortyAPI

Para desenvolver a tela da imagem acima, comecei importando o hook useRickAndMortyAPI na página Home e passei o endpoint character como argumento.
Em seguida, desestruturei os dados que recebi do hook e armazenei a lista de personagens na variável characters, a flag booleana isLoading e a função fetchNextPage.

Para renderizar os dados, passei a lista de personagens como propriedade para o componente Grid. Também adicionei uma função onLoadMore que é chamada quando o usuário clica no botão "Load more". Essa função verifica se a flag isLoading é verdadeira antes de chamar a função fetchNextPage para buscar mais dados.

Dessa forma, consegui consumir os dados da API Rick and Morty na página Home e exibi-los em uma interface de usuário amigável e responsiva, permitindo que o usuário carregue mais dados à medida que navega.

import Grid from "../modules/hero/grid";
import useRickAndMortyAPI from "../common/hooks/useRickAndMortyAPI";

export default function Home() {
  const {
    data: characters,
    isLoading,
    fetchNextPage,
  } = useRickAndMortyAPI("character");

  return (
    <div>
      <Grid
        rickandmortyAPI={characters}
        onLoadMore={() => {
          if (isLoading) return;
          fetchNextPage();
        }}
      />
    </div>
  );
}

Conclusão

Desenvolver esse projeto foi uma experiência valiosa para mim, pois me permitiu aprender mais sobre o React Query e a aplicação prática dos generics do Typescript.
Com base nesse conhecimento, eu criei um hook que possibilita a busca de dados da API do Rick and Morty de forma paginada e genérica, tornando mais fácil e flexível a utilização desses dados em diferentes partes do meu projeto.

Sugestões de melhorias e comentários são bem-vindos e apreciados!

O passo a passo de como criei meu portfólio e como você pode fazer o mesmo

Francielle Dellamora — Tue, 14 Feb 2023 17:04:11 +0000

Olá pessoal,

Sou desenvolvedora web e sei que ter um portfólio legal é super importante para mostrar suas habilidades e experiências profissionais. Sei também que não é raro sentir-se perdido e sem saber por onde começar, então decidi compartilhar algumas dicas e um pouco da minha experiência ao desenvolver a primeira versão do meu site.

Quer comprar um domínio mas não sabe como?

Não se sinta especial, eu também não fazia a mínima ideia de como comprar um domínio personalizado. Basicamente só sabia que existia como e por isso fiz o que todo dev faz de melhor, pesquisei no google e descobri que é bem fácil!

Aqui estão os passos básicos para você comprar o seu:

Vá para o site do Google Domains
Escolha um nome de domínio que você gostaria de usar para o seu site. Isso é como o endereço do seu site na internet, como por exemplo, "dellamora.dev".
Verifique se o nome de domínio que você escolheu está disponível. Se estiver, você verá uma mensagem dizendo "Disponível".
Adicione o nome de domínio à sua cesta de compras clicando no botão "Adicionar ao carrinho".
Siga as etapas para finalizar a compra, incluindo inserir informações de pagamento.

Pronto! Agora você é dono de um novo domínio mas ainda precisa criar um site e publicá-lo (:

O que não pode ficar de fora do seu portfolio

Um site pessoal é como se fosse um cartão de visitas virtual para o mundo conhecer quem você é, quais conteúdos já produziu, suas experiencias profissionais e como entrar em contato com você. Portanto é essencial que seu site tenha uma seção dedicada a cada um desses assuntos.

Sou programadora e não designer, o que faço?

A minha sorte é que tenho diversos amigos na área e a primeira versão de tela quem produziu foi o meu amigo @TheLittleLuiz, você pode conferir abaixo que ela é bem diferente do resultado final.

Um fato importante que quero destacar é que durante o processo de criação, diversas mudanças vão acontecer e é natural você descartar e ressuscitar ideias.
No meu caso, após muitas pesquisas e descobertas finalmente achei um design que atendesse todas as minhas necessidades e caso você se sinta sem criatividade e precise de referências esses são os meus três sites favoritos para pesquisar templates e achar inspirações:

O dilema: Escolher quais tecnologias usar

Escolher a stack é o desafio que todo programador tem ao iniciar um novo projeto, comigo não foi diferente e por isso sou extremamente grata ao @yungbzz que me auxiliou durante processo.

Após discutir quais seriam as melhores tecnologias do mercado, iniciar uma aplicação NextJS com TypeScript pareceu natural visto que são tecnologias que se complementam e eu poderia fazer o deploy de forma gratuita na Vercel.

Devido à simplicidade do projeto, decidi usar o Tailwind CSS, pois isso me permitiu concluir a lading page de forma mais ágil. Ademais, essa biblioteca oferece outros benefícios, como um design consistente e fácil de manter, graças ao uso de classes reutilizáveis em vez de estilos individuais.

Para criar as animações, utilizei o Framer Motion e a Intersection Observer API, que, quando combinados, são capazes de produzir efeitos incríveis. Caso queira saber mais sobre o assunto, recomendo a leitura do meu artigo"Framer Motion e Intersection Observer: Uma Dupla Poderosa para Animações no React".

A fim de implementar um carrossel na seção de artigos, optei pelo uso da biblioteca Swiper, que é amplamente reconhecida como uma das melhores opções disponíveis para essa finalidade. Além disso, para lidar com as requisições e gerenciar os dados de forma eficiente e confiável, utilizei o React Query, que se mostrou bastante útil para o projeto.

Okay, projeto finalizado, vamos desvendar o que é a Vercel e como fazer deploy

A Vercel é uma plataforma de hospedagem na nuvem que permite aos desenvolvedores publicarem seus projetos na Internet de forma rápida e fácil. Em resumo, ela oferece muitos recursos para otimizar a velocidade e o desempenho do seu projeto, e permite que você faça deploy seguindo o passo a passo a baixo:

Crie uma conta na Vercel e faça o login no dashboard.
Clique no botão "New Project" e selecione a opção "Import Git Repository".
Escolha o repositório do seu projeto e a branch que deseja fazer deploy.
A Vercel irá importar o projeto e criar uma pré-visualização. Verifique se está tudo correto e confirme a importação.
Defina as configurações do projeto, como o nome, domínio, ambiente, etc.
Se necessário, defina as variáveis de ambiente que o projeto necessita para funcionar corretamente.
Selecione a opção "Deploy" para realizar o primeiro deploy do projeto.
Aguarde alguns minutos enquanto a Vercel realiza o build do projeto e publica na internet.
Verifique se o projeto foi publicado corretamente acessando a URL fornecida pela Vercel.

Pronto! Seu projeto está publicado e pode ser acessado por qualquer pessoa, agora só falta configurar o seu domínio personalizado e como existem formas diferentes a própria Vercel fornece um passo a passo para cada caso (:

Lembre-se de que a criação de um portfólio não é apenas sobre design e tecnologia, mas também sobre destacar suas habilidades e experiências profissionais. Com o tempo, o seu portfólio pode se tornar uma ferramenta valiosa para avançar na sua carreira de programador.

Framer Motion e Intersection Observer: Uma Dupla Poderosa para Animações no React

Francielle Dellamora — Mon, 19 Dec 2022 17:16:45 +0000

Olá Pessoal,

Hoje vamos combinar o Framer Motion e a Intersection Observer API (IO API) para criar animações legais, portanto é importante compreender o que cada ferramenta oferece antes de começar.

A Intersection Observer API permite monitorar mudanças na interseção de um elemento marcado em relação ao seu pai ou à viewport de forma assíncrona. Já o framer-motion facilita a criação de animações, transições de layout e gestos de maneira declarativa, mantendo a semântica dos elementos HTML e SVG.

Os exemplos estão disponíveis no seguinte repositório.

Criando um observador

Antes de começarmos a criar animações, precisamos criar o componente Section que utilizara o hook useInView para monitorarmos sua presença na tela.

Para identificarmos o elemento que será monitorado, aplicaremos a propriedade ref (que será o próprio section) e o parâmetro threshold que irá indicar, em porcentagem, a quantidade do elemento que precisa estar visível para que o estado inView seja atualizado.

Sempre que houver alterações no estado inView, o useEffect será acionado e chamará um callback no componente pai, permitindo que uma animação seja iniciada assim que o elemento entrar na tela.

export const Section = ({
  id,
  children,
  setIsInView,
  className,
}: Props): JSX.Element => {
  const { ref, inView } = useInView({
    threshold: 0.4,
  });

  useEffect(() => {
    if (setIsInView) {
      setIsInView(inView);
    }
  }, [inView, setIsInView]);

  return (
    <section
      className={`relative overflow-hidden ${className}`}
      ref={ref}
      id={id}
    >
      {children}
    </section>
  );
};

export default Section;

Animação de títulos

No HTML, todo texto dentro de uma heading tag é considerado um elemento próprio na DOM, desse modo para a animação funcionar é necessário transformar cada caractere do texto em um elemento diferente.

O processo começa com a função split, que divide o título em palavras. Em seguida, a função map é usada para retornar cada palavra e repetimos a lógica para separá-la em caracteres únicos.
Para dar espaço entre as palavras, foi adicionado mr-2 no estilo (className). Além disso, a propriedade key é adicionada para garantir a identificação única de cada elemento e melhorar o desempenho da aplicação.

A fim de aproveitar a mágica do framer-motion, é necessário transformamos todas as tags de span em motions tags.
Dessa forma, o componente motion.span permite controlar a animação de cada caractere, definindo o estado inicial, animação, variações de animação e transições.

O uso da função useEffect também é necessário para simular o efeito triggerOnce do useInView e garantir que a animação ocorra apenas uma vez.

Finalmente, é preciso ajustar a propriedade transition para que cada caractere tenha o atraso adequado com base na sua posição.
O framer-motion permite que você controle a animação dos filhos com a propriedade staggerChildren na transição, então só precisamos adicionar ela e definir o tempo de delay.

No caso de títulos com mais de uma palavra, foi necessário usar o delayChildren e dividir o texto em palavras para atrasar a animação de cada uma delas. O processo envolve usar a função split, slice, join e length para determinar o tamanho total e multiplicá-lo pelo tempo especificado no staggerChildren acima.

const Title = ({
  title,
  triggerAnimation,
}: Props): JSX.Element => {
  const [triggered, setTriggered] = useState(false)

  useEffect(() => {
    setTriggered(curr => triggerAnimation || curr)
  },[triggerAnimation])


  const characterAnimation = {
    hidden: {
      opacity: 0,
    },
    visible: {
      opacity: 1,
    },
  };
  return (
      <div className="flex items-center">
        {title.split(" ").map((word, index) => {
          return (
            <motion.span
              className="mr-2"
              aria-hidden="true"
              key={`key-${word}-${index}`}
              initial="hidden"
              animate={triggered ? "visible" : "hidden"}
              transition={{
                staggerChildren: 0.1,
                delayChildren:
                  index === 0
                    ? 0
                    : title.split(" ").slice(0, index).join(" ").length * 0.1,
              }}
            >
              {word.split("").map((character, index) => {
                return (
                  <motion.span
                    className="text-2xl md:text-3xl text-gray  "
                    aria-hidden="true"
                    key={`key-${character}-${index}`}
                    variants={characterAnimation}
                  >
                    {character}
                  </motion.span>
                );
              })}
            </motion.span>
          );
        })}
      </div>
  );
};

export default Title;

Animação de delay na opacity para textos

O gif acima apresenta um componente que exibe duas colunas: uma coluna com parágrafos e outra com tópicos.

A coluna com parágrafos usa a função map para percorrer o array "paragraphs" e renderizar cada item como uma tag motion.p.
Cada tag motion.p tem a propriedade initial com valor de opacity: 0, o que significa que inicialmente a opacidade será 0%. A propriedade animate tem valor de opacity: 1, indicando que a animação deve mudar a opacidade para 100%.

A propriedade transition tem o valor delay: 1 + i * 0.2, o que significa que o tempo de atraso para cada tag será calculado pela soma de 1 mais o resultado da multiplicação de i por 0.2. O "i" é o valor do índice, começando em 0 e incrementando em 1 a cada iteração.

A segunda coluna exibe os tópicos e usa a função map para percorrer o array "topics" e renderizar cada item como uma tag "motion.li" e repetimos a mesma logica da animação dos parágrafos, com pequenas adaptações no valor de delay.

                             [...]
        <div className="md:flex gap-4">
          <div className="md:w-1/2">
          {paragraphs.map((paragraph, i) => {
            return (
              <motion.p
                initial={{opacity:0}}
                animate={{opacity: 1, transition: {delay: 1 + i * 0.2}}}
                className="text-justify " 
                key={`paragraph-${i}`}
              >
                {paragraph}
              </motion.p>
            )
          })}
          </div>
          <ul className="md:w-1/2 h-fit grid grid-cols-topics gap-4">
            {topics.map((topic, i) => {
              return (
                <motion.li
                  className={i === topics.length - 1 ? "lg:col-span-2": " "}
                  key={`topic-${i}`}
                  initial={{opacity: 0}}
                  animate={{ opacity: 1}}
                  transition={{                                                   
                    delay:                              
                    1.2 + 0.2 + i * 0.3,
                  }} 
                >                                                                                                                   
                <div className="flex items-start">
                <hr className="mr-2 mt-3 w-5 h-1 text-grayLight" />
                   {topic}
                   </div>
                 </motion.li>
              )
            })}
          </ul>
      </div>
                             [...]

Animação para imagens durante o viewport on

Para organizar o código e torná-lo mais limpo, usaremos a propriedade variants para controlar a posição, rotação e opacidade de quatro elementos diferentes. Utilizaremos a propriedade staggerChildren da transition para controlar a opacidade dos quatro elementos ao mesmo tempo.

Definiremos o posicionamento dos elementos usando os seguintes atributos:

y: que é a posição vertical dos elementos no eixo Y
x: que é a posição horizontal dos elementos no eixo X
rotate: que é a rotação dos elementos em graus

Para controlar a animação entre os estados, usaremos o objeto "transition" que inclui dois atributos:

type: "spring", indica que a animação usará uma transição "mola" (spring)
stiffness: 50, que indica a rigidez da mola. Quanto maior o número, mais rápida e suave será a animação.

const ExampleTwo: React.FC<ExampleTwoProps> = (): JSX.Element => {
  const [inView, setInView] = useState(false);
  const animations = {
    hidden: {
      opacity: 0
    },
    view: {
      opacity: 1,
    }
   }
  const firstGirl = {
    hidden: {
      y: 0, 
      x: -200, 
      rotate: "12deg"
    },
    view: {
      y:0, 
      x:-55, 
      rotate: "30deg", 
      transition: {
        type: "spring", 
        stiffness: 50
      }
    }
  }
                             [...]
  return (
                             [...]
      <motion.div
        className="flex flex-col"
        initial="hidden"
        animate={inView ? "view" : "hidden"}
        variants={animations}  
        transition={{staggerChildren: 0.5}}
      >
        <motion.img
          variants={firstGirl}
          src="/firstGirl.png"
          className=" absolute top-3 left-0  h-[21rem] lg:h-[25rem]"
        />
                             [...]
      </motion.div>
    </Section>
  );
};

export default ExampleTwo;

Animação de switch para botão

O componente ButtonExample é composto por um botão HTML e uma div, ambos estilizados com CSS. O botão tem uma cor que muda dependendo da propriedade active.

Quando clicado, ele executa a função onClick e a div é exibida apenas se a propriedade active for verdadeira.

As propriedades onClick, active e children permitem personalizar a funcionalidade e o conteúdo do botão.

const ButtonExample = ({
  onClick,
  active,
  children,
}: Props): JSX.Element => {
  return (
    <div className="relative w-full">
      <button
        className={` w-full flex relative font-Inter items-center text-xl  py-2 md:px-6 px-4 z-20 
        ${active ? "text-redLight" : "text-grayMedium"}  `}
        onClick={onClick}
      >
        {children}
      </button>
      {active && (
        <motion.div
          className=" rounded absolute top-0 bottom-0 left-0 right-0 bg-whiteBasic  z-10 flex justify-end"
          layoutId="buttonBg"
        />
      )}
    </div>
  );          
};

export default ButtonExample;

Em conclusão, a união de Framer Motion e Intersection Observer no desenvolvimento de aplicações React é um passo importante para alcançar animações de alta qualidade.
A biblioteca Framer Motion oferece aos desenvolvedores a capacidade de criar animações complexas de forma simples, enquanto o Intersection Observer garante que as animações só sejam executadas quando os elementos estiverem na tela.
Juntos, eles permitem a criação de aplicações atraentes e interativas, proporcionando uma experiência fluida e envolvente aos usuários finais.

Ideias e comentários são bem-vindos e apreciados! (:

8 Dicas para conseguir o seu primeiro estágio como desenvolvedor(a)

Francielle Dellamora — Thu, 29 Jul 2021 20:47:02 +0000

Olá Pessoal!

Conseguir o primeiro estágio pode parecer difícil, muitas vezes nem sabemos por onde começar e é por isso que escolhi compartilhar algumas dicas e um poquinho da minha expêriencia como estagiária.

Quando não se tem experiência, a melhor opção é arriscar.

Há 8 meses eu me candidatei para uma vaga de desenvolvedora front-end sabendo quase nada de programação e sem qualquer preparo. Esperava pelo "não" e estava tudo bem, visto que a minha intenção na época era entender mais sobre os processos seletivos e criar expêriencia em entrevistas. Por fim, acabou que alguns dias depois da entrevista recebi uma ligação avisando que fui selecionada.
Ninguém realmente importa se você faz faculdade em Harvard ou se aprende a programar pelo youtube.

Como estagiário o que as empresas procuram são pessoas que querem aprender e uma das melhores formas de mostrar interesse na área é tendo projetinhos pessoais no github.
Redes sociais são importantes!

Foi por meio de um retweet que achei a vaga na qual trabalho e também é através do twitter que atualmente recebo propostas de emprego.
A primeira impressão é a que fica.

Geralmente o currículo é o primeiro contato que a empresa tem com o estagiário e por isso você deve manter o seu o mais limpo e objetivo possível.
Sua atitude é muito mais importante que o seu conhecimento técnico.

Tenha em mente que muito mais importante do que saber escrever um algortimo é a sua postura diante de problemas e relacionamentos interpessoais, ou seja, invista nas soft skills.
Foque em descobrir um método de aprendizagem bom e comece pela base.

Antes de sair estudando os frameworks ou libs da modinha, lembre-se que você recém está entrando no mercado de trabalho. Primeiro procure saber sobre estruturas de dados, programação orientada a objetos e algoritmos.
Pesquise sobre a empresa para a qual você está se candidatando.

Para você se destacar na entrevista uma das formas de mostrar verdadeiro interesse é fazendo perguntas sobre como seria o seu dia-a-dia de trabalho, se existe plano de carreira e pequenos comentários sobre o que você achou legal na cultura da empresa.
Participe de Hackathons.

Com toda certeza eu ter comentado que já participei de maratona de programação na faculdade influenciou a minha contratação, logo, a próxima dica é que mesmo se você não se achar bom(a) o suficiente para competir, vá mesmo assim. Hackathons são muito mais sobre aprender, fazer networking e ter um momento divertido do que ganhar.

E por fim não desanime com os “nãos” que irá receber nessa caminhada. Eles são necessários para te tornar antifragil e te mostrar que as vezes as coisas não vão ter o melhor resultado.
Dependendo do local, um retorno do seu currículo ao banco de dados da empresa acaba sendo melhor do que você ser aceito para um local que não é a sua cara! Empresas assim não serão agradáveis, e impedirão com que você desenvolva da maneira que você precisa!

Espero que esse artigo tenha ajudado e, se você tiver mais alguma dica, não deixe de comentar!

Boa sorte na jornada!