My app has a modal with a few buttons. When the buttons are clicked, calls are made to the server, which work as expected. However, the screen does not refresh with the changes and I can't figure out how to make it work. I think I need to update the data, which will cause the components to render again, which is why I'm trying to use refetch. FYI - I found this, which helps a lot, but I'm not sure what's wrong with my implementation.
...
import { GetData } from '../../Api/GetData';
...
export const Timeline = ({props}) => {
const [refresh, setRefresh] = useState(true)
const {isLoading, isSuccess, data, refetch} = useQuery("key",
GetData({name: props.name, period: props.period}), {
staleTime: Infinity,
enabled: false
})
useEffect(() => {
if(refresh) {
setRefresh(false)
refetch()
}
}, [refresh, refetch]) // refresh is set to true by child components
if(isLoading) ...
}
export const GetData = async (params) => {
const baseUrl = process.env.REACT_APP_ESPO_BASE_URL
const url = "https://..."
const headers = {"X-Api-Key": process.env.REACT_APP_API_KEY}
const response = await fetch(url, {method: "GET", headers: headers})
return response.json()
}
Any help would be greatly appreciated.
Your problem is that you're executing GetData when you set up useQuery rather than passing in a function. You can improve this by changing your useQuery call to something like
const {isLoading, isSuccess, data, refetch} = useQuery("key",
() => GetData({name: props.name, period: props.period}), {
staleTime: Infinity,
enabled: false
})
Related
I am new to TRPC and have set up a custom hook in my NextJS app to make queries. This hook is sending out a query to generateRandomWorker but the response always returns a generic 500 error. I am completely stuck until I can figure out this issue.
The hook:
// filepath: src\utilities\hooks\useCreateRandomWorker.ts
type ReturnType = {
createWorker: () => Promise<Worker>,
isCreating: boolean,
}
const useCreateRandomWorker = (): ReturnType => {
const [isCreating, setIsCreating] = useState(false);
const createWorker = async (): Promise<Worker> => {
setIsCreating(true);
const randomWorker: CreateWorker = await client.generateRandomWorker.query(null);
const createdWorker: Worker = await client.createWorker.mutate(randomWorker);
setIsCreating(false);
return createdWorker;
}
return { createWorker, isCreating };
Here is the router. I know the WorkerService calls work because they are returning the proper values when passed into getServerSideProps which directly calls them. WorkerService.generateRandomWorker is synchronous, the others are async.
// filepath: src\server\routers\WorkerAPI.ts
export const WorkerRouter = router({
generateRandomWorker: procedure
.input(z.null()) // <---- I have tried completely omitting `.input` and with a `null` property
.output(PrismaWorkerCreateInputSchema)
.query(() => WorkerService.generateRandomWorker()),
getAllWorkers: procedure
.input(z.null())
.output(z.array(WorkerSchema))
.query(async () => await WorkerService.getAllWorkers()),
createWorker: procedure
.input(PrismaWorkerCreateInputSchema)
.output(WorkerSchema)
.mutation(async ({ input }) => await WorkerService.createWorker(input)),
});
The Next API listener is at filepath: src\pages\api\trpc\[trpc].ts
When the .input is omitted the request URL is /api/trpc/generateRandomWorker?batch=1&input={"0":{"json":null,"meta":{"values":["undefined"]}}} and returns a 500.
When the .input is z.null() the request URL is /api/trpc/generateRandomWorker?batch=1&input={"0":{"json":null}} and returns a 500.
Can anyone help on what I might be missing?
Additional Info
The client declaration.
// filepath: src\utilities\trpc.ts
export const client = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: `${getBaseUrl() + trpcUrl}`, // "http://localhost:3000/api/trpc"
fetch: async (input, init?) => {
const fetch = getFetch();
return fetch(input, {
...init,
credentials: "include",
})
}
}),
],
transformer: SuperJSON,
});
The init:
// filepath: src\server\trpc.ts
import SuperJSON from "superjson";
import { initTRPC } from "#trpc/server";
export const t = initTRPC.create({
transformer: SuperJSON,
});
export const { router, middleware, procedure, mergeRouters } = t;
Sorry I am not familiar with the vanilla client. But since you're in react you might be interested in some ways you can call a trpc procedure from anywhere while using the react client:
By using the context you can pretty much do anything from anywhere:
const client = trpc.useContext()
const onClick = async () => {
const data = await client.playlist.get.fetch({id})
}
For a known query, you can disable it at declaration and refetch it on demand
const {refetch} = trpc.playlist.get.useQuery({id}, {enabled: false})
const onClick = async () => {
const data = await refetch()
}
If your procedure is a mutation, it's trivial, so maybe you can turn your GET into a POST
const {mutateAsync: getMore} = trpc.playlist.more.useMutation()
const onClick = async () => {
const data = await getMore({id})
}
Answered.
Turns out I was missing the export for the API handler in api/trpc/[trpc].ts
I'm beginner of NextJS. I want to make notice board.
Now,
When I click prev or next button router.push(?page=${currentPage})
Then, getServerSideProps get query and request (GET) to server to get currentPage data
getServerSideProps returns data -> in page notice, I use useQuery (react-query)
Then, in this situation, the problem is:
when I click next button, getServerSideProps => correctly gets currentPageData!
BUT: react-query data disappeared with reactqueryDevTools...
It doesn't work correctly.
I want to prefecth nextPageData and show currentPageData using getServerSideProps and react-query.
How can I solve it?
This is my code:
// page/notice/index.tsx
export async function getServerSideProps(context) {
const res = await getNotices(context.query.page)
const data = res.data
return {
props: { result: data },
}
}
export async function getNotices(page) {
return await api.get(`/admin/notice?page=${page}`)
}
export default function Notice({ result }) {
const queryClient = useQueryClient()
const { isLoading, data } = useQuery(
['notices', result.currentPage],
() => getNotices(result.currentPage),
{
initialData: result,
select: (data) => data.data,
},
)
useEffect(() => {
const nextPage = result.currentPage + 1
queryClient.prefetchQuery(['notices', nextPage], () => getNotices(nextPage))
console.log('reactQueryData', data)
}, [result, queryClient])
...
I have built an axios private instance with interceptors to manage auth request.
The system has a custom axios instance:
const BASE_URL = 'http://localhost:8000';
export const axiosPrivate = axios.create({
baseURL: BASE_URL,
headers: {
'Content-Type': 'application/json',
},
withCredentials: true,
});
A custom useRefreshToken hook returns accessToken using the refresh token:
const useRefreshToken = () => {
const { setAuth } = useAuth();
const refresh = async () => {
const response = await refreshTokens();
// console.log('response', response);
const { user, roles, accessToken } = response.data;
setAuth({ user, roles, accessToken });
// return accessToken for use in axiosClient
return accessToken;
};
return refresh;
};
export default useRefreshToken;
Axios interceptors are attached to this axios instance in useAxiosPrivate.js file to attached accessToken to request and refresh the accessToken using a refresh token if expired.
const useAxiosPrivate = () => {
const { auth } = useAuth();
const refresh = useRefreshToken();
useEffect(() => {
const requestIntercept = axiosPrivate.interceptors.request.use(
(config) => {
// attach the access token to the request if missing
if (!config.headers['Authorization']) {
config.headers['Authorization'] = `Bearer ${auth?.accessToken}`;
}
return config;
},
(error) => Promise.reject(error)
);
const responseIntercept = axiosPrivate.interceptors.response.use(
(response) => response,
async (error) => {
const prevRequest = error?.config;
// sent = custom property, after 1st request - sent = true, so no looping requests
if (error?.response?.status === 403 && !prevRequest?.sent) {
prevRequest.sent = true;
const newAccessToken = await refresh();
prevRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
return axiosPrivate(prevRequest);
}
return Promise.reject(error);
}
);
// remove the interceptor when the component unmounts
return () => {
axiosPrivate.interceptors.response.eject(responseIntercept);
axiosPrivate.interceptors.request.eject(requestIntercept);
};
}, [auth, refresh]);
return axiosPrivate;
};
export default useAxiosPrivate;
Now, this private axios instance is called in functional component - PanelLayout which is used to wrap around the pages and provide layout.
Here, I've tried to use AbortControllers in axios to terminate the request after the component is mounted.
function PanelLayout({ children, title }) {
const [user, setUser] = useState(null);
const axiosPrivate = useAxiosPrivate();
const router = useRouter();
useEffect(() => {
let isMounted = true;
const controller = new AbortController();
const signal = controller.signal;
const getUserProfile = async () => {
try {
const response = await axiosPrivate.get('/api/identity/profile', {
signal,
});
console.log(response.data);
isMounted && setUser(response.data.user);
} catch (error) {
console.log(error);
router.push({
pathname: '/seller/auth/login',
query: { from: router.pathname },
});
}
};
getUserProfile();
return () => {
isMounted = false;
controller.abort();
};
}, []);
console.log('page rendered');
return (
<div className='flex items-start'>
<Sidebar className='h-screen w-[10rem]' />
<section className='min-h-screen flex flex-col'>
<PanelHeader title={title} classname='left-[10rem] h-[3.5rem]' />
<main className='mt-[3.5rem] flex-1'>{children}</main>
</section>
</div>
);
}
export default PanelLayout;
However, the above code is throwing the following error:
CanceledError {message: 'canceled', name: 'CanceledError', code: 'ERR_CANCELED'}
code: "ERR_CANCELED"
message: "canceled"
name: "CanceledError"
[[Prototype]]: AxiosError
constructor: ƒ CanceledError(message)
__CANCEL__: true
[[Prototype]]: Error
Please suggest how to avoid the above error and get axios to work properly.
I also encountered the same issue and I thought that there was some flaw in my logic which caused the component to be mounted twice. After doing some digging I found that react apparently added this feature with with the new version 18 in StrictMode where useEffect was being run twice. Here's a link to the article clearly explaining this new behaviour.
One way you could solve this problem is by removing StrictMode from your application (Temporary Solution)
Another way is by using useRef hook to store some piece of state which is updated when your application is mounted the second time.
// CODE BEFORE USE EFFECT
const effectRun = useRef(false);
useEffect(() => {
let isMounted = true;
const controller = new AbortController();
const signal = controller.signal;
const getUserProfile = async () => {
try {
const response = await axiosPrivate.get('/api/identity/profile', {
signal,
});
console.log(response.data);
isMounted && setUser(response.data.user);
} catch (error) {
console.log(error);
router.push({
pathname: '/seller/auth/login',
query: { from: router.pathname },
});
}
};
// Check if useEffect has run the first time
if (effectRun.current) {
getUserProfile();
}
return () => {
isMounted = false;
controller.abort();
effectRun.current = true; // update the value of effectRun to true
};
}, []);
// CODE AFTER USE EFFECT
Found the solution from this YouTube video.
I, too, encountered this issue. What made it worse is that axios doesn't provide an HTTP status code when the request has been canceled, although you do get error.code === "ERR_CANCELED". I solved it by handling the abort within the axios interceptor:
axiosInstance.interceptors.response.use(
(response) => response,
(error) => {
if (error.code === "ERR_CANCELED") {
// aborted in useEffect cleanup
return Promise.resolve({status: 499})
}
return Promise.reject((error.response && error.response.data) || 'Error')
}
);
As you can see, I ensure that the error response in the case of an abort supplies a status code of 499.
I faced the same problem in similar project, lets start by understanding first the root cause of that problem.
in react 18 the try to make us convenient to the idea of mounting and unmounting components twice for future features that the are preparing, the the useEffect hook now is mounted first time then unmounted the mounted finally.
so they need from us adapt our projects to the idea of mount and unmount of components twice
so you have two ways, adapting these changes and try to adapt your code to accept mounting twice, or making some turn around code to overcome mounting twice, and I would prefer the first one.
here in your code after first mount you aborted your API request in clean up function, so when the component dismount and remount again it face an error when try to run previously aborted request, so it throw exception, that's what happens
1st solution (adapting to react changing):
return () => {
isMounted = false
isMounted && controller.abort()
}
so in above code we will abort controller once only when isMounted is true, and thats will solve your problem
2nd solution (turn around to react changing):
by using useRef hook and asign it to a variable and update its boolean value after excuting the whole code only one time.
const runOnce = useRef(true)
useEffect(()=>{
if(runOnce.current){
//requesting from API
return()=>{
runOnce.current = false
}
}
},[])
3rd solution (turn around to react changing):
remove React.StrictMode from index.js file
I have a component that updates a piece of state but I'm having issues with it
I have the state declared
const [data, setData] = useState([]);
Then in my useEffect I am
useEffect(() => {
const fetchData = async () => {
await axios
.get(
API_URL,
{
headers: {
'Content-Type': 'application/json',
'X-API-KEY': API_KEY
},
params:{
"titleId": id
}
}
)
.then((response) => {
setData(response.data.Item);
})
.catch((err) => {
console.error("API call error:", err.message);
});
}
fetchData();
}, [data, id])
If I declare "data" in my dependencies, I get an endless loop of requests which is obviously no good. But if I leave 'data' out from the dependencies it shows nothing, though I am successfully retrieving it in my network's tab and even when I {JSON.styringify(data)} in a div tag aI get the json content too. So the info is in the DOM, but it's not updating the components
How can I do this so I can make an initial request to load the data and not thousands of them?
I've tried the following:
a setTimeout on the callback function
the isCancelled way with a return (() => { callbackFunction.cancel(); })
And there is an Abort way of doing this too but I can't figure it out. Every example I've seen is for class components
Sorry for the vague code. I can't replicate this without lots of coding and an API. Thanks in advance
You want to set the state and then check if is different. I use a custom hook for this which uses the useRef hook:
export function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
const prevData = usePrevious(data);
I don't know what your data looks like, but build a conditional from it. Inside of your useEffect you'll need something like:
if (data !== prevData) fetchData()
or
if (data.id !== prevData.id) fetchData()
You'll then add prevData to you dependencies:
[data, prevData, id]
So useEffects works with dependency.
With dependency - on changing dependency value useEffect will trigger
useEffect(() => {
// code
}, [dependency])
With empty brackets - will trigger on initial of component
useEffect(() => {
// code
}, [])
Without dependency and Brackets - will trigger on every state change
useEffect(() => {
// code
})
Do something like this, if that can help. I also used async/await so you can check that.
const App = () => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get(API_URL, {
headers: {
'Content-Type': 'application/json',
'X-API-KEY': API_KEY,
},
params: {
titleId: id,
},
});
setData(response.data.Item);
} catch (err) {
console.error('API call error:', err.message);
}
};
fetchData();
}, [id]);
if (!data.length) return null;
return <p>Yes, I have data</p>;
};
obviously you will get an infinit loop !
you are updating the data inside your useEffect which means each time the data changes, triggers useEffect again and so on !
what you should do is change your dependencies depending on your case for example :
const [data, setData] = useState([])
const [fetchAgain, setFetchAgain] = useState(false)
useEffect(()=> {
fetchData();
}, [])
useEffect(() => {
if(fetchAgain) {
setFetchAgain(false)
fetchData();
}
}, [fetchAgain])
now each time you want to fetch data again you need to update the fetchAgain to true
I have a component that fetch data on mount thanks to a useEffect hooks. I'd like it to not refetch data on mount, and instead use the 'cached' data provided by useSwr hooks when i re-navigate to this component. Im not sure how to do this. What i have read is that you can call swr like this :
const { data } = useSwr('same route as previous one')
and it 'll gives you the data stored in cache by the previous swr call.
const CategoryList = ({setLoading}) => {
const [category, setCategory] = useState('');
const [mounted, setMounted] = useState(false);
const [parameters, setParameters] = useState({});
const company_id = localStorage.getItem('company_id')
const session = new SessionService();
const { dataFromFetch, error } = useSWR([mounted ? `${session.domain}/company/${company_id}/category-stats` : null, parameters ], url =>
session.fetch(url, {
method: 'GET',
})
, {
onSuccess: (dataFromFetch) => {
setCategory(dataFromFetch)
setLoading(false)
setMounted(false)
},
onError: (err, key, config) => {
console.log("error", err)
}
}
)
useEffect(() => {
setMounted(true)
setLoading(true)
}, [])
return (
<div className={classes.CategoryList}>
<h5>Parc de véhicules</h5>
<div className={classes.CategoriesCards}>
{category.data? category.data.map((element, index) => {
return <CategoryItem
category={element.data.name}
carNumber={element.stats.nb_vehicles}
locating={element.stats.nb_booked}
available={element.stats.nb_available}
blocked={element.stats.nb_unavailable}
percentage={(element.stats.nb_booked / element.stats.nb_vehicles * 100).toFixed(2)}
key={index}
/>
}): null}
</div>
</div>
)
}
export default CategoryList;
Plus, in an other hand, i'd like my SWR hooks not to consistently try to refetch data like it is dooing actually. What i tried is passing options after my fetcher function, like it is stipulate in this post SWR options explanation. Actually my component is trying to refetch data every 5-10seconds, though unsuccesfully thanks to my 'mounted' condition which result in a 'null' route ( which is the recommended way to do it according to the documentation ). It still sends a request with response 404, which i'd like to avoid.
const [parameters, setParameters] = useState({
revalidateOnFocus: false,
revalidateOnMount:false,
revalidateOnReconnect: false,
refreshWhenOffline: false,
refreshWhenHidden: false,
refreshInterval: 0
});
const company_id = localStorage.getItem('company_id')
const session = new SessionService();
const { dataFromFetch, error } = useSWR([mounted ? `${session.domain}/company/${company_id}/category-stats` : null, parameters ], url =>
session.fetch(url, {
method: 'GET',
})
, {
onSuccess: (dataFromFetch) => {
setCategory(dataFromFetch)
setLoading(false)
setMounted(false)
},
onError: (err, key, config) => {
console.log("error", err)
}
}
)
According to SWR's documentation, the hook's API is
const { data, error, isValidating, mutate } = useSWR(key, fetcher, options)
In your code, you're passing the options as part of an array in the first argument, when it should be the third.
A minor refactor shows how it can be fixed:
const parameters = {
revalidateOnFocus: false,
revalidateOnMount: false,
revalidateOnReconnect: false,
refreshWhenOffline: false,
refreshWhenHidden: false,
refreshInterval: 0,
};
const company_id = localStorage.getItem( "company_id" );
const session = new SessionService();
const fetcher = (url) =>
session.fetch(url, {
method: "GET",
});
const key = mounted
? `${session.domain}/company/${company_id}/category-stats`
: null;
const { data, error } = useSWR(key, fetcher, parameters );
You've also over-complicated your code quite a bit - there's no need for onSuccess or onError handlers - you can simply use the returned values data and error instead.
Also, no need to save the fetched data to state by using setCategory. Just read directly from data. That's the benefit of of SWR 🙂 It will auto-magically trigger re-renders when data is fetched.