javascript - How to change loading data? (From server or cache)

Question

I'm creating react-native app with login. When user log in I load data with apolo client. Then when user close the app and again open it, it shoud automatically log in and load data from cache. But I have no idea how to do it.

Here are my files:

1. Providers.js:

export default function Providers() {
  return (
    <SafeAreaProvider forceInset={{top: 'always', bottom: 'always'}}>
      <ApolloProvider client={apoloCLient}>
        <Authprovider>
          <Routes />
        </Authprovider>
      </ApolloProvider>
    </SafeAreaProvider>
  );
}

2.Authprovider.js:

export const MyContext = createContext({});

const AUTH_USER = gql`
  query($name: String!, $key: String!) {
    UserAuth(name: $name, key: $key) {
      AuthStatus
      __typename
    }
  }
`;

export default function AuthProvider({children}) {
  const [callData, {called, loading, data}] = useLazyQuery(AUTH_USER);
  const [user, setUser] = useState(null);
  const [info, setInfo] = useState(null);

  const resetStorage = async () => {
    await AsyncStorage.removeItem('user', (err) => {
      if (err) {
        console.log(err);
      }
    });
    console.log('cleared');
  };

  useEffect(() => {
    console.log('1');
    if (data) {
      if (data.UserAuth.AuthStatus === true) {
        setUser(true);
      } else {
        console.log('wrong');
        resetStorage();
        setUser(false);
      }
    }
  }, [data]);

  if (loading) {
    return (
      <Center>
        <ActivityIndicator size="large" color="#0000ff" />
      </Center>
    );
  }

  return (
    <MyContext.Provider
      value={{
        user,
        setUser,
        data,
        info,
        setInfo,
        LogIn: async (name, passw) => {
          console.log('clicked');
          //Hashing logic
          let HashedName = base64.encode(name);
          let HashedPassw = base64.encode(passw);
          let connect = HashedName + ':' + HashedPassw;

          //getting a key
          let key = base64.encode(connect);
          const info = {name: HashedName, key: key};
          setInfo(info);

          // storing UserInfo, because of authorization
          await AsyncStorage.setItem('user', JSON.stringify(info), (err) => {
            if (err) {
              console.error(err);
            }
          });

          // calling data
          callData({
            variables: {name: HashedName, key: key},
            fetchPolicy: 'network-only',
          });
        },
        LogOut: async () => {
          setUser(null);
          await AsyncStorage.removeItem('user', (err) => {
            if (err) {
              console.error(err);
            }
          });
        },
      }}>
      {children}
    </MyContext.Provider>
  );
}

3.Routes.js:

export default function Routes() {
  let {user, setUser, called, data, setInfo} = useContext(MyContext);

  useEffect(() => {
    console.log('3');
    //check if the user is logged in or not
    if (!data) {
      AsyncStorage.getItem('user')
        .then((userToken) => {
          if (userToken) {
            console.log('userToken ' + userToken);
            setInfo(JSON.parse(userToken));
            setUser(true);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }, []);
  return <>{user ? <AppTabs /> : <AuthTabs />}</>;
}

4.AppTabs.js:

export default function AppTabs() {
  const client = useApolloClient();
  const {info} = useContext(MyContext);
  const {loading, error, data} = useQuery(GET_USER, {
    variables: info,
  });

  const test = client.readQuery({
    query: GET_USER,
    variables: info,
  });

  //console.log(data);
  console.log(test);

  if (loading) {
    return (
      <Center>
        <ActivityIndicator size="large" color="#0000ff" />
      </Center>
    );
  }

  return (
   .......
  );
}

How can I get data in AppTabs from cache, but only if the user is logged in?

If you have any questions, feel free to ask! Thanks for any help

question from:https://stackoverflow.com/questions/65672117/how-to-change-loading-data-from-server-or-cache

Answer 1

Waitting for answers