DEV Community: Amine Elbarry

React Query Implementation And Why Should You Use It

Amine Elbarry — Sun, 01 Jan 2023 11:59:52 +0000

you can view the full article here here

Overview

Hi 👋 You, Today, I'm going to discuss React Query and why i am telling you that you should use it.

React Query is a library that makes managing asynchronous data in React applications easier. It provides a simple API for retrieving, caching, and updating data and makes it simple to handle data that changes over time. In this article, we'll look at the advantages of using React Query as well as how to get started using it in your projects.

Why React Query ?

You may want to use React Query in your React applications for a variety of reasons, including:

React Query provides a simple API for handling data, making it easier to manage data in your application.
React Query can improve your application's performance by reducing the number of network requests made and only fetching data when it is required.
React Query makes it simple to handle errors that may occur when fetching data, such as network or server-side errors. It includes tools for displaying error messages to users as well as retrying failed requests.
React Query includes tools for debugging and profiling the performance of your data management, making it easier to understand how your application works and identify potential issues.

Overall, React Query can be a helpful tool for managing asynchronous data in your React applications, allowing you to create more performant and reliable applications.

Setup

Let's start by installing React Query

npm i @tanstack/react-query
or
yarn add @tanstack/react-query

Then, in your React components, you can use the useQuery hook to fetch data. The useQuery hook accepts an options object containing the query to be executed as well as any additional parameters, such as variables or query options.

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'

const queryClient = new QueryClient()

export default function App() {
return (
  <QueryClientProvider client={queryClient}>
    <Example />
  </QueryClientProvider>
 )
}

function Example() {
const { isLoading, error, data } = useQuery({
  queryKey: ['get-user'],
  queryFn: () =>fetch('/api/user').then((res) => res.json())
})
if (isLoading) return 'Loading...'
if (error) return 'An error has occurred: ' + error.message
return (
  <div>
    <h1>{data.user.fullName}</h1>
    <h1>{data.user.lastName}</h1>
  </div>
 )
}

The useQuery hook is used to retrieve a user from an API. i am extracting just three properties for this hook : data, error, and isLoading. You can use these properties to show the user loading indicators, error messages, or the data itself.

Finally, React Query is an excellent tool for managing asynchronous data in React applications. It simplifies data management, improves performance, and makes handling error states easier. You can build more performant and reliable applications and have a better developer experience by using React Query. I hope this article has given you a good introduction to React Query and inspired you to use it in your own projects.

you can view the full article here here

There you have it, perhaps I was able to assist you a little, Thanks for reading

Amine Elbarry signing off 👋

How To Upload Files With GraphQl And NestJs

Amine Elbarry — Fri, 29 Jul 2022 21:54:00 +0000

Quick demonstration on using GraphQL and Nestjs to upload files (NestJs Code First Approch)

Overview

Hi 👋 You, Today, I'm going to discuss how to upload files using graphql. You may already be familiar with how to upload files using the Rest API, but now you tried Graphql and you're wondering how to upload your cat pictures.

If you're using Nest Js and the Code-first GraphQL approch this guide is for you

Setup

Let's start by installing our dependencies

npm i @nestjs/graphql @nestjs/apollo graphql apollo-server-express graphql-upload@14
yarn add @nestjs/graphql @nestjs/apollo graphql apollo-server-express graphql-upload@14

Now everything is installed go to your app.module.ts file and import ApolloDriver, ApolloDriverConfig & GraphQLModule.

import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';
import { GraphQLModule } from '@nestjs/graphql';

Then add GraphQLModule config to the App module imports.

@Module({
imports: [
  GraphQLModule.forRoot<ApolloDriverConfig>({
  driver: ApolloDriver,
  autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
 }),
],

Lets generate our graphql code now by using nest cli in our terminal.

nest g resource cats

Now Select GraphQL (code first)

? What transport layer do you use?
  REST API
  GraphQL (code first)
  GraphQL (schema first)
  Microservice (non-HTTP)
  WebSockets

This will create a folder inside you src Directory called cats.

Let's Code

Now let's start by writing our mutation to create a cat object with an image

let's start by editing our createCatInput which is imported by our createCatmutation

@InputType()
export class CreateCatInput {
  @Field(() => Int, { description: 'Example field (placeholder)' })
  exampleField: number;
}

Our cat will have these properties name, breed & image

Create a file upload type that we can use for our image field which look like this

import { Stream } from 'stream';

export interface FileUpload {
  filename: string;
  mimetype: string;
  encoding: string;
  createReadStream: () => Stream;
}

Now Add The Fields With GraphQLUpload Scalar Type wich is imported from our package graphql-upload which gives us support for GraphQL multipart requests.

import * as GraphQLUpload from 'graphql-upload/GraphQLUpload.js';

@InputType()
export class CreateCatInput {
  @Field(() => String)
  name: string;
  @Field(() => String)
  breed: string;
  @Field(() => GraphQLUpload)
  image: Promise<FileUpload>;
}

Then head to the cat entity and create a similar type and modify the image field as string so we can return just the filename

@ObjectType()
export class Cat {
  @Field(() => String)
  name: string;
  @Field(() => String)
  breed: string;
  @Field(() => String)
  image: string;
}

Ok now we go to our cats.service.ts where we can handle our image.

create({ breed, name, image }: CreateCatInput) {
  // your code goes here
}

We will return the breed and name precisely as we received them. readable stream ( image ) go ahead and create a new folder, you can name it upload,we will save our images inside it.

async create({ breed, name, image }: CreateCatInput) {
  const { createReadStream, filename } = await image;
  return new Promise(async (resolve) => {
  createReadStream()
   .pipe(createWriteStream(join(process.cwd(), `./src/upload/${filename}`)))
   .on('finish', () =>
     resolve({
      breed,
      name,
      image: filename,
     }),
   )
   .on('error',() => {
       new HttpException('Could not save image', HttpStatus.BAD_REQUEST);
    });
  });
}

Finally go to app.module.ts and add GraphQLUpload Middleware

import * as graphqlUploadExpress from 'graphql-upload/graphqlUploadExpress.js';

const app = await NestFactory.create(AppModule);
app.use(graphqlUploadExpress({ maxFileSize: 1000000, maxFiles: 10 }));
await app.listen(4000);

Complete Reading on my portfolio

How To Structure Your NextJs Application

Amine Elbarry — Tue, 19 Jul 2022 17:04:21 +0000

How To Structure Your NextJs Application

A full guide for NextJs to build scalable, production-ready applications

What Is Next?

As with ReactJs, NextJs (The React Framework for Production) gives you the freedom of how you design your application and where to place your code, it has all the best features that ReactJs lacks, including image and font optimizations, fast rendering, and hybrid static and server rendering. But with great power comes great responsibility

As you navigate through your app, you frequently pause to consider where to put this or that, and occasionally you find yourself wondering should I have put this code somewhere else instead ? For this reason, you need a scalable production-ready folder structure that neither React nor NextJs ship with. so your question is, how should I structure my code? Don't worry , I have a solution.

Remember that there are numerous approaches you can take to this. I'm not saying that this is the best. Since each person is unique, you could like another one over mine,only you can decide what is the best for you and your team.

Staring Fresh

Let's first look at the structure NextJs provides for us:

If you started a new NextJs application, you will see certain folders in your root folder. We won't worry about the other files, such as eslint and nextconfig, because they dont matter to us now.

` > node_modules

pages
api
hello.tsx
_app.tsx
index.tsx
public
styles
.. rest of the files`

Continue Reading Here https://elbarryamine.com/blog/how-to-structure-your-nextjs-application