SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).

SuperTokens.com

I've been encountering an issue with the supertoken and react query. Is there any proper way to implement it?

```tsx
export const useData = () => {
  const session = useSessionContext();
  if (session.loading) {
    return { data: null, isLoading: true, error: null };
  }
  const {
    data,
    isLoading,
    error,
  } = useQuery({
    queryKey: ['somedata'],
    queryFn: async () => {
      const res = await axios.get(API+'/'+session.userId).then((response) => response.data);
      return res[0];
    },
  });
  return {
    data,
    isLoading,
    error,
  };
};```

So basically what I'm trying to do is.
get session data > get user id from session data > then use the user id to fetch some personal data.
.
.
.

However, this approach throws me `rendered more hooks than during the previous render` error since I'm using if statement with hooks.

so you can't really call hooks in a conditional way in react

this is more of a react issue thing than supertokens

I know its a react issue. But can you suggest me any workaround with supertoken? Like how can I get session data without `useSessionContext` or using session.loading.

Right. So in the `queryFn` function, you can call `await Session.doesSessionExist`, or `await Session.getAccessTokenPayloadSecurely()` and so on. So don't use the useSessionContext hook we have for this use case

you can see the same page you found the use of the hook, but on the right, there is blue box, click on "custom UI" in that.