Apollo-link: рд▓реЗрдЦрди рддреНрд░реБрдЯрд┐: рдЖрдЧреЗ рдХреЛрдИ рдлрд╝рдВрдХреНрд╢рди рдирд╣реАрдВ рд╣реИ @ apollo/[email protected], @apollo/[email protected]

рдХреЛ рдирд┐рд░реНрдорд┐рдд 11 рдлрд╝рд░ре░ 2020  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: apollographql/apollo-link

рдЕрдкреЗрдХреНрд╖рд┐рддреН рд╡реНрдпрд╡рд╣рд╛рд░
onError() рд╕реЗ @apollo/link-error рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп рд╣рдореЗрдВ 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);
  }),
});

рдПрдХ рдШрдЯрдХ рдХреЗ рд╕рд╛рде рдмрд╛рддрдЪреАрдд рдХрд░рдиреЗ рдкрд░ рдЬреЛ рдЧреНрд░рд╛рдлрд╝рдХреНрдпреВрдПрд▓ рдЕрдиреБрд░реЛрдз рдХрд░рддрд╛ рд╣реИ, рджреБрд░реНрднрд╛рдЧреНрдп рд╕реЗ рдпрд╣ рд╕рдм рдореБрдЭреЗ рдорд┐рд▓рддрд╛ рд╣реИред
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

рдПрдХ _рд╕рд░рд▓_ рдкреНрд░рдЬрдирди
рдореИрдВрдиреЗ рдПрдХ рдХреЛрдбрд╕реИрдирдмреЙрдХреНрд╕ рд╕реНрдерд╛рдкрд┐рдд рдХрд░рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд┐рдпрд╛, рд▓реЗрдХрд┐рди рдпрд╣ рдПрдХ рдЧреБрдкреНрдд рдирд┐рд░реНрднрд░рддрд╛ рд╕рдорд╕реНрдпрд╛ рдХреЗ рд╕рд╛рде рдПрд╕реА 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()
})

[рд╕рдВрдкрд╛рджрд┐рдд] рдЗрд╕ рдкрд░ рдХреЛрдИ рдЕрдкрдбреЗрдЯ? рдореИрдВ рдЖрд░рд╕реА рд╕рдВрд╕реНрдХрд░рдг рдкрд░ рд╣реВрдВ рдФрд░ рдЕрднреА рднреА 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 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

Nickersoft picture Nickersoft  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

roupen picture roupen  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

j3ddesign picture j3ddesign  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

tim-soft picture tim-soft  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

SaschaDens picture SaschaDens  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ