Not able to get posts from 'tryghost' with Axios error

Question

I am using Next.js and Ghost API to build a headless blog.

Following the tutorial on Youtube, I was able to follow step by step, but I am stuck at receiving the data from the 'tryghost'.

With the Ghost api_url, api_key, and api_version, I should be able to get the posts, but I am getting error with below.

AxiosError: There is no suitable adapter to dispatch the request since :

• adapter xhr is not supported by the environment
• adapter http is not available in the build at Object.getAdapter (webpack-internal:///(rsc)/./node_modules/@tryghost/content-api/es/content-api.js:2027:19) at Axios.dispatchRequest (webpack-internal:///(rsc)/./node_modules/@tryghost/content-api/es/content-api.js:2065:30) at Axios.request (webpack-internal:///(rsc)/./node_modules/@tryghost/content-api/es/content-api.js:2363:39) at Axios. [as get] (webpack-internal:///(rsc)/./node_modules/@tryghost/content-api/es/content-api.js:2388:21) at Function.wrap [as get] (webpack-internal:///(rsc)/./node_modules/@tryghost/content-api/es/content-api.js:7:19) at defaultMakeRequest (webpack-internal:///(rsc)/./node_modules/@tryghost/content-api/es/content-api.js:2770:27) at makeApiRequest (webpack-internal:///(rsc)/./node_modules/@tryghost/content-api/es/content-api.js:2915:16) at Object.browse (webpack-internal:///(rsc)/./node_modules/@tryghost/content-api/es/content-api.js:2868:20) at getPosts (webpack-internal:///(rsc)/./app/ghost/post.js:13:28) at Home (webpack-internal:///(rsc)/./app/page.jsx:11:78) at listOnTimeout (node:internal/timers:569:17) at process.processTimers (node:internal/timers:512:7) { code: 'ERR_NOT_SUPPORT' } { posts: undefined }

I tried to install axios dependency, but not working

Answer 1

Try calling this Content API in useEffect, worked for me.

In component ->

useEffect(() => {
    getPosts().then((data) => {
        if (data) {
            setPosts(data);
        }
    })
}, []);

Common Ghost CMS apis ->

export async function getPosts() {
return await api.posts
    .browse({
        limit: "all",
        include: ["tags"]
    })
    .catch(err => {
        console.error(err);
    });

}