{"id":15706637,"url":"https://github.com/s1gr1d/example.react-swr-axios","last_synced_at":"2025-07-09T16:03:26.734Z","repository":{"id":143917160,"uuid":"474390069","full_name":"s1gr1d/example.react-swr-axios","owner":"s1gr1d","description":"A simple, scalable example for using SWR with Axios in your React application.","archived":false,"fork":false,"pushed_at":"2022-12-11T11:59:42.000Z","size":252,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-18T13:51:00.793Z","etag":null,"topics":["axios","example","nextjs","react","scalable","swr","typescript","useswr"],"latest_commit_sha":null,"homepage":"https://example-react-swr-axios.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/s1gr1d.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2022-03-26T15:37:06.000Z","updated_at":"2025-05-01T16:04:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"1933d62c-ec80-4423-b585-4d36c46359a3","html_url":"https://github.com/s1gr1d/example.react-swr-axios","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/s1gr1d/example.react-swr-axios","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s1gr1d%2Fexample.react-swr-axios","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s1gr1d%2Fexample.react-swr-axios/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s1gr1d%2Fexample.react-swr-axios/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s1gr1d%2Fexample.react-swr-axios/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/s1gr1d","download_url":"https://codeload.github.com/s1gr1d/example.react-swr-axios/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/s1gr1d%2Fexample.react-swr-axios/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264492255,"owners_count":23617025,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["axios","example","nextjs","react","scalable","swr","typescript","useswr"],"created_at":"2024-10-03T20:25:37.588Z","updated_at":"2025-07-09T16:03:26.626Z","avatar_url":"https://github.com/s1gr1d.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SWR with Axios\n\nA simple, scalable example for using SWR with Axios in your React application.\n\n[SWR](https://swr.vercel.app/) provides React hooks for data fetching. It is a good choice for handling **server cache\nstate** in your application. This kind of state comes from a server and is being cached on the client for further usage.\n\nThis example uses following data from the [NASA API](https://api.nasa.gov/):\n\n* apod (Astronomy Picture of the Day)\n* donki (Database Of Notifications, Knowledge, Information)\n\n## Table Of Contents:\n\n- [Project Structure](#project-structure)\n- [Axios client](#axios-client)\n- [Reusable SWR Hook](#reusable-swr-hook)\n- [API requests](#api-requests)\n\n## Project Structure\n\nThe most important folders in this example are following:\n\n```sh\nsrc\n|\n+-- api      # API request declarations and api hooks (uswSWR)\n|\n+-- lib      # re-exported libraries preconfigured for the application (Axios, swr)\n|\n+-- types    # types used across the application\n```\n\n## Axios Client\n\nAs we use the NASA api we create a **single instance** of the Axios client that's been pre-configured and reused\nthroughout the application.\n\n[Axios Client Code](./src/lib/axios/axiosInstance.ts)\n\n## Reusable SWR Hook\n\nThe `useSWRAxios` hook provides a base wrapper for the SWR library with some basic additional functionality like\nproviding the `isLoading` status.\n\nThis hook is always used when interacting with the SWR library.\n\n[useSWRAxios](./src/lib/swr/useSWRAxios.ts)\n\n## SWR Keys\n\nSWR uses the provided key to differentiate between the cached data. SWR sends just 1 request per key to the API. To\ncreate and reuse keys (e.g. when we need the key for a `mutate`) they are generated with the cache key generator.\n\nSome requests contain query data. This has to be included in the request key, so SWR can differentiate\nbetween requests with a different query.\n\n[Cache Key Generator](./src/lib/swr/cacheKeyGenerator.ts)\n\n## API Requests\n\nThe code for API requests and corresponding SWR hooks is located in the [api](./src/api) folder. This folder contains sub-folders for each collection\nof api requests. In this example we have two `api` modules:\n\n* apod (Astronomy Picture of the Day)\n* donki (Database Of Notifications, Knowledge, Information)\n\n```sh\napod\n|\n+-- fetchers.ts    # API request declarations\n|\n+-- swrHooks.ts    # SWR hooks\n|\n+-- index.ts       # export file\n```\n\nInstead of declaring API requests on the go, they are defined and exported separately. A declaration is a fetcher\nfunction that calls an endpoint.\n\nThe defined fetchers can then be used inside `swrHooks.ts`.\n\n[API Request Declaration Code (DONKI)](./src/api/donki/fetchers.ts)\n\n[SWR Hooks Code (DONKI)](./src/api/donki/swrHooks.ts)\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs1gr1d%2Fexample.react-swr-axios","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fs1gr1d%2Fexample.react-swr-axios","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fs1gr1d%2Fexample.react-swr-axios/lists"}