Bug Report: User login requires refresh to fetch data

[kanhaiya04]

Describe the bug
After logging as user we need to refresh the page to fetch the data.

To Reproduce
Steps to reproduce the behavior:

1. Login as user
2. You will notice no data is present, showing undefined.

Expected behavior
Data of the user should be fetched after successful login.

Actual behavior
Data is not fetched properly after the login, need to refresh to the page to get the data.

Screenshots
If applicable, add screenshots to help explain your problem.

Screencast.from.26-01-24.12.49.00.AM.IST.mp4

Additional details
Add any other context or screenshots about the feature request here.

Potential internship candidates
Please read this if you are planning to apply for a Palisadoes Foundation internship PalisadoesFoundation/talawa#359

[kanhaiya04]

@palisadoes Please assign me this issue.

[kanhaiya04]

After debugging the issue, I found the reason why this is happening.

The header for the HTTP server is not set with the token after a successful login.

const httpLink = new HttpLink({ uri: BACKEND_URL, headers: { authorization: 'Bearer ' + localStorage.getItem('token') || '', }, });

This piece of code in index.js sets the header with the token initially as null when the client starts, but the header value dynamically does not change as the value changes in local storage.

That's why it needs a refresh after login to fetch the token from local storage and set the header.

To fix this, we have a few options:

First: Use the setContext function from ApolloClient to update the header dynamically as the value changes in local storage. It requires a few changes in how the ApolloClient is created in the index.js file.

Second: Pass the header along with the request. Example:
const { data: userData, error: errorUser, }: { data: InterfaceUserType | undefined; loading: boolean; error?: Error | undefined; } = useQuery(USER_ORGANIZATION_LIST, { variables: { id: localStorage.getItem('id') }, context: { headers: { authorization: Bearer ${localStorage.getItem('token')} }, }, });

Third:: use window.location.replace('url') after successful login to redirect the user.

@palisadoes I'd appreciate your view on this.

[palisadoes]

Open a PR. Discuss your approach with the reviewers

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.