Tepki-apollo kullanımı ile hataların ele alınması

Kafamı bu soruna getirmeye çalışıyorum ama buna güçlü bir cevap bulamadım. UseMutation kancasını kullanarak bir oturum açma mutasyonu yürütmeye çalışıyorum.

TLDR; Seçeneklerde geçen onError ile kullanım tarafından bana verilen hata arasındaki farkın tam olarak ne olduğunu bilmek istiyorum

İşte kod snippet'im

const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, {
        variables: {
            email,
            password
        },
        onError(err) {
            console.log(err);
        },
});

Sunucu tarafında, giriş için kullanılan önceden ayarlanmış / sabit kodlu bir e-postam var ve Apollo veya başka bir istemci kullanmıyorum. Bu Oturum Açma Mutasyonunun çözümleyicisinde, e-posta ile aynı değilse bir hata atıyorum

throw new Error('Invalid Email');

Şimdi istemci tarafında bu hatayı işlemek istiyorum (React). Ama benim endişem, eğer useMutation kancasından döndürülen 'hata' kullanır ve hatayı bu şekilde göstermeye çalışırsam

render() {
...
{error && <div> Error occured </div>}
...
}

hata kullanıcı arayüzünde güncellenir, ancak hemen React bana İşlenmeyen Reddetme ile bir ekran gösterir (Hata): Graphql hatası: My-custom-error-message

Ancak, onMutate işlevini kullanmak için seçeneklerde geçirilen onError kullanırsam, bu ekranı bana göstermez ve hatayla ne istersem yapabilirim.

Ben tam useMutation tarafından bana verildi ve neden onError zaman bana o hata ekranı gösterir tepki vermez seçenekler ve yanlışlıkla geçti OnError arasındaki fark ne olduğunu bilmek istiyorum değil kullandı.

Teşekkürler!

: Apollo onun API üzerinden hatalar iki tür ortaya GraphQL hatalar olarak yanıtın bir parçası olarak iade edilir, errorsyanında, datave ağ hataları bir isteği başarısız olduğunda meydana gelir. Bir sunucuya erişilemediğinde veya yanıt durumu 200 dışında bir şey olduğunda bir ağ hatası oluşur - errorsyanıtta bulunan sorguların durumu hala 200 olabilir. Ancak, geçersiz bir sorgu, örneğin, Apollo İstemcisinde 400 durumu ve ağ hatası.

Apollo Client aslında mutasyon hatalarını ele almak için dört farklı yol sunar:

1.) Çağanoz mutatetarafından döndürülen fonksiyonun çağrılması bir Söz verir. İstek başarılı olursa Promise , sunucu tarafından döndürülen bir yanıt nesnesine çözümlenecektirdata . İstek başarısız olursa, Promise hatayla reddedilir . Bu yüzden konsolda bir "İşlenmemiş Reddetme" mesajı görüyorsunuz - reddedilen Sözü yerine getirmeniz gerekiyor.

login()
  .then(({ data }) => {
    // you can do something with the response here
  })
  .catch(e => {
    // you can do something with the error here
  })

veya eşzamansız / bekliyor sözdizimi ile:

try {
  const { data } = await login()
} catch (e) {
  // do something with the error here
}

Varsayılan olarak, Promise üzerinde reddedecektir ya GraphQL hataları veya ağ hataları. Ayarlayarak errorPolicy için ignoreya allda, Promise olacak sadece ağ hatalarında reddediyoruz. Bu durumda, GraphQL hatalarına yanıt nesnesi aracılığıyla erişilebilecek, ancak Promise çözümlenecektir.

2.) Yukarıdakilerin tek istisnası, bir onErrorişlev sağladığınızda gerçekleşir . Bu durumda, Promise reddetmek yerine her zaman çözülür, ancak bir hata oluşursa, onErrorortaya çıkan hatayla çağrılır. errorPolicy- Belirlediğiniz burada da geçerlidir onErrordaima ağ hataları için çağrılır ancak varsayılan kullanırken sadece GraphQL hatalarla adı verilecek errorPolicyait none. Kullanmak onError, reddedilen Sözü yakalamakla eşdeğerdir - sadece hata işleyicisini mutateişlevin çağrı sitesinden çağrının çağrı sitesine taşır .

3.) Bu mutateişleve ek olarak , useMutationkanca ayrıca bir sonuç nesnesi döndürür. Bu nesne, mutasyon çalıştırılırken karşılaşılan hataları da ortaya çıkarır. Yukarıda yazdığımız hata işleyici işlevlerinin aksine, bu errornesne uygulama durumunu temsil eder . Bu şekilde açığa çıkarılan errorhem datanesneler hem de nesneler kolaylık sağlar. Bunu yapmakla eşdeğerdirler :

const [mutate] = useMutation(YOUR_MUTATION)
const [data, setData] = useState()
const [error, setError] = useState()
const handleClick = async () => {
  try {
    const { data } = await mutate()
    setData(data)
  catch (e) {
    setError(e)
  }
}

Böyle bir hata durumuna sahip olmak, kullanıcı arayüzünüzün bir hata olduğunu yansıtmasını istediğinizde yararlı olabilir. Örneğin, mutasyon hatasız çalışana kadar bir öğenin rengini değiştirebilirsiniz. Yukarıdaki kazan plakasını kendiniz yazmak yerine, sadece sağlanan sonuç nesnesini kullanabilirsiniz.

const [mutate, { data, error }] = useMutation(YOUR_MUTATION)

NOT: Eğer UI güncelleştirmek maruz hata durumunu kullanabilirsiniz, bunu yaparken olduğu değil aslında yerini taşıma hatası. Sen gerekir ya bir sağlamak onErrorgeri arama veya catchişlenmeyen bir Promise ret hakkında uyarılar önlemek için hatayı.

4.) Son olarak, istekleriniz için genel hata işleme eklemek için apollo-link-error komutunu da kullanabilirsiniz . Bu, örneğin, isteğinizin nereden kaynaklandığına bakılmaksızın bir hata iletişim kutusu görüntülemenize olanak tanır.

Bu yöntemlerden hangisini uygulamanızda kullandığınız, ağırlıklı olarak ne yapmaya çalıştığınıza bağlıdır (global vs local, state vs callback vb.). Çoğu uygulama, birden fazla hata işleme yönteminden yararlanır.