{"id":20793691,"url":"https://github.com/hollyoops/apollo-link-network-error","last_synced_at":"2025-05-05T23:42:21.969Z","repository":{"id":44004470,"uuid":"237639895","full_name":"hollyoops/apollo-link-network-error","owner":"hollyoops","description":"An Apollo Link that you can dynamic ignore/change the network error. and you can easy to implement the Network-first feature and Offline-first feature ","archived":false,"fork":false,"pushed_at":"2023-08-14T09:34:43.000Z","size":798,"stargazers_count":11,"open_issues_count":11,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-17T03:09:32.703Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/hollyoops.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":"2020-02-01T16:06:31.000Z","updated_at":"2023-07-27T07:45:08.000Z","dependencies_parsed_at":"2024-06-19T06:14:25.721Z","dependency_job_id":"ce70bc78-66f9-498b-ac2e-e351a967bac1","html_url":"https://github.com/hollyoops/apollo-link-network-error","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hollyoops%2Fapollo-link-network-error","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hollyoops%2Fapollo-link-network-error/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hollyoops%2Fapollo-link-network-error/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hollyoops%2Fapollo-link-network-error/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hollyoops","download_url":"https://codeload.github.com/hollyoops/apollo-link-network-error/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252596320,"owners_count":21773842,"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":[],"created_at":"2024-11-17T16:10:59.380Z","updated_at":"2025-05-05T23:42:21.936Z","avatar_url":"https://github.com/hollyoops.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# apollo-link-network-error\n\nAn Apollo Link that you can dynamic ignore/change the network error. and you can easy to implement the **Network-first feature**(with `network-only` _fetchPolicy_) and **Offline-first feature** (with `cache-and-network` _fetchPolicy_)\n\nBasically this means your UI's queries will always work if the requested data is available in the local cache and it will always keep the cached data consistent with your server data if it can be reached.\n\n\u003e NOTE: Currently we only tested it on react-native. If there are some issues on browser, just create an issue or make a PR\n\n## Install\n\n```shell\nnpm install --save apollo-link-network-error\n```\n\n## Basic Usage\n\n### Setup\n\n```javascript\nimport { ApolloClient } from 'apollo-client'\nimport { NetworkErrorLink } from 'apollo-link-network-error'\n\nconst onNetworkError = ({ error, operation }) =\u003e {\n  if ('some_condition_1') {\n    // option1: throw a new error to replace\n    throw error\n  }\n\n  if ('some_condition_2') {\n    // option2: not return error and will take following object as response\n    return {\n      info: somedata,\n    }\n  }\n\n  return Promise(....) // option3: you can return a promise\n}\n\nconst errorIgnoreLink = new NetworkErrorLink(onNetworkError)\nconst client = new ApolloClient({\n  cache,\n  errorIgnoreLink,\n})\n```\n\n## Offline solution\n\n### Setup\n\n```javascript\nimport { ApolloClient, ApolloLink } from '@apollo/client'\nimport { cacheFirstNetworkErrorLink } from 'apollo-link-network-error'\n\nconst cache = new InMemoryCache()\n// Create the cache first network error link\nconst errorIgnoreLink = cacheFirstNetworkErrorLink(cache)\nconst link = ApolloLink.from([errorLink, errorIgnoreLink, httpLink])\nconst client = new ApolloClient({\n  cache,\n  link,\n})\n\npersistCache({ cache, storage: AsyncStorage })\n```\n\n_Note: Once set up, you can add the flag in context (i.e. `context: { __skipErrorAccordingCache__: true }`)._\n\n### Network-first Example\n\n\u003e NOTE: As all we know, apollo client provide the `fetchPolicy: 'network-only'`, this policy will try visit remote data, **if success, it will store the data to cache**\n\n**`'network-only' + cacheFirstNetworkErrorLink`**: This a kind of like the network-first behavior. it will try to visit network data first. **if the server can't be reached or no network**, it will use the cache data. if no cache data, it will throw a network error\n\n```javascript\n// Note: You can not use 'cache-and-network' on client.query(). this is the limitation from apollo.\nclient.query({\n  fetchPolicy: 'network-only',\n  query: /* Your query here */,\n  // Enable error ignore\n  context: { __skipErrorAccordingCache__: true }\n  variables: /* Your variables here */\n});\n\n```\n\n#### React-hook\n\n```javascript\nconst { data, error } = useQuery(YOUR_QUERY, {\n  variables: YOUR_VARIBLES,\n  fetchPolicy: 'network-only',\n  context: { __skipErrorAccordingCache__: true },\n})\n```\n\n### Offline-first Example\n\n\u003e NOTE: As all we know, apollo client provide the `fetchPolicy: 'cache-and-network'`. It will use local data and then try to fetch the network data. However, it errors if the server can't be reached or no network connection\n\n**`'cache-and-network' + cacheFirstNetworkErrorLink`**: **if the server can't be reached or no network**, it still try to use cache data. if no cached data, it will throw a network error.\n\n#### React-Apollo\n\n```javascript\n\u003cQuery\n  query=YOUR_QUERY\n  variables=YOUR_VARIBLES\n  fetchPolicy=\"cache-and-network\"\n  context={{__skipErrorAccordingCache__: true}}\n\u003e\n  {props.children}\n\u003c/Query \u003e\n```\n\n#### React-hook\n\n```javascript\nconst { data, error } = useQuery(YOUR_QUERY, {\n  variables: YOUR_VARIBLES,\n  fetchPolicy: 'cache-and-network',\n  context: { __skipErrorAccordingCache__: true },\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhollyoops%2Fapollo-link-network-error","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhollyoops%2Fapollo-link-network-error","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhollyoops%2Fapollo-link-network-error/lists"}