exotic-emerald•3y 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

like-gold•3y ago

you can send with metaData https://refine.dev/docs/api-reference/general-concepts/#metadata

exotic-emeraldOP•3y ago

Thank you and can i have application/json for the creation and edition with the metaData or with something else?

like-gold•3y 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

exotic-emeraldOP•3y ago

Ok thank you 👌 I'm going to tried and get back to you if i have an issue 😅

Omer•3y ago

maybe you can use axios Interceptors (https://axios-http.com/docs/interceptors) like an authorization header -> https://refine.dev/docs/api-reference/core/providers/auth-provider/#setting-authorization-credentials

exotic-emeraldOP•3y ago

I gonna tried both solution to see which one is better. Thank you both👌

Omer•3y ago

one last option, swizzle 😅 https://refine.dev/docs/tutorial/understanding-dataprovider/swizzle/

2. Create Data Provider with Swizzle | refine

What is Swizzle?

exotic-emeraldOP•3y 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 ?

like-gold•3y ago

are you seeing your headers in chrome network tab ?

exotic-emeraldOP•3y ago

yes but it still application/json

like-gold•3y ago

what is your dataProvider implementation ? you need the pass headers like this https://refine.dev/docs/api-reference/general-concepts/#metadata

exotic-emeraldOP•3y 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

like-gold•3y 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,
        };
    },

exotic-emeraldOP•3y ago

It work !! Thanks you @alicanerdurmaz 💪

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

Did you find this page helpful?