React: use React Query useQuery for Simplifying Data in Your React Apps

Imagine building your React app like Legos. Each Lego piece is like a piece of data: users, products, comments, anything! You snap them together to create awesome features, but sometimes adding new pieces (fetching data) gets messy. That's where React Query comes in!

Think of React Query as the ultimate Lego connector. It helps you manage all those data Legos with ease, making your app faster, smoother, and easier to build.

Why is data fetching so tricky?

Normally, fetching data in React feels like building with broken Legos. You write complicated code to:

• Get data from servers: Like fetching user info from a website.

• Keep data fresh: Make sure the info users see is up-to-date, not stale.

• Avoid duplicate requests: Don't ask the server for the same info twice.

• Handle errors: Deal with problems like slow internet or server crashes.

Ugh, it's a headache!

React Query to the rescue!

React Query is your friendly Lego organizer. It takes care of all the tricky data stuff, letting you focus on building cool features:

• Fetch data with simple hooks: Just one line of code gets your data!

• Automatic caching: React Query remembers fetched data, so it's always there.

• Smart updates: Only update data when needed, no unnecessary requests.

• Error handling built-in: No more worrying about crashes, React Query handles them.

Basically, React Query makes data fetching a breeze, like building with perfect Legos!

Where is the examples code?

Here are the code examples from the article, explained in a beginner-friendly way:

Example 1: Fetching GitHub Stats

JavaScript

// Import React Query tools
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

// Create a helper to manage data fetching
const queryClient = new QueryClient()

// Wrap your app with the QueryClientProvider
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* Your app components will go here */}
    </QueryClientProvider>
  )
}

// Fetch data in a component using useQuery
function Example() {
  // Get GitHub stats using useQuery
  const { isLoading, error, data } = useQuery('repoData', () =>
    fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
      res.json()
    )
  )

  // Show loading or error messages while fetching
  if (isLoading) return 'Loading...'
  if (error) return 'An error occurred: ' + error.message

  // Show the fetched data
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      {/* Display other stats like subscribers, stars, and forks */}
    </div>
  )
}

Example 2: To-Do List App

JavaScript

// Import more React Query hooks
import { useQuery, useMutation, useQueryClient } from 'react-query'

// Imagine you have functions to fetch and add todos
import { getTodos, postTodo } from '../my-api'

// ... (Same QueryClient setup as before)

function Todos() {
  // Access the query client
  const queryClient = useQueryClient()

  // Fetch todos using useQuery
  const query = useQuery('todos', getTodos)

  // Add todos using useMutation
  const mutation = useMutation(postTodo, {
    onSuccess: () => {
      // Refresh the todos list after adding a new todo
      queryClient.invalidateQueries('todos')
    },
  })

  // ... (Render the todos list and add todo button)
}

Key points:

• useQuery fetches data and automatically manages caching, loading states, and errors.

• useMutation updates data on the server and can trigger query refetches.

• React Query handles these complexities for you, making data fetching much simpler.

I hope this helps!