make a new call api after the x-locale change
Hello i'm currently making an app with refine and i have implement i18n. I also have an API which allow me to fetch data in french and in english accord to "x-locale" in REST request header. I would like to know how can i make a new api call without refreshing the page ?
52 Replies
environmental-roseβ’2y ago
Hi @harisris, All the data related hooks returns
refetch
functionality.
for example;
u can call this tableQueryResult.refetch()
eastern-cyanβ’2y ago
Hi Alican, thank you for your response !!
I am using a DataGrid component and i use a useDataGrid hook. I do not find any refetch function for this hook. How can I make it work with useDataGrid or does any other solution exist ?
environmental-roseβ’2y ago
it's inside
tableQueryResult
object.
eastern-cyanβ’2y ago
Finnaly this does the refetch but the request has the same header. I put the
tableQueryResult.refetch();
inside a useEffect triggered when the locale change and nothing change. Does this functionnality just replay the last request ?environmental-roseβ’2y ago
Yes, It's refetching with current values.
I tested this code snippet. it's work as expected. what is your implementation look like ?
eastern-cyanβ’2y ago
i will try your code
environmental-roseβ’2y ago
where do you set headers ?
eastern-cyanβ’2y ago
the headers are set in an other component
but the set work fine
when i refresh the page the request is made with the right header
here is the component which change the locale
environmental-roseβ’2y ago
I undestand.
refine uses react-query under the hood. and actually headers out of scope for react-query.
we need to use fetch library with react-query like axios or window.fetch
our examples uses react query with axios. and we have implementation for passing headers with data hooks.
for example:
useDataGrid takes metaData, and passing to react-query and react-query passes to axios.
in this situtation. you need to write this useEffect and metaData to everywhere. actually it's a bad implementation
let me think what we can do. i have couple ideas
https://refine.dev/docs/api-reference/core/hooks/invalidate/useInvalidate/
with this, you can invalidate all queries. you don't need to useEffect and refetch.
I thought you would only use it once.
you can do that after language changed
eastern-cyanβ’2y ago
Ok i'm going to try
environmental-roseβ’2y ago
but before do that, we need to set x-locale header
are you using axios with custom data provider?
eastern-cyanβ’2y ago
ok ok i try and i get back to you
yes i'm using axios
environmental-roseβ’2y ago
we have couple of options to do that. you can search on google like "how to set dynamically axios headers"
but this is the easiest way for me.
you can get xLocale before each request.
but dont forget. you need to call
invalidate
after modify the localeStorageeastern-cyanβ’2y ago
actually the language is set correctly in the localStorage and it change when i change it with the select component
environmental-roseβ’2y ago
nice, but we need to update default axios headers after you change locale
or you can set x-locale header before every request with axios interceptors