genetic-orange
genetic-orangeβ€’17mo 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
fair-rose
fair-roseβ€’17mo ago
genetic-orange
genetic-orangeβ€’17mo ago
Thank you and can i have application/json for the creation and edition with the metaData or with something else?
fair-rose
fair-roseβ€’17mo 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
genetic-orange
genetic-orangeβ€’17mo ago
Ok thank you πŸ‘Œ I'm going to tried and get back to you if i have an issue πŸ˜…
genetic-orange
genetic-orangeβ€’17mo ago
I gonna tried both solution to see which one is better. Thank you bothπŸ‘Œ
genetic-orange
genetic-orangeβ€’17mo 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 ?
fair-rose
fair-roseβ€’17mo ago
are you seeing your headers in chrome network tab ?
genetic-orange
genetic-orangeβ€’17mo ago
yes but it still application/json
fair-rose
fair-roseβ€’17mo ago
what is your dataProvider implementation ? you need the pass headers like this https://refine.dev/docs/api-reference/general-concepts/#metadata
genetic-orange
genetic-orangeβ€’17mo 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
fair-rose
fair-roseβ€’17mo 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,
};
},
genetic-orange
genetic-orangeβ€’17mo ago
It work !! Thanks you @alicanerdurmaz πŸ’ͺ