Apollo-link: TypeError: 전달은 @apollo/[email protected], @apollo/[email protected] ν•¨μˆ˜κ°€ μ•„λ‹™λ‹ˆλ‹€.

에 λ§Œλ“  2020λ…„ 02μ›” 11일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: apollographql/apollo-link

μ˜ˆμƒλ˜λŠ” λ™μž‘
@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 μš”μ²­μ„ λ§Œλ“œλŠ” ꡬ성 μš”μ†Œμ™€ μƒν˜Έ μž‘μš©ν•  λ•Œ λΆˆν–‰νžˆλ„ 이것이 λ‚΄κ°€ μ–»λŠ” μ „λΆ€μž…λ‹ˆλ‹€.
Screen Shot 2020-02-11 at 10 28 41 AM
μ˜ˆμ™Έκ°€ λ°œμƒν•˜λ©΄ λ²ˆλ“€μ—μ„œ λ‹€μŒμ„ μ–»μŠ΅λ‹ˆλ‹€.
Screen Shot 2020-02-11 at 10 36 34 AM
Screen Shot 2020-02-11 at 10 38 48 AM

_λ‹¨μˆœν•œ_ μž¬μƒμ‚°
Codesanboxλ₯Ό μ„€μ •ν•˜λ €κ³  ν–ˆμ§€λ§Œ μ•”ν˜Έ 쒅속성 λ¬Έμ œκ°€ μžˆλŠ” AC 3.0μ—μ„œλŠ” μ‹€νŒ¨ν•©λ‹ˆλ‹€.
https://codesandbox.io/s/apolloclient-3-local-state-management-before-reactive-variables-nr1kg

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

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()
})

λͺ¨λ“  3 λŒ“κΈ€

λ² νƒ€λ‘œ μ—…κ·Έλ ˆμ΄λ“œν•  λ•Œλ„ λ™μΌν•œ λ¬Έμ œκ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€.

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
    });
이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰