Here i'm trying to answer your question <br/>
The changes that i make is:<br />
1. Change your function component to Class Component, the reason is (Read the comment below) <br/>
2. Change the order of apolloLink. Here is the source https://github.com/apollographql/apollo-link/issues/133. The author said `LogLink` is running first before `httpLink`. He put the `LogLink` after `httpLink`.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
import React, { useContext, useEffect } from 'react'
import { ApolloProvider } from '@apollo/react-hooks'
import { ApolloClient, DefaultOptions } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloLink, Observable, Operation, NextLink } from 'apollo-link'
import { createUploadLink } from 'apollo-upload-client'
import { onError } from 'apollo-link-error'
import { AppContext } from 'contexts/AppContext'
import { Subscription } from 'apollo-client/util/Observable'
import { NotifierType } from 'components/Notifier'
import i18n from 'i18n'
class ApolloCustomProviderWithContext extends React.Component {
constructor(props) {
// The reason i change to class component is when u add a notification, your whole component won't rerender. But it will rerender if u use functional component and causing spam notification on your onError.
const request = (operation: Operation): void => {
console.log('ApolloCustomProvider request')
const token = localStorage.getItem('at')
operation.setContext({
headers: {
authorization: token ? `Bearer ${token}` : '',
},
})
}
const requestLink = new ApolloLink(
(operation: Operation, nextLink: NextLink) =>
new Observable(observer => {
console.log('gql requestLink observer')
let handle: Subscription
Promise.resolve(operation)
.then((o: Operation): void => void request(o))
.then(() => {
handle = nextLink(operation).subscribe({
next: observer.next.bind(observer),
error: observer.error.bind(observer),
complete: observer.complete.bind(observer),
})
})
.catch(observer.error.bind(observer))
return (): void => {
if (handle) handle.unsubscribe()
}
})
)
const errorLink: ApolloLink = onError(({ graphQLErrors, networkError }): void => {
console.log('ApolloCustomProvider errors', graphQLErrors, networkError)
if (graphQLErrors)
addNotification(
NotifierType.ERROR,
graphQLErrors.map(({ message }) => message)
)
if (networkError)
addNotification(NotifierType.ERROR, [
`${i18n.t('notification.networkError')}: ${networkError.message}`,
])
})
const uploadLink: ApolloLink = createUploadLink({ uri: process.env.REACT_APP_CORE_URI })
const defaultOptions: DefaultOptions = {
watchQuery: {
fetchPolicy: 'no-cache',
},
query: {
fetchPolicy: 'no-cache',
},
}
const client = new ApolloClient({
// I change the order of this ApolloLink.from
link: ApolloLink.from([errorLink, uploadLink, requestLink]),
cache: new InMemoryCache(),
defaultOptions,
})
this._client = client
}
render () {
return (
<ApolloProvider client={this._client}>
{this.props.children}
</ApolloProvider>
)
}
}
const ApolloCustomProvider = props => {
const { addNotification } = useContext(appContext)
return <ApolloCustomProviderWithContext {...props} addNotification={addNotification} />
}
export default ApolloCustomProvider
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
That's [*property spread notation*][1]. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "[JSX spread attributes][2]" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" enumerable properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);
<!-- language: lang-css -->
.first {
color: green;
}
.second {
color: blue;
}
<!-- language: lang-html -->
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
<!-- language: lang-css -->
.as-console-wrapper {
max-height: 100% !important;
}
<!-- end snippet -->
[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
[2]: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes
