ratty-blush
ratty-blushβ€’2y ago

Change content-type depending on we need to edit or to create a ressource

I implemented the edit and the create possibility in my refine application. My API need the application/json content-type for the creation and need application/merge-patch+json for the edition. How can set the both in my axios header (if it is possible) ?
14 Replies
clever-tan
clever-tanβ€’2y ago
ratty-blush
ratty-blushOPβ€’2y ago
Thank you and can i have application/json for the creation and edition with the metaData or with something else?
clever-tan
clever-tanβ€’2y ago
u can send metaData with useForm. you can send something different for each useForm for example, send merge-patch+json in useForm on your EditPage
ratty-blush
ratty-blushOPβ€’2y ago
Ok thank you πŸ‘Œ I'm going to tried and get back to you if i have an issue πŸ˜…
ratty-blush
ratty-blushOPβ€’2y ago
I gonna tried both solution to see which one is better. Thank you bothπŸ‘Œ
ratty-blush
ratty-blushOPβ€’2y ago
Ok thank you πŸ’ͺ
const {
refineCore: {onFinish, formLoading},
register,
handleSubmit
} = useForm<IOffers>({
refineCoreProps: {
metaData: {
headers: {"Content-Type": "application/merge-patch+json"}
}
}
});
const {
refineCore: {onFinish, formLoading},
register,
handleSubmit
} = useForm<IOffers>({
refineCoreProps: {
metaData: {
headers: {"Content-Type": "application/merge-patch+json"}
}
}
});
In my edit form i've done this and this error of the content type persists should i do something else or should this modification solve the probleme ?
clever-tan
clever-tanβ€’2y ago
are you seeing your headers in chrome network tab ?
ratty-blush
ratty-blushOPβ€’2y ago
yes but it still application/json
clever-tan
clever-tanβ€’2y ago
what is your dataProvider implementation ? you need the pass headers like this https://refine.dev/docs/api-reference/general-concepts/#metadata
ratty-blush
ratty-blushOPβ€’2y ago
// "axios" package needs to be installed
import {AxiosInstance} from "axios";
// "stringify" function is re-exported from "query-string" package by "@pankod/refine-simple-rest"
import {stringify} from "@pankod/refine-simple-rest";
import {DataProvider} from "@pankod/refine-core";
import {axiosInstance, generateSort, generateFilter} from "./utils";

export const dataProvider = (
apiUrl: string,
httpClient: AxiosInstance = axiosInstance
): Omit<
Required<DataProvider>,
"createMany" | "updateMany" | "deleteMany"
> => ({
getList: async ({
resource,
hasPagination = true,
pagination = {current: 1, pageSize: 30},
filters,
sort,
}) => {
const url = `${apiUrl}/${resource}`;

const {current = 1, pageSize = 30} = pagination ?? {};

const queryFilters = generateFilter(filters);

const query: {page?: number} = hasPagination
? {
page: current,
}
: {};

const {data, headers} = await httpClient.get(
`${url}?${stringify(query)}&${stringify(queryFilters)}`
);

const total = 100000;

return {
data,
total,
};
},

getMany: async ({resource, ids}) => {
const {data} = await httpClient.get(
`${apiUrl}/${resource}?${stringify({id: ids})}`
);

return {
data,
};
},

create: async ({resource, variables}) => {
const url = `${apiUrl}/${resource}`;

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

return {
data,
};
},

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

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

return {
data,
};
},
// "axios" package needs to be installed
import {AxiosInstance} from "axios";
// "stringify" function is re-exported from "query-string" package by "@pankod/refine-simple-rest"
import {stringify} from "@pankod/refine-simple-rest";
import {DataProvider} from "@pankod/refine-core";
import {axiosInstance, generateSort, generateFilter} from "./utils";

export const dataProvider = (
apiUrl: string,
httpClient: AxiosInstance = axiosInstance
): Omit<
Required<DataProvider>,
"createMany" | "updateMany" | "deleteMany"
> => ({
getList: async ({
resource,
hasPagination = true,
pagination = {current: 1, pageSize: 30},
filters,
sort,
}) => {
const url = `${apiUrl}/${resource}`;

const {current = 1, pageSize = 30} = pagination ?? {};

const queryFilters = generateFilter(filters);

const query: {page?: number} = hasPagination
? {
page: current,
}
: {};

const {data, headers} = await httpClient.get(
`${url}?${stringify(query)}&${stringify(queryFilters)}`
);

const total = 100000;

return {
data,
total,
};
},

getMany: async ({resource, ids}) => {
const {data} = await httpClient.get(
`${apiUrl}/${resource}?${stringify({id: ids})}`
);

return {
data,
};
},

create: async ({resource, variables}) => {
const url = `${apiUrl}/${resource}`;

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

return {
data,
};
},

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

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

return {
data,
};
},
getOne: async ({resource, id}) => {
const url = `${apiUrl}/${resource}/${id}`;

const {data} = await httpClient.get(url);

return {
data,
};
},

deleteOne: async ({resource, id, variables}) => {
const url = `${apiUrl}/${resource}/${id}`;

const {data} = await httpClient.delete(url, {
data: variables,
});

return {
data,
};
},

getApiUrl: () => {
return apiUrl;
},

custom: async ({url, method, filters, sort, payload, query, headers}) => {
let requestUrl = `${url}?`;

if (sort) {
const generatedSort = generateSort(sort);
if (generatedSort) {
const {_sort, _order} = generatedSort;
const sortQuery = {
_sort: _sort.join(","),
_order: _order.join(","),
};
requestUrl = `${requestUrl}&${stringify(sortQuery)}`;
}
}

if (filters) {
const filterQuery = generateFilter(filters);
requestUrl = `${requestUrl}&${stringify(filterQuery)}`;
}


if (query) {
requestUrl = `${requestUrl}&${stringify(query)}`;
}

if (headers) {
httpClient.defaults.headers = {
...httpClient.defaults.headers,
...headers,
};
}

let axiosResponse;
switch (method) {
case "put":
case "post":
case "patch":
axiosResponse = await httpClient[method](url, payload);
break;
case "delete":
axiosResponse = await httpClient.delete(url, {
data: payload,
});
break;
default:
axiosResponse = await httpClient.get(requestUrl);
break;
}
getOne: async ({resource, id}) => {
const url = `${apiUrl}/${resource}/${id}`;

const {data} = await httpClient.get(url);

return {
data,
};
},

deleteOne: async ({resource, id, variables}) => {
const url = `${apiUrl}/${resource}/${id}`;

const {data} = await httpClient.delete(url, {
data: variables,
});

return {
data,
};
},

getApiUrl: () => {
return apiUrl;
},

custom: async ({url, method, filters, sort, payload, query, headers}) => {
let requestUrl = `${url}?`;

if (sort) {
const generatedSort = generateSort(sort);
if (generatedSort) {
const {_sort, _order} = generatedSort;
const sortQuery = {
_sort: _sort.join(","),
_order: _order.join(","),
};
requestUrl = `${requestUrl}&${stringify(sortQuery)}`;
}
}

if (filters) {
const filterQuery = generateFilter(filters);
requestUrl = `${requestUrl}&${stringify(filterQuery)}`;
}


if (query) {
requestUrl = `${requestUrl}&${stringify(query)}`;
}

if (headers) {
httpClient.defaults.headers = {
...httpClient.defaults.headers,
...headers,
};
}

let axiosResponse;
switch (method) {
case "put":
case "post":
case "patch":
axiosResponse = await httpClient[method](url, payload);
break;
case "delete":
axiosResponse = await httpClient.delete(url, {
data: payload,
});
break;
default:
axiosResponse = await httpClient.get(requestUrl);
break;
}
const {data} = axiosResponse;

return Promise.resolve({data});
},
});
const {data} = axiosResponse;

return Promise.resolve({data});
},
});
here is my custom data povider
clever-tan
clever-tanβ€’2y ago
when useForm is edit, using update function you can write like this and you can delete meteData from useForm. with this way you can only write once this header
update: async ({resource, id, variables}) => {
const url = `${apiUrl}/${resource}/${id}`;

const { data } = await httpClient.patch(url, variables, {
headers: {
"Content-Type": "application/merge-patch+json",
},
});

return {
data,
};
},
update: async ({resource, id, variables}) => {
const url = `${apiUrl}/${resource}/${id}`;

const { data } = await httpClient.patch(url, variables, {
headers: {
"Content-Type": "application/merge-patch+json",
},
});

return {
data,
};
},
ratty-blush
ratty-blushOPβ€’2y ago
It work !! Thanks you @alicanerdurmaz πŸ’ͺ

Did you find this page helpful?