I Can't use local Ghost Content Ap

[turkgenciyim]

.env file

GHOST_URL="https://api.********.com"
GHOST_KEY="fbd***"

Why?

Also, this is web site already running. sigortamglobal.com

[Cathy_Sarisky]

What do the imports/requires for that first file in the screenshot above look like?

[Kevin]

The problem is listed in your screenshot:

It’s saying xhr isn’t available in the server-side environment in which you’re trying to use the content API library.

I think your options are either providing a custom makeRequest function to the Content API library with a http library that’s supported in your environment in place of axios or making requests to the API directly without using the library wrapper.

Example of supplying a custom request function that uses fetch in place of axios (I’ve not tested this, it’s just an example to work from for your own use-case):

const api = new GhostContentAPI({
  url: process.env.GHOST_URL,
  key: process.env.GHOST_KEY,
  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, {method, headers}).then(res => res.json());
  }
};

[fabio-carvalho88]

hey there!

I had the same issue with the Next.js 14 server side environment. How can I use the makeRequest method you mentioned?

[RyanF]

This looks like a Typescript error. It shouldn’t prevent you from using the makeRequest option. The types are community-supplied and they might not have included the possibility of specifying a custom function as an option.

[fabio-carvalho88]

thanks for replying!

I’ve extended the default interface like so:

but right now i’m getting this error at line 36:

TypeError: Cannot read properties of undefined (reading ‘posts’)

Can you help me understand why? Thanks!

[fabio-carvalho88]

it seems to me this is an error that occurs with the new next.js version 14.

in version 13.4.12, without adding the makeRequest method, everything works as expected.

do you know why this is happening at the latest next.js version? i’m using v14.0.4

[RyanF]

I’m not sure. I’d log the api object to see if it has the shape that’s expected.

Alternatively, if Next.js has more native ways of fetching data (like just using fetch directly), then you could opt to bypass the SDK altogether and do that: Ghost Content API Documentation

[sensei85]

I also have some issue connecting using the sdk. I’m using sveltekit and this is the error I get.

cause: Error: connect ECONNREFUSED ::1:2368
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 2368
  }

[Cathy_Sarisky]

Looks like you’re trying to connect to the ipv6 address. Is Ghost listening on ipv6, or only on ipv4?

[alyatwa]

just add data to return json

const api = new GhostContentAPI({
	url: "https://ali-atwa.digitalpress.blog",
	key: "bef5171833fd701e51903f181e",
	// @ts-ignore
	makeRequest: ({ url, method, params, headers }) => {
		const apiUrl = new URL(url);
		// @ts-ignore
		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);
			});
	},
	version: "v5.0",
});

[rz-codes]

The issue still persists. Maybe it has something to do with next@v14 and tryghost-content-api@v1.11.7 I’m using next@v14.1.4 and tried @alyatwa method but couldn’t get it to work. I defaulted to Next v13.1.3 and it works without issues