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