React apollo의 모든 요청마다 오류 처리

Question

모든 오류를 포착 할 수있는 미들웨어를 만드는 방법 (예 : 필요한 토큰, 토큰 만료 또는 손상 요청) 모든 요청에서이 오류를 catch하고 호출 할 수 있어야합니다. 쿼리 및 변이.

예 : 만료 된 토큰의 경우 토큰을 다시 가져 와서 요청을 반복해야합니다. 토큰이 손상되면 사용자를 로그 아웃하고 모든 쿼리를 다시 가져와야합니다. 그리고 내가 처리해야하는 오류 마녀의 유형은 많을 수 있습니다.

에서 (반응 - 아폴로 문서)

networkInterface.useAfter([{ 
    applyAfterware({ response }, next) { 
    if (response.status === 401) { 
     logout(); 
    } 
    next(); 
    } 
}]); 

내가 오류를 graphql에 액세스하고 쿼리 나 돌연변이를 호출 할 수 없습니다.

Answer 1

모든 요청을 보내기 전에 토큰이 있는지 확인할 수 있습니다. 토큰이 없다면, 애플리케이션의 다른 곳에서 처리하거나 미들웨어 기능에서 곧바로 다른 것을 가져와야합니다. 토큰이 있어야하는 모든 구성 요소를 래핑하는 상위 구성 요소를 만들 수 있습니다. 어떤 이유로 든 토큰이없는 경우 브라우저를 사용하는 경우 다른 토큰을 가져 와서 localStorage에 저장하거나 React Native를 사용하는 경우 asyncstorage에 저장할 수 있습니다. localStorage 또는 asyncStorage에 할당하면 아래의 미들웨어 코드 스 니펫은 모든 요청과 보내기 전에 모든 토큰을 확인합니다. 여기에는 모든 쿼리와 변이가 포함됩니다. 사용자가 토큰을 가지고 있지 않다면 구성 요소에서 다시 로그인해야하는 페이지로 리디렉션 한 다음 토큰을 localstorage 또는 asynstorage로 설정합니다. 다시 한번 아폴로 클라이언트의 미들웨어는 그런 방식으로 액세스 할 수 있습니다.

import ApolloClient, { createNetworkInterface } from 'apollo-client'; 
import { checkForSessionToken } from '../../utils/authentication'; 

const networkInterface = createNetworkInterface({ 
    uri: 'https://localhost:4000' 
}); 

networkInterface.use([{ 
    applyMiddleware(req, next) { 
    // Create the header object if needed. 
    if (!req.options.headers) { 
     req.options.headers = {}; 
    } 

    // get the authentication token from Async storage 
    // and assign it to the request object 
    checkForSessionToken() 
    .then(SESSION_TOKEN => { 
     if (SESSION_TOKEN === null || SESSION_TOKEN === undefined { 
      fetchNewToken() 
      .then(SESSION_TOKEN => { 
       localStorage.setItem('token', SESSION_TOKEN); 
       req.options.headers.Authorization = `Bearer 
       ${SESSION_TOKEN}`; 
      } 
     } else { 
     req.options.headers.Authorization = `Bearer ${SESSION_TOKEN}`; 
     } 

     next(); 
    }) 
    .catch(error => { 
     fetchNewToken() 
     .then(SESSION_TOKEN => { 
      localStorage.setItem('token', token); 
      req.options.headers.Authorization = `Bearer 
      ${SESSION_TOKEN}`; 
     } 

     next(); 
    }) 
    } 
}]); 

const client = new ApolloClient({ 
    networkInterface, 
    dataIdFromObject: o => o.id 
}); 

export default client;