μμλλ λμ
@apollo/link-error
onError()
λ₯Ό μ¬μ©ν λ GraphQL μμ² μ μ€λ₯κ° λ°μνμ§ μμ΅λλ€.
μ€μ νλ
λ:
"dependencies": {
"@apollo/client": "^3.0.0-beta.34",
"@apollo/link-error": "2.0.0-beta.3",
μ€μ :
import {
ApolloClient,
ApolloProvider,
InMemoryCache,
} from '@apollo/client';
import { onError } from '@apollo/link-error';
const apolloClient = new ApolloClient({
uri: '/graphql',
// rehydration using the initial state
cache: new InMemoryCache().restore(apolloState),
link: onError(({ graphQLErrors, networkError }) => {
console.log(graphQLErrors, networkError);
}),
});
GraphQL μμ²μ λ§λλ κ΅¬μ± μμμ μνΈ μμ©ν λ λΆννλ μ΄κ²μ΄ λ΄κ° μ»λ μ λΆμ
λλ€.
μμΈκ° λ°μνλ©΄ λ²λ€μμ λ€μμ μ»μ΅λλ€.
_λ¨μν_ μ¬μμ°
Codesanboxλ₯Ό μ€μ νλ €κ³ νμ§λ§ μνΈ μ’
μμ± λ¬Έμ κ° μλ AC 3.0μμλ μ€ν¨ν©λλ€.
https://codesandbox.io/s/apolloclient-3-local-state-management-before-reactive-variables-nr1kg
λ² νλ‘ μ κ·Έλ μ΄λν λλ λμΌν λ¬Έμ κ° λ°μνμ΅λλ€.
uri
μ§μ μ¬μ© λμ HttpLinkκ° ν¬ν¨λλ©΄ μ¬λΌμ§λ κ² κ°μ΅λλ€.
κ·Έλμ μλ§λ libλ 체μΈμ νμ νμ νλͺ©μ΄ μκ³ forward
ν¨μκ° μ‘΄μ¬νλ€κ³ μλͺ» μμνκ³ μμ΅λκΉ?
networkError
κ° apollo-link-context
, apollo-link-error
λ° apollo-link-http
μμ λ°μνλ©΄ μ΄ μ€λ₯κ° λ°μν©λλ€.
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { setContext } from 'apollo-link-context'
import { onError } from 'apollo-link-error'
import { InMemoryCache } from 'apollo-cache-inmemory'
const httpLink = new HttpLink({
uri: // my api URI
})
const authLink = setContext((_, { headers }) => {
// my authorization stuff
})
const errorLink = onError(({ graphQLErrors, networkError }) => {
// my error handling logic
})
const apolloClient = new ApolloClient({
link: authLink.concat(errorLink, httpLink),
cache: new InMemoryCache()
})
[νΈμ§λ¨] μ΄μ λν μ λ°μ΄νΈκ° μμ΅λκΉ? RC λ²μ μ μ¬μ© μ€μ΄κ³ HTTPLINK μμ΄λ λμΌν μ€λ₯κ° λ°μν©λλ€.
"@apollo/client": "^3.0.0-rc.10",
"@apollo/link-batch-http": "^2.0.0-beta.3",
"@apollo/link-context": "^2.0.0-beta.3",
"@apollo/link-error": "^2.0.0-beta.3",
"@apollo/link-retry": "^2.0.0-beta.3",
κ·Έλ¬λ μ°¨λ¨μ ν΄μ νλ €λ©΄ μ΄κ²μ΄ μ μκ² ν¨κ³Όμ μ λλ€.
const link = from([ authLink, logoutLink, new HttpLink({ uri }) ]);
return new ApolloClient({
name: APOLLO_CLIENT_NAME,
version: config.appVersion,
connectToDevTools: true,
link,
cache
});
κ°μ₯ μ μ©ν λκΈ
networkError
κ°apollo-link-context
,apollo-link-error
λ°apollo-link-http
μμ λ°μνλ©΄ μ΄ μ€λ₯κ° λ°μν©λλ€.