Как я должен использовать useQuery и useEffect для совместной работы? - PullRequest
Новая
       31

Как я должен использовать useQuery и useEffect для совместной работы?

0 голосов
/ 23 февраля 2020

Я пытаюсь реализовать поток аутентификации apollo в реактивный , используя документы, найденные по следующей ссылке.

Чего я пытаюсь достичь

on Загрузка приложения . используя refre sh токен , я бы хотел получить новый accessToken и обновить sh токен . по завершении извлечения я хотел бы сохранить данные в постоянном хранилище .

TokenManager : Это в основном AsyncStorage

Ожидаемый поток

  1. TokenManager получит refreshToken из AsyncStorage
  2. useQuery будет использовать refreshToken для получения новых токенов (accessToken и refreshToken)
  3. useEffect будет сохранять refreshToken to AsyncStorage 
    export default function App() {  

        const refreshToken = await TokenManager.getRefreshToken()
        if (refreshToken) {    
            const [loading, error, data] = useQuery(REFRESH_TOKENS_GQL_MUTATION, {
                variables: {
                    refreshToken
                }
            })
        }

        const [state, dispatch] = React.useReducer(
            (prevState, action) => {
                switch (action.type) {
                    case 'RESTORE_TOKEN':
                        return {
                            ...prevState,
                            userToken: action.token,
                            isLoading: false,
                        };
                    }
                }
            }
        )


        React.useEffect(() => {
            // Fetch the token from storage then navigate to our appropriate place
            const bootstrapAsync = async () => {
                if(refreshToken && data) {
                    // store the new refresh token to persistent storage
                    await TokenManager.setRefreshToken(data.refreshToken)

                    // After restoring token, we may need to validate it in production apps

                    // This will switch to the App screen or Auth screen and this loading
                    // screen will be unmounted and thrown away.
                    dispatch({ type: 'RESTORE_TOKEN', token: data.accessToken });
                }
            };

            bootstrapAsync();
        }, []);
    }
...