React Query - useQuery

Wesley_waka — Thu, 27 Jul 2023 04:17:08 +0000

Hey Folks,
It's time to take a journey on react query. Don't you know it? Perfect, you are in the right place 😁

Introduction
What is React Query? React query is an npm library created by @TannerLinsley.
It's a state manager for react that simplifies many tasks like handling the HTTP request state, saving data in the client to prevent many requests, sharing data in your application using hooks and so on.
You'll discover more in this series about it, learn how to use it, and appreciate its simplicity in your react applications.

useQuery
The first core concept is useQuery. Through it, you can retrieve data from a source and handle all the states of this request in a very simple way.
Let's see an example

import { useQuery } from '@tanstack/react-query';

const fetchTodos = async (): Promise<Todo[]> => {
  const response = await fetch('api/tasks');
  if (!response.ok) {
    throw new ResponseError('Failed to fetch todos', response);
  }
  return await response.json();
};

export const useTodos = (): UseTodos => {
  const {
    data: todos = [],
    isLoading,
    isFetching,
    error,
  } = useQuery(['todos'], fetchTodos, {
    refetchOnWindowFocus: false,
    retry: 2,
  });
...
};

In this example, you can see the essentials of useQuery.
UseQuery is a react hook; it takes 3 params:

The query key

The query function

The configurations

Let's start with the first one. The query key is a key used by react query to identify your queries; through the key, react query is able to store the result and use it in different parts of the application. The key is used to identify the query, and with it you can also reset the query or change the value by code using the React Query Client.

The query function is the method used to retrieve data from a source (rest, graphQL, etc. etc.). It's simple; a function that returns a kind of data could be a simple function or, in most cases, a promise.

Configurations, ok these are simple :) There are many possible options to run the query in different ways (amount of retries, when refreshing the data, how to cache the data and so on..)

The result of this hook has three important objects instead

data; this object contains the result of your query function. Please, pay attention that the data could be undefined too; this is because on the first call when the request is pending, data is not yet presented

isLoading; this flag indicates when react query is loading data. There is also the isFetching flag, which is important if you are creating infinite scrolling. The isFetching flag indicates that there is a request pending, which is perfect if the app is asking for the next info

error: this object contains the error if your request has a problem; using it, you can get the error and create a pretty info message for the user

Ok, you have an idea of how useQuery works and what its potentialities are, but if you are more interested in it, you can watch the video below to learn more about it.

Youtube

ok, that's all! I'll get back to you with another react query feature soon.

I hope you enjoyed this content.

Bye Bye 👋

p.s. you can find the code of the video github repo

How to setUp AuthO API in React

Wesley_waka — Sun, 23 Jul 2023 06:34:47 +0000

Are you a frontend developer,Without any backend programming knowledge which is responsible for authenticating your Users into your app.Maybe,you are a backend developer who is tired of debugging your Authentication MVC model.Here is a step to step tutorial with a few clicks to set you on the go.

What is OAuth

Auth0 is a cloud-based identity and access management (IAM) platform that offers authentication and authorization as a service. It provides developers with a set of tools and APIs to easily add secure authentication and authorization functionalities to their web and mobile applications.

The key features of Auth0 include:

-Authentication: Auth0 supports various authentication methods, such as social login (e.g., Google, Facebook, Twitter), username/password authentication, multi-factor authentication (MFA), and more. This allows developers to offer users multiple ways to log in to their applications securely.

-Authorization: Auth0 provides a flexible and customizable authorization system that allows developers to define fine-grained access control policies for their resources. This helps ensure that users only have access to the resources they are authorized to use.

-Single Sign-On (SSO): Auth0 enables single sign-on, allowing users to log in once and access multiple applications without the need to re-enter their credentials for each one.

Developer-Friendly: Auth0 provides SDKs and libraries for various programming languages and platforms, making it developer-friendly and straightforward to integrate authentication and authorization functionalities into applications.

Steps to follow

1.Create a new Account
-Navigate to
-Sign up if You do not have an already signed in account

-On success upon sign up or login You will be navigated to the user dashboard where you are responsible of managing your apps.

2.Create an Application
-In the user dashboard click on the create application in the get started section

A pop-up will appear,enter the name of your app,beneath th name there are various options of application to create for the authentication. -Since we are dealing with a frontend framework (React) choose SPWA(Single Page Web Page Application) option. -On success You will be redirected to choose Your SPWA framework option,choose react

3.Auth settings & configuration

-Confirm that your panel has been set up and navigate to settings

-In the settings section includes personal information about your API.

4.App code configuration
-Copy the clientId and Domain name mentioned in the settings panel safely since they are the essential information to gain access to our API.
-In your React application run

npm i @auth0/auth0-react

responsible for installing package for authO provider
-Back in your React code,make sure your app is wrapped with the authOprovider.
-copy and paste your domain and clientId as shown below

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Auth0Provider } from '@auth0/auth0-react';

const root = ReactDOM.createRoot(document.getElementById('root'));
// dev-bgl7q1jcjwnen30i.us.auth0.com
// BB6LuOvArlkD9hjzUdOcGJhhwKtlIkWv
root.render(
    <Auth0Provider
        domain="dev-bgl7q1jcjwnen30i.us.auth0.com"
        clientId="BB6LuOvArlkD9hjzUdOcGJhhwKtlIkWv"
        authorizationParams={{
            redirect_uri: window.location.origin,
        }}
    >

         <App />

    </Auth0Provider>
);

5.Application properties
-If you have a logo deployed you may switch the logo URL
-Change the application type to Single Page Application

6.Setting up Your App URI's
-Once you're done navigate to back to AuthO scroll down to Application URI.

-Copy and paste your deployed react web app,if deployed else
copy and paste your localhost URL in each of the entries within the application URI.

7.Confirmation
-Once you are done scroll to the bottom of the page and click on save changes
-Launch you your app with

npm run start

command and hopefully on Launch when you click on the login.You'll see a page similar to this one:

Hope it was insightful don't forget to leave a thumb's Up

DEV Community: Wesley_waka

React Query - useQuery

How to setUp AuthO API in React

What is OAuth

The key features of Auth0 include:

Steps to follow