Data fetching is a crucial part of modern web development, especially when building applications that require real-time data updates. With numerous libraries available, developers often find themselves debating between SWR (stale-while-revalidate) and React Query. In this article, we’ll delve deep into both libraries, exploring their features, use cases, and how you can effectively implement them in your React applications.<\/p>\n
SWR is a React Hooks library created by Vercel, designed for data fetching and caching. The name SWR stands for “Stale-While-Revalidate,” which is a cache invalidation strategy that serves stale data while revalidating the data in the background.<\/p>\n
React Query is another powerful library for fetching, caching, and synchronizing server state in React applications. It excels in managing server-side data, making it easy to build complex data fetching layers.<\/p>\n
Choosing between SWR and React Query can depend on several factors:<\/p>\n
Let\u2019s see how to fetch data using SWR in a simple React component.<\/p>\n
npm install swr<\/code><\/pre>\nBasic Usage<\/h3>\n
Here\u2019s an example of how to use SWR to fetch a list of users from an API:<\/p>\n
import useSWR from 'swr';\n\nconst fetcher = (url) => fetch(url).then((res) => res.json());\n\nfunction UserList() {\n const { data, error } = useSWR('https:\/\/jsonplaceholder.typicode.com\/users', fetcher);\n\n if (error) return <p>Failed to load<\/p>;\n if (!data) return <p>Loading...<\/p>;\n\n return (\n <ul>\n {data.map(user => <li key={user.id}>{user.name}<\/li>)}\n <\/ul>\n );\n}<\/code><\/pre>\nGetting Started with React Query<\/h2>\nInstallation<\/h3>\nnpm install react-query<\/code><\/pre>\nBasic Usage<\/h3>\n
Here\u2019s how to fetch the same list of users using React Query:<\/p>\n
import { useQuery } from 'react-query';\n\nconst fetchUsers = async () => {\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/users');\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n return response.json();\n};\n\nfunction UserList() {\n const { data, error, isLoading } = useQuery('users', fetchUsers);\n\n if (isLoading) return <p>Loading...<\/p>;\n if (error) return <p>Error: {error.message}<\/p>;\n\n return (\n <ul>\n {data.map(user => <li key={user.id}>{user.name}<\/li>)}\n <\/ul>\n );\n}<\/code><\/pre>\nComparing SWR and React Query: A Side-by-Side Example<\/h2>\n
Let\u2019s compare both libraries in a more detailed example where we implement data fetching, error handling, and loading states.<\/p>\n
Example: Fetching Posts<\/h3>\nUsing SWR<\/h4>\nimport useSWR from 'swr';\n\nconst fetcher = (url) => fetch(url).then((res) => res.json());\n\nfunction Posts() {\n const { data, error, isLoading } = useSWR('https:\/\/jsonplaceholder.typicode.com\/posts', fetcher);\n\n if (error) return <p>Error loading posts<\/p>;\n if (!data && isLoading) return <p>Loading posts...<\/p>;\n\n return (\n <div>\n <h2>Posts<\/h2>\n <ul>\n {data.map(post => (\n <li key={post.id}>{post.title}<\/li>\n ))}<\/ul>\n <\/div>\n );\n}<\/code><\/pre>\nUsing React Query<\/h4>\nimport { useQuery } from 'react-query';\n\nconst fetchPosts = async () => {\n const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/posts');\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n return response.json();\n};\n\nfunction Posts() {\n const { data, error, isLoading } = useQuery('posts', fetchPosts);\n\n if (isLoading) return <p>Loading posts...<\/p>;\n if (error) return <p>Error loading posts: {error.message}<\/p>;\n\n return (\n <div>\n <h2>Posts<\/h2>\n <ul>\n {data.map(post => (\n <li key={post.id}>{post.title}<\/li>\n ))}<\/ul>\n <\/div>\n );\n}<\/code><\/pre>\nHandling Mutations<\/h2>\n
Both libraries provide convenient ways to handle data mutations such as creating, updating, and deleting records.<\/p>\n
Mutations with SWR<\/h3>\nimport useSWR, { mutate } from 'swr';\n\nconst postFetcher = (url, data) => fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify(data),\n}).then((res) => res.json());\n\nfunction CreatePost() {\n const handleSubmit = async (e) => {\n e.preventDefault();\n const data = { title: e.target.title.value };\n \/\/ update local data and refetch\n const newPost = await postFetcher('https:\/\/jsonplaceholder.typicode.com\/posts', data);\n mutate('https:\/\/jsonplaceholder.typicode.com\/posts', (posts) => [...posts, newPost], false);\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <input name=\"title\" required \/>\n <button type=\"submit\">Create Post<\/button>\n <\/form>\n );\n}<\/code><\/pre>\nMutations with React Query<\/h3>\nimport { useMutation, useQueryClient } from 'react-query';\n\nfunction CreatePost() {\n const queryClient = useQueryClient();\n\n const mutation = useMutation(newPost => {\n return fetch('https:\/\/jsonplaceholder.typicode.com\/posts', {\n method: 'POST',\n body: JSON.stringify(newPost),\n headers: {\n 'Content-Type': 'application\/json',\n },\n }).then((res) => res.json());\n }, {\n onSuccess: () => {\n queryClient.invalidateQueries('posts');\n }\n });\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const data = { title: e.target.title.value };\n mutation.mutate(data);\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <input name=\"title\" required \/>\n <button type=\"submit\">Create Post<\/button>\n <\/form>\n );\n}<\/code><\/pre>\nConclusion<\/h2>\n
In summary, both SWR and React Query have their unique strengths and cater to different needs in the world of data fetching. SWR excels in simplicity and real-time capabilities, while React Query shines in complex state management and query optimization. By understanding your application’s requirements, you can confidently choose the right data-fetching library for your next React project.<\/p>\n
Further Reading and Resources<\/h3>\n\n- SWR Documentation<\/a><\/li>\n
- React Query Documentation<\/a><\/li>\n
- React Hooks Documentation<\/a><\/li>\n<\/ul>\n
Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
Data Fetching with SWR and React Query: A Comprehensive Guide Data fetching is a crucial part of modern web development, especially when building applications that require real-time data updates. With numerous libraries available, developers often find themselves debating between SWR (stale-while-revalidate) and React Query. In this article, we’ll delve deep into both libraries, exploring their<\/p>\n","protected":false},"author":78,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[398],"tags":[224],"class_list":{"0":"post-7508","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-react","7":"tag-react"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7508","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=7508"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7508\/revisions"}],"predecessor-version":[{"id":7509,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7508\/revisions\/7509"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=7508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=7508"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=7508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}