Create fetch Interceptor that can be used in client and server components
Unanswered
Alligator mississippiensis posted this in #help-forum
Alligator mississippiensisOP
Hello Guys,
I have a question that I am wondering about regarding the new app routing approach,
the way we set a cookie from a server component is by using next js built in function and from a client using document object so Let's say I have built a fetch interceptor to implement JWT auth approach so inside of this inteceptor I update the token value in the cookies and now you use this fetchInterceptor in a client component and server components
so how would you update the cookie value, if you tried to put some ( if condition ) to check if the interceptor is being used from a client component or server component this wont work because next js compiler will fail on import statement of cookie function and if you try to do some dynamic importing once it's imported the app will crash as well.
I don't think create two fetch Intercptors (one for client and for server) is the ideal approach, any thoughts ?
I have a question that I am wondering about regarding the new app routing approach,
the way we set a cookie from a server component is by using next js built in function and from a client using document object so Let's say I have built a fetch interceptor to implement JWT auth approach so inside of this inteceptor I update the token value in the cookies and now you use this fetchInterceptor in a client component and server components
so how would you update the cookie value, if you tried to put some ( if condition ) to check if the interceptor is being used from a client component or server component this wont work because next js compiler will fail on import statement of cookie function and if you try to do some dynamic importing once it's imported the app will crash as well.
I don't think create two fetch Intercptors (one for client and for server) is the ideal approach, any thoughts ?
25 Replies
Alligator mississippiensisOP
@Unknown User unfortunately not
I create it outside the app directory
In an api class
And call it in middleware.js
And client components
But this only works for client
Layout is client prolly
Dont call it in layout
I don’t think it’s a goo idea
Anyway setting ‘use client’ to layout
Should fix it
Yes
Create
A wrapper
A client wrapper
Call that interceptor
Inside if it
And call this wrapper in the layout
Pass the children
Through this
Wrapper
I will share code snippet
With u
Once i am free
It will help u