How to add Header into request GLOBALLY

I want to add a header for each api call, since my API requires a X-API-KEY header. Anyone know how?
optimistic-gold
optimistic-goldβ€’453d ago
Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! πŸ†
Answer: You can use axios.interceptors.request.use to add the X-API-KEY header to each API call. SOURCES: ./docs/tutorial/5-understanding-authprovider/1-create-authprovider.md, ./docs/api-reference/core/hooks/data/useCustom/index.md

Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.
fascinating-indigo
fascinating-indigoβ€’453d ago
?
other-emerald
other-emeraldβ€’453d ago
you can use axios interceptors to do that for example: in tutorial we demonstrate how to do this: https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider/#setting-authorization-credentials
axiosInstance.interceptors.request.use(
(request: AxiosRequestConfig) => {
if (request.headers) {
request.headers = {
"x-api-key": API_KEY,
};
}
return request;
},
);
axiosInstance.interceptors.request.use(
(request: AxiosRequestConfig) => {
if (request.headers) {
request.headers = {
"x-api-key": API_KEY,
};
}
return request;
},
);
if you are using simple-rest, simple-rest accepts httpClient as a second parameter. you can create your own axiosInstance and pass it to simple-rest
fascinating-indigo
fascinating-indigoβ€’452d ago
@alicanerdurmaz thank you very much It does give my an mismatch type error Saying 'axios' is not assignable to parameter of refine They're two different interfaces And I import {axios}
axiosInstance.interceptors.request.use((request: any) => {
if(request.headers) {
console.log(request.headers)
request.headers = {
...request.headers,
"x-api-key": "1234567890",
};
}
return request
})
axiosInstance.interceptors.request.use((request: any) => {
if(request.headers) {
console.log(request.headers)
request.headers = {
...request.headers,
"x-api-key": "1234567890",
};
}
return request
})
Trying this but no luck unfortunate
other-emerald
other-emeraldβ€’452d ago
are you using simple-rest ? and, please can you give me your implementation details to debug ?
Omer
Omerβ€’452d ago
Hey @raulfernandez πŸ‘‹ , Is the correct version installed? The 'refine simple-rest' data provider is using version 0.26 of axios. https://github.com/refinedev/refine/blob/next/packages/simple-rest/package.json#L39
npm install axios@0.26
npm install axios@0.26
More Posts
Unable to obtain categories from refine strapi demo endpoint using refine, Strapi and chakraUIHello, I’m building a simple CRUD application using refine with a strapi-v4-provider and Chakra-UI amalfunction in installationHow do I go about this error because when I execute npm run dev, the terminal returns an error with reference to defining relations between collections in appwritethere is a reference in this page https://refine.dev/docs/advanced-tutorials/data-provider/appwrite/Disable Autocomplete in InferencersHi, I have two issues with the Autocomplete component in relation fields. A. With big resources, tReset sorting for useTableI have a reset button, which I am using to reset the sorting on the table. Btw I am also doing multiMultiple providers - don't neccesiate default provider?Hi guys, Opening it here for a discussion rather than a github issue. I use multiple providers, butAntd useDrawerForm not clearingWhat is the best way to clear the useDrawerForm when drawer is closed or when form is submitted? RigDefault access-control-casbin with next.js give warning of critical dependencyAfter integrating casbin with refine next.js project, I follow through boiler template but with nextCan I use the antD useTable with a resource or endpoint that is essentially custom?Hi guys, wondering if i'm going about this the wrong way and could use some advice / help if possiblgoogle authentication popup issue.okay first off what i want: the integrated google authentication to work. what i have done: 1. creaRefine _ Compiled with problems:Hi, While compiling a refine code, I have the next error: TS2786: 'ReactApexChart' cannot be used Inferencer date inferring is too sensitiveHi πŸ™‚ Another issue I've encountered. I have a number field, that the Inferencer recognizes as a DatuseParams, useResource giving different results in different context.I tried to get the resourceName, actions, params by using one of this hook inside `react-router-v6` Inferencer disregards null-value fieldsHi there πŸ‘‹ So I'm making actual progress using the library with the modifications I've used to the Hi pinksheep 3388 can you give us `npmHi @sheepndreams, can you give us `npm run refine whoami` output for debug ?Inferencer - how to use a diferent identifer idHi, I want to use the Inferencer (MUI) to generate the views for my data. However, my data use theUse fieldTransformerHey😩 guys can some someone send me an example of how I can use fieldTransformer const handleTransfAuth Azure B2C with Next.jsI am trying to implement authentication with azure B2C with next, however in the doc there are some Preview Image on edit page loadHi ! how do in ensure that when I go to my edit page, it shows image on my Upload component ? When Change root background .Hello all first time on using refine and I love it . I’ m actually looking at changing the backgro