](https://www.npmjs.com/package/react-apollo-network-status)
6 |
7 | This library helps with implementing global loading indicators like progress bars or adding global error handling, so you don't have to respond to every error in a component that invokes an operation.
8 |
9 | ## Usage
10 |
11 | ```js
12 | import React from 'react';
13 | import ReactDOM from 'react-dom';
14 | import {ApolloClient, InMemoryCache, createHttpLink, ApolloProvider} from '@apollo/client';
15 | import {createNetworkStatusNotifier} from 'react-apollo-network-status';
16 |
17 | const {link, useApolloNetworkStatus} = createNetworkStatusNotifier();
18 |
19 | function GlobalLoadingIndicator() {
20 | const status = useApolloNetworkStatus();
21 |
22 | if (status.numPendingQueries > 0) {
23 | return Loading …
; 24 | } else { 25 | return null; 26 | } 27 | } 28 | 29 | const client = new ApolloClient({ 30 | cache: new InMemoryCache(), 31 | link: link.concat(createHttpLink()) 32 | }); 33 | 34 | const element = ( 35 |Pending queries: {numPendingQueries}
; 124 | } 125 | ``` 126 | -------------------------------------------------------------------------------- /example/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true 4 | }, 5 | "rules": { 6 | "import/no-extraneous-dependencies": ["error", {"devDependencies": true, "peerDependencies": true}] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /example/DataFetcher.tsx: -------------------------------------------------------------------------------- 1 | import {useQuery} from '@apollo/client'; 2 | import gql from 'graphql-tag'; 3 | import React, {useState, useEffect} from 'react'; 4 | 5 | type Props = { 6 | isBroken?: boolean; 7 | initialSkip?: boolean; 8 | id?: string; 9 | }; 10 | 11 | const query = gql` 12 | query DataFetcher($id: ID!) { 13 | user(id: $id) { 14 | id 15 | name 16 | } 17 | } 18 | `; 19 | 20 | interface Data { 21 | user: { 22 | id: string; 23 | name: string; 24 | }; 25 | } 26 | 27 | interface Variables { 28 | id: string; 29 | } 30 | 31 | export default function DataFetcher({ 32 | isBroken, 33 | initialSkip = true, 34 | id = '1' 35 | }: Props) { 36 | const [skip, setSkip] = useState(initialSkip); 37 | const {data, loading, error, refetch} = useQuery{content}
; 93 | } 94 | -------------------------------------------------------------------------------- /example/DataUpdater.tsx: -------------------------------------------------------------------------------- 1 | import gql from 'graphql-tag'; 2 | import {useMutation} from '@apollo/client'; 3 | import React, {FormEvent, useState} from 'react'; 4 | 5 | const mutation = gql` 6 | mutation updateUser($id: ID!, $user: UserInput!) { 7 | updateUser(id: $id, user: $user) { 8 | id 9 | name 10 | } 11 | } 12 | `; 13 | 14 | interface Data { 15 | upderUser: { 16 | id: string; 17 | name: string; 18 | }; 19 | } 20 | 21 | interface Variables { 22 | id: string; 23 | user: { 24 | name: string; 25 | }; 26 | } 27 | 28 | export default function DataUpdater() { 29 | const [name, setName] = useState(''); 30 | const [updateUser, result] = useMutationNetwork status: {statusMessage}
55 | 63 |