CODEWITHSUNDEEP
next.jsghost-blog
Ranos
Ranos

Reputation: 13

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

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 :

I tried to install axios dependency, but not working

Upvotes: 0

Views: 489

Answers (2)

DD.
DD.

Reputation: 22011

Use a custom request function that uses fetch in place of axios:

const api = new GhostContentAPI({
url: API_URL,
key: API_KEY,
version: "v5.0",


makeRequest: ({ url, method, params, headers }) => {
  const apiUrl = new URL(url);

  Object.keys(params).map((key) =>
    apiUrl.searchParams.set(key, encodeURIComponent(params[key]))
  );

  return fetch(apiUrl.toString(), { method, headers })
    .then(async (res) => {
      // Check if the response was successful.
      if (!res.ok) {
        // You can handle HTTP errors here
        throw new Error(`HTTP error! status: ${res.status}`);
      }
      return { data: await res.json() };
    })
    .catch((error) => {
      console.error("Fetch error:", error);
    });
}

});

Upvotes: 0

Mrugendra Shilvant
Mrugendra Shilvant

Reputation: 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);
    });

}

Upvotes: 0

Related Questions