Apollo-link: Nicht abgefangener (versprochener) Fehler: GraphQL-Fehler

Erstellt am 22. Nov. 2017  ·  3Kommentare  ·  Quelle: apollographql/apollo-link

Hallo, ich arbeite mit vue 2.5.3, vuex 3.0.1, apollo-client 2.0.3, apollo-link-error 1.0.1 und apollo-server-express 1.1.7

Ich versuche, meine Fehlerbehandlung mit apollo-link-error zu zentralisieren. Wenn ich also einen GraphQL-Fehler oder einen Netzwerkfehler erwarte, funktioniert alles wunderbar, aber ich erhalte die folgende Fehlermeldung in der Konsole:

Uncaught (in promise) Error: GraphQL error: <<message>> at new ApolloError (ApolloError.js?d743:34)

Mein Arbeitsablauf ist: Die vue-Komponente ruft eine async-Funktion auf, die die vuex-async-Aktion auslöst, die die graphql-Mutation aufruft.

Mein Code ist wie folgt

Vue-Komponentenmethode:

async signIn (form) {
  const validForm = await this.$validator.validateAll()
  if (validForm) {
    await this.$store.dispatch('signIn', form)
    this.$router.push('perfil')
  }
}

Vuex-Aktion:

async signIn ({ commit }, signIn) {
  commit('setLoading', true)
  const { data } = await apolloClient.mutate({
    variables: { signIn },
    mutation: SIGN_IN_MUTATION
  })
  const { token, refreshToken } = data.signIn
  localStorage.setItem('token', token)
  localStorage.setItem('refresh-token', refreshToken)
  commit('setLoading', false)
}

Apollo-Client-Konfiguration:

import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { setContext } from 'apollo-link-context'
import { ApolloLink } from 'apollo-link'
import { onError } from 'apollo-link-error'
import store from '../store'

const requestLink = createHttpLink({
  uri: 'http://localhost:3000/graphql',
  credentials: 'include'
})

const errorLink = onError(({ operation, response, graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.map(({ message, locations, path }) => {
      store.commit('setErrorDialog', message)
    })
  }
  if (networkError) {
    store.commit('setErrorDialog', 'Sorry, our server is off-line. Please try again later.')
  }
})

const middlewareLink = setContext(() => ({
  headers: {
    'x-token': localStorage.getItem('token'),
    'x-refresh-token': localStorage.getItem('refresh-token')
  }
}))

const afterwareLink = new ApolloLink((operation, forward) => {
  const { headers } = operation.getContext()
  if (headers) {
    const token = headers.get('x-token')
    const refreshToken = headers.get('x-refresh-token')
    if (token) {
      localStorage.setItem('token', token)
    }
    if (refreshToken) {
      localStorage.setItem('refresh-token', refreshToken)
    }
  }
  return forward(operation)
})

const link = ApolloLink.from([afterwareLink, middlewareLink, errorLink, requestLink])

const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache()
})

export default apolloClient

Alle 3 Kommentare

@lobosan der onError Link verhindert nicht, dass der Fehler zum Apollo-Client (und damit zu Ihren Endkomponenten) zurückkehrt, sondern ist eher ein Haken, mit dem Sie alle netzwerkbezogenen Fehler abonnieren können, um sie zu protokollieren, auth zu behandeln fließen usw.

Hilft das?

Auch 😍 für die gemeinsame Nutzung von Vue und Apollo!

@jbaxleyiii danke für deine Antwort. Ja, das macht Sinn, daher ist es meiner Meinung nach nicht wirklich möglich, die Fehlerbehandlung zu zentralisieren und alle Versprechen innerhalb des Fehlerlinks zu lösen. Stattdessen mache ich Try/Catch in jeder meiner Funktionen, die mit graphql interagieren

Gilt diese Schlussfolgerung auch 2020 mit dem neuesten Apollo-Client noch? Wir können immer noch keine zentrale Fehlerbehandlung haben? Wir müssen jeden Fehler bei jeder Komponente, die eine Apollo-Abfrage ausgibt, einzeln behandeln?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen