{"id":19057563,"url":"https://github.com/pktcodes/react-query-basics-v2","last_synced_at":"2026-05-07T09:31:19.824Z","repository":{"id":193955286,"uuid":"689526983","full_name":"pktcodes/react-query-basics-v2","owner":"pktcodes","description":"Remote Data Manipulation using React Query on Local Express Server","archived":false,"fork":false,"pushed_at":"2023-09-16T03:35:04.000Z","size":54,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-12T09:07:05.912Z","etag":null,"topics":["api-documentation","axios","custom-hooks","custom-instance","http-methods","javascript","john-smilga","local-file-system","local-server","payload","postman","react","react-query","request","response","server-data","task-list","thunder-client"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pktcodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-10T04:58:55.000Z","updated_at":"2023-09-15T06:30:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"b6c220b6-b110-4e80-a46f-50dc5a6a7dfa","html_url":"https://github.com/pktcodes/react-query-basics-v2","commit_stats":null,"previous_names":["praveen-1995/react-query-basics-v2","pktcodes/react-query-basics-v2"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pktcodes/react-query-basics-v2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pktcodes%2Freact-query-basics-v2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pktcodes%2Freact-query-basics-v2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pktcodes%2Freact-query-basics-v2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pktcodes%2Freact-query-basics-v2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pktcodes","download_url":"https://codeload.github.com/pktcodes/react-query-basics-v2/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pktcodes%2Freact-query-basics-v2/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32731198,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-documentation","axios","custom-hooks","custom-instance","http-methods","javascript","john-smilga","local-file-system","local-server","payload","postman","react","react-query","request","response","server-data","task-list","thunder-client"],"created_at":"2024-11-08T23:58:08.963Z","updated_at":"2026-05-07T09:31:19.808Z","avatar_url":"https://github.com/pktcodes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Query - Task Bud 📝\n\n## Steps\n\n#### Server\n\nOpen server directory.\n\n- run `npm install` and `npm start`\n\n#### Starter - Client\n\n- run `npm install` and `npm run dev`\n- Grocery Bud structure\n\n![Task Bud](https://github.com/praveen-1995/react-query-basics-v2/assets/44305655/318a1874-937c-4822-86ea-517a89b324ff)\n\n#### Explore Setup\n\nExplore files and folders\n\n#### Custom Axios Instance\n\nCreate `utils.js` and setup custom axios instance with\nfollowing base url: http://localhost:5000/api/tasks\n\n#### HTTP Methods\n\nHTTP (Hypertext Transfer Protocol) methods define the types of actions that can be performed on a web server to retrieve, modify or delete information. The most commonly used HTTP methods are GET, POST, PATCH and DELETE. GET retrieves data, POST sends data to be processed, PATCH update or replace existing data, DELETE removes data.\n\n- can use fetch()\n\nGET: This HTTP method is used to retrieve data from a server. When a client sends a GET request to a server, the server will return a response that includes the requested data. This method is typically used to retrieve information from a database, to read a web page, or to download a file. The HTTP GET method is the default method used by web browsers to retrieve data from a server, as it is a safe and efficient way to request resources.\n\n```js\n// HTTP GET example\ntry {\n  const response = await axios.get('/api/data');\n  console.log(response.data);\n} catch (error) {\n  console.error(error);\n}\n```\n\n```js\n// HTTP GET example\naxios\n  .get('/api/data')\n  .then((response) =\u003e {\n    console.log(response.data);\n  })\n  .catch((error) =\u003e {\n    console.error(error);\n  });\n```\n\nPOST: The POST method is used to send data to a server to create or update a resource. When a client sends a POST request to a server, the server will process the request and create a new resource or update an existing one. This method is commonly used in web forms, where users enter information that is then sent to a server for processing.\n\n```js\n// HTTP POST example\ntry {\n  const response = await axios.post('/api/data', { name: 'John', age: 30 });\n  console.log(response.data);\n} catch (error) {\n  console.error(error);\n}\n```\n\nPATCH: This method is similar to the POST method, but it is used to update only a part of a resource. When a client sends a PATCH request to a server, the server will update the resource with the new data provided in the request. This method is commonly used in REST APIs to update specific properties of a resource.\n\n```js\n// HTTP PATCH example\ntry {\n  const response = await axios.patch('/api/data/1', { age: 31 });\n  console.log(response.data);\n} catch (error) {\n  console.error(error);\n}\n```\n\nDELETE: The DELETE method is used to remove a resource from a server. When a client sends a DELETE request to a server, the server will delete the resource if it exists. This method is commonly used in REST APIs to remove a resource that is no longer needed or to undo a previous action.\n\n```js\n// HTTP DELETE example\ntry {\n  const response = await axios.delete('/api/data/1');\n  console.log(response.data);\n} catch (error) {\n  console.error(error);\n}\n```\n\nCRUD stands for Create, Read, Update, and Delete, which are the basic operations that can be performed on a database or web application. These operations allow users to create new data, read existing data, update data, and delete data when necessary.\n\n#### Docs\n\n[Task API Docs](https://documenter.getpostman.com/view/18152321/2s93RTSDLn)\n\n#### UseEffect Approach\n\n```js\nconst fetchTasks = async () =\u003e {\n  try {\n    const response = await customFetch.get('/');\n    console.log(response.data);\n  } catch (error) {\n    +console.error(error);\n  }\n};\n\nuseEffect(() =\u003e {\n  fetchTasks();\n}, []);\n```\n\n#### React Query\n\nReact Query is a state management library that simplifies the process of fetching, caching, and updating data in React applications. Its major benefits include automatic background refetching, caching and stale data management, error handling, and easy pagination and infinite scrolling. Compared to setting up requests with useEffect, React Query provides a more declarative and centralized approach to managing data in React, which results in cleaner and more efficient code. It also reduces boilerplate code and improves performance by minimizing unnecessary re-renders and network requests.\n\n- tons of features\n- versions\n\n[React Query](https://tanstack.com/query/v4/docs/react/overview)\n\n#### Install\n\n```sh\nnpm i @tanstack/react-query\n```\n\n#### Setup React Query\n\nmain.jsx\n\n```js\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nconst queryClient = new QueryClient();\n\nReactDOM.createRoot(document.getElementById('root')).render(\n  \u003cQueryClientProvider client={queryClient}\u003e\n    \u003cApp /\u003e\n  \u003c/QueryClientProvider\u003e\n);\n```\n\n#### First Query\n\nItems.jsx\n\n```js\nimport { useQuery } from '@tanstack/react-query';\n\nconst result = useQuery({\n  queryKey: ['tasks'],\n  queryFn: () =\u003e customFetch.get('/'),\n});\nconsole.log(result);\n```\n\n- Query Key\n\nThe unique key you provide is used internally for refetching, caching, and sharing your queries throughout your application.\n\n- Query Function\n\nA query function can be literally any function that returns a promise. The promise that is returned should either resolve the data or throw an error.\n\n#### Error Handling\n\n```js\nconst Items = () =\u003e {\n  const { isLoading, data, error, isError } = useQuery({\n    queryKey: ['tasks'],\n    queryFn: async () =\u003e {\n      const { data } = await customFetch.get('/something');\n      return data;\n    },\n  });\n\n  if (isLoading) {\n    return \u003cp style={{ marginTop: '1rem ' }}\u003eLoading...\u003c/p\u003e;\n  }\n\n  // if (isError) {\n  //   return \u003cp style={{ marginTop: '1rem ' }}\u003ethere was an error...\u003c/p\u003e;\n  // }\n  if (error) {\n    return \u003cp style={{ marginTop: '1rem ' }}\u003e{error.message}\u003c/p\u003e;\n  }\n  return (\n    \u003cdiv className='items'\u003e\n      {data.taskList.map((item) =\u003e {\n        return \u003cSingleItem key={item.id} item={item} /\u003e;\n      })}\n    \u003c/div\u003e\n  );\n};\nexport default Items;\n```\n\n#### Thunder Client Extension\n\nTest API endpoints directly in VS CODE\n\n\n#### Create Task\n\nForm.jsx\n\n```js\nconst { mutate: createTask, isLoading } = useMutation({\n  mutationFn: (taskTitle) =\u003e customFetch.post('/', { title: taskTitle }),\n});\n\nconst handleSubmit = (e) =\u003e {\n  e.preventDefault();\n  createTask(newItemName);\n};\n```\n\n#### useMutation Helper Options\n\nuseMutation comes with some helper options that allow quick and easy side-effects at any stage during the mutation lifecycle. These come in handy for both invalidating and refetching queries after mutations\n\n```js\nconst { mutate: createTask, isLoading } = useMutation({\n  mutationFn: (taskTitle) =\u003e customFetch.post('/', { title: taskTitle }),\n  onSuccess: () =\u003e {\n    // do something\n  },\n  onError: () =\u003e {\n    // do something\n  },\n});\n```\n\n---\n\n_Note: I have developed this project ~ [16] as part of React 18 Tutorial and Projects Course (2023) taught by John Smilga._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpktcodes%2Freact-query-basics-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpktcodes%2Freact-query-basics-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpktcodes%2Freact-query-basics-v2/lists"}