[SOLVED] Connecting PlayCanvas to Contentful Database

Help & Support
1

Hi,

I’m testing out connecting PlayCanvas to an existing database I’ve got on Contentful. I’ve been following along with their tutorials and communicating with the database seems pretty straight forward except I’m not sure how to create the initial client.

Following along their tutorial ( Contentful JS Tutorial ) I’ve added the link to the pre-built SDK to my project’s external scripts list but I have no idea what to do from there.

When I run the project I get an error on the first line of the fetchData function.

ContentfulFetch.prototype.initialize = function() {
     //var contentful = require("contentful"); //This is the problem line I believe
    var client = contentful.createClient({
        space: "<spaceID>",
        accessToken: "<accessTokenID>"
    });
};

ContentfulFetch.prototype.fetchData = function (event) {
    
    //This line gives an error "Uncaught TypeError: Cannot read property 'getEntry' of undefined"
    this.client.getEntry('<entryID>').then(function (entry)
    {
        console.log(entry.sys);
        console.log(entry.fields.assetName);
    });
};

I’ve removed the ID’s in the brackets <> but other than that this is the code I’m using. My guess is that I to include the contentful SDK in the project somehow, but I’m not sure how to go about that. Any suggestions would be greatly appreciated.

Thanks!

2

Try changing this line

    var client = contentful.createClient({

To

    this.client = contentful.createClient({
3

Thanks for the suggestion @yaustar

Making the switch you suggested helps me understand what’s going on a bit more. I now get an error saying ‘client’ is undefined. My guess would be that’s because ‘contentful.createClient’ never runs because the script doesn’t know to include the Contentful SDK.

My background is years of C# programming for Unity. I’m struggling a bit with carrying that over to PlayCanvas and Javascript. I think the key is rewriting the following line so that the script knows to include the Contentful SDK.

var contentful = require("contentful");

The above line gives an error ‘require’ is undefined. Is there an alternate way of doing this in PlayCanvas?

Edit
Another way of looking at it might be, how do I access a script loaded through the External Scripts list in the project settings?

4

Can you show what code you have now please? (And where the error is?)

Adding a script via External scripts adds the script to the HTML header tag so it should be accessible by default.

5

I added var client; at the top of the script and that made things progress further to line 22,
console.log("CLIENT " + client.space);
where I get an error Cannot read property ‘space’ of undefined

Here’s the full script.

var ContentfulFetch = pc.createScript('contentfulFetch');

var client;

// - - - - - - - - - - - - - - - - - - - -
// INITIALIZE
// - - - - - - - - - - - - - - - - - - - -
ContentfulFetch.prototype.initialize = function() {
      
    this.entity.element.on('mousedown', this.onPress, this);
    this.entity.element.on('mouseup', this.onRelease, this);
    
    this.entity.element.on('touchstart', this.onPress, this);
    this.entity.element.on('touchend', this.onRelease, this);

    //var contentful = require("contentful");                   //This line seems to be an issue
    this.client = contentful.createClient({
        space: "spaceID",
        accessToken: "accessTokenID"
    });
    
    console.log("CLIENT " + client.space);
};

// - - - - - - - - - - - - - - - - - - - -
// ON PRESS
// - - - - - - - - - - - - - - - - - - - -
ContentfulFetch.prototype.onPress = function (event) {
    
    console.log('TEST ' + this.client);
    
    this.client.getEntry('entryID').then(function (entry)
    {
        // logs the entry metadata
        console.log(entry.sys);

        // logs the field with ID title
        console.log(entry.fields.assetName);
    });
};

I feel like I"m missing something small at this point.

Edit
Mixed up the line that was causing the error.

6

You shouldn’t need this line

Don’t need this line either.

Change to:
console.log("CLIENT " + this.client.space);

7

Thanks @yaustar that did it! I have to shake my head… the number of times I’ve had an error as a result of forgetting this. :frowning:

I really appreciate the help!