How to custom header request with hooks of refine?

5 Replies

Hi @tingadev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To customize header requests with hooks in refine, you can use the meta property available in various data hooks. Here's how you can do it: 1. For most data hooks like useOne, useMany, useList, etc., you can pass custom headers using the meta property:

useOne({
  resource: "posts",
  id: 1,
  meta: {
    headers: { "x-custom-header": "custom-value" }
  }
});

useOne({
  resource: "posts",
  id: 1,
  meta: {
    headers: { "x-custom-header": "custom-value" }
  }
});

2. For the useCustom hook, you can pass custom headers in the config object:

useCustom({
  url: "custom-endpoint",
  method: "get",
  config: {
    headers: {
      "x-custom-header": "custom-value"
    }
  }
});

useCustom({
  url: "custom-endpoint",
  method: "get",
  config: {
    headers: {
      "x-custom-header": "custom-value"
    }
  }
});

3. For useCustomMutation, you can also use the config.headers property:

const { mutate } = useCustomMutation();

mutate({
  url: "custom-endpoint",
  method: "post",
  values: { /* your data */ },
  config: {
    headers: {
      "x-custom-header": "custom-value"
    }
  }
});

const { mutate } = useCustomMutation();

mutate({
  url: "custom-endpoint",
  method: "post",
  values: { /* your data */ },
  config: {
    headers: {
      "x-custom-header": "custom-value"
    }
  }
});

These custom headers will be passed to the dataProvider methods, where you can handle them accordingly Data Provider meta usage (https://refine.dev/docs/data/data-provider/#meta-usage). If you need to set headers for all requests, consider creating a custom Axios instance with default headers and passing it to your data provider Github Issue comment (https://github.com/refinedev/refine/issues/4622#issuecomment-1485401095). Remember, the exact implementation might vary depending on your specific data provider and use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@761921731505946634> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

adverse-sapphireOP•2mo ago

how about for useUpdate? @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- For the useUpdate hook in refine, you can also customize the header request using the meta property. Here's how you can do it:

const { mutate } = useUpdate();

mutate({
  resource: "posts",
  id: 1,
  values: { /* your update data */ },
  meta: {
    headers: { "x-custom-header": "custom-value" }
  }
});

const { mutate } = useUpdate();

mutate({
  resource: "posts",
  id: 1,
  values: { /* your update data */ },
  meta: {
    headers: { "x-custom-header": "custom-value" }
  }
});

The meta object allows you to pass additional information to the data provider methods, including custom headers useUpdate meta documentation (https://refine.dev/docs/data/hooks/use-update/#meta). In your data provider's update method, you can then access these custom headers:

const myDataProvider = {
  //...
  update: async ({
    resource,
    id,
    variables,
    meta,
  }) => {
    const headers = meta?.headers ?? {};
    const url = `${apiUrl}/${resource}/${id}`;

    const { data } = await httpClient.patch(url, variables, { headers });

    return {
      data,
    };
  },
  //...
};

const myDataProvider = {
  //...
  update: async ({
    resource,
    id,
    variables,
    meta,
  }) => {
    const headers = meta?.headers ?? {};
    const url = `${apiUrl}/${resource}/${id}`;

    const { data } = await httpClient.patch(url, variables, { headers });

    return {
      data,
    };
  },
  //...
};

This approach allows you to customize headers for specific useUpdate calls while keeping your data provider implementation flexible Data Provider custom method (https://refine.dev/docs/data/data-provider/#custom). Remember, the exact implementation might vary depending on your specific data provider and use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@761921731505946634> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

How to custom header request with hooks of refine?

Did you find this page helpful?