[Front] Reload management

[clostao]

Currently when a user makes a write operation (e.g upload a file) for reloading data from the application a window.location.reload() is used. This should change to some alternative such as router.refresh().

[iamnamananand996]

Hi @clostao,

This is not that simple 🤔, and I agree with the fact that, after each action reloading the whole page is a Bad UX.

window.location.reload() --> router.refresh()

Above could have worked if we where use server-side data fetching e.g. fetch inside a Server Component or getServerSideProps.

But In our case, it we using client-side data fetching like useQuery or fetch inside useEffect / useCallback, so router.refresh() does not automatically trigger a re-fetch unless the fetching library supports it.

I am listing some way, which can achieve this and make it better.

Approach 1 (not UX friendly) because we will need to add a refresh button

const { data, loading, refetch } = useGetMyFilesQuery({
  variables: {
    oauthUserId: user?.oauthUserId ?? '',
    oauthProvider: user?.oauthProvider ?? '',
    limit: pageSize,
    offset: currentPage * pageSize,
  },
  fetchPolicy: 'no-cache', // Ensures fresh data every time
});

// Call refetch() after a file upload if possible or else add refresh button 
const handleFileUpload = async () => {
  await uploadFile(); // Your file upload logic
  refetch(); // Re-fetch the GraphQL query instead of full page reload
};

Approach 2

import { useApolloClient } from "@apollo/client";

const client = useApolloClient();

const handleFileUpload = async () => {
  await uploadFile();
  client.refetchQueries({ include: ["GetMyFiles"] }); // Replace "GetMyFiles" with the actual query name
};

Approach 3 (I would go for, will help in long run)

Whenever, we have this kind of use case, where component are dependent to each other, we should consider having global store, architecture, that help to reduce the complexity and maintain the data Consistency.

So we should Maintain a global store, as we are using zustand so zustand global store for the page, and do API call under the store, and share data from their to each component.

One time changes, but help to extend thing further, easily like

• Store level caching.
• optimistic updates
• No need to call the API again, when deleting something, just remove entry from the store
• Improved UX

etc.

Let me know, if you like any of the solution, I would love to do the implementation.

cc - @jfrank-summit, @marc-aurele-besner

Meaning while, can I get the deployed url version for this ENV key.

auto-drive/frontend/src/app/api/auth/[...nextauth]/jwt.ts

Line 6 in e718787

process.env.NEXT_PUBLIC_AUTH_API_URL || 'http://localhost:3030';

[marc-aurele-besner]

I'm under the impression that many of these query could be switched to subscription and this should fix the issue.
The approach 1 is also very easy to implement, and I don't see why we will need to add a refresh button, like if I create a api key, the front end call the proper api route, then when the frontend receives the response from the api, call refetch from apollo and the data update.

[iamnamananand996]

Hi @marc-aurele-besner, I was expecting this question, thank you for asking.

Yes we can go with Approach 1 also, It just need to have nested Props drilling, which I don't like 😅, when we extend thing, It becomes hard to mange.

like if I create a api key, the front end call the proper api route, then when the frontend receives the response from the api, call refetch from apollo and the data update.

API key use case is simple, I was thinking it for files upload, delete, search use case, for example search, right now, when user click on the searched dropdown element, it send to another page with very limited data, it could have shown the results on same table we have, that will help when we add filter and sorting, like user can have combination all 3 action (searched something, applied filter on it and then sorted it) these thing will be solved in global store approach.

I'm under the impression that many of these query could be switched to subscription and this should fix the issue

I was not aware about this, if we are going to have subscription, then we can have it Approach 1 for now, and subscription will anyway overcome this 🚀.