Content API with Reactjs

Something seems wrong with the Content API. Even when I use the Admin API it works fine and returns posts. However the Content API when I use api.posts.browse returns only this message "×
TypeError: GhostContentAPI is not a constructor
Both the Admin API and Content are setup with Nodejs 10.x
And Admins code is almost extactly the same.

// The admin API client is the easiest way to use the API

const GhostAdminAPI = require("@tryghost/admin-api");

    // Configure the client

    const api = new GhostAdminAPI({

      url: "http://localhost:2368",

      // Admin API key goes here

      key:

        ".....6dd",

      version: "v3"

    });
    export default api;

The Content is almost exactly the same

    const GhostContentAPI = require("@tryghost/content-api");

    const content = new GhostContentAPI({

      url: "http://localhost:2368",

      key: "....062",

      version: "v3"

    });

export default content;

It but only the content api shows the error. Now I did change it from api to content but even if I use the const api or let api for Content API it still has the same error.
Could this be a bug?

He you imported the content-api just like you have imported the admin-api

const GhostContentAPI = require("@tryghost/content-api");

Asking because it is not there in the code you have provided.

It is in the code I added please see the second half. I am not familiar with this layout yet but it is there.

Can you see your have actually installed @tryghost/content-api package

Check if you have an entry of @tryghost/content-api in dependency list within your package.json file.

If not then install it in your project

npm install @tryghost/content-api

You are exporting the content constant.
Be sure to follow this guide to use content API,

https://ghost.org/docs/api/v3/javascript/content/

I just did a quick test using local installation of ghost and everything is working. So I think content API is working. probably there is a bug in your code.

You can test it.

In a blank folder run these two command

Create new blank project

npm init

install content-api package

npm install @tryghost/content-api

Now in that folder create a .js file, name does not matter. Let’s name it app.js and add the following code in that file. This is the example code from above mentioned documentation. I have added the first line extra.

const GhostContentAPI = require("@tryghost/content-api");

const api = new GhostContentAPI({

    url: 'http://localhost:2368',

    key: '22444f78447824223cefc48062',

    version: "v3"

  });

  

  // fetch 5 posts, including related tags and authors

  api.posts

      .browse({limit: 5, include: 'tags,authors'})

      .then((posts) => {

          posts.forEach((post) => {

              console.log(post.title);

          });

      })

      .catch((err) => {

          console.error(err);

      });

add your own content api key in place of random key. Save the file.
After saving this app.js file
from your terminal/command-line run the following command

node app.js

If you see title of 5 posts in your console that means everything is working.

Then take this example as reference to find what exactly is wrong in your code.

Also if possible, you can share your code in other files in your project, probably someone expert more than me will definitely help you to solve the issue.

1 Like

Everything is installed properly otherwise why would Admin work and not Content. Here is a current look at what is installed in the package.json. I use yarn instead of npm.

Did you try debugging in an empty project like @GBJsolution suggested?

This is a empty project I haven’t developed anything on it yet which is why I am asking could this be a bug. That Admin-API works but the Content-API isn’t. I just started the React server and the error comes out from the Content API. If I do the same thing with Admin it works perfectly fine.

That’s not an empty project… The reason you were suggested to use a brand new folder with nothing is to get rid of any variables, including react, from your env. If you still run into issues in the empty folder, that suggests something might be wonky with your setup, since the content-api has worked for other people

Actually it is an empty project with React. If your talking about just a small app.js project as before. It does work perfectly fine. The problem I am seeing is nothing to do with the empty project. It’s this.

When I use CRA doing a yarn create react-app myapp Then this is an empty project. I added two files. One for post and one for the API. When I added the one for the Api and use the Admin-API and then on the Post I retrieve it with the api.posts.browse() now from the documentation this is not possible but it seems that it works perfectly fine. And I can use api.add.

This seems to work flawlessly. However now switching to grabing the content does not. Using content-api if I try to use the same setup just as I have with admin-api. Content-API throws the TypeError: GhostContentAPI is not a constructor
Now this error message never shows for a node running app but in React it does. So for Ghost to say use our Content-API with any front end well in my case it isn’t working on the React front end. But their Admin-API does? Why is this happening. It seems like bug.

What’s your reasoning for using require in your script? Since react uses esm, you should be using import statements

@vikaspotluri123
Thank you for noticing. At frist I tried import thinking with Nextjs is similar. And wasn’t working maybe I was just doing my import incorrectly. I finally was able to fix this thank you for the assistance. I did try it and maybe when I tried it at the time. I wasn’t exporting properly. Not sure. But hey first time for everything.