0

I'm trying out Gridsome and Vue.js for a fairly large website conversion. The website needs to be able to load data from an API. I've been trying to follow the instructions on https://gridsome.org/docs/fetching-data/#import-from-apis - I pasted in the example code.

However, I'm getting this error when I try to run gridsome develop

C:\projects\folder\project>gridsome develop Gridsome v0.6.9

Initializing plugins... Initialize - 0.97s TypeError: actions.addCollection is not a function at api.loadSource (C:\projects\VueJS-Research\my-gridsome-test-VS\gridsome.server.js:17:36) at process._tickCallback (internal/process/next_tick.js:68:7)

being new to Vue.js, I'm not sure what's going on here. is there a package I'm missing?

I have to say, if following the documentation causes these kinds of issues, I might have to conclude that Gridsome is not mature enough to use in a commercial setting and we might have to look somewhere else.

Any help would be appreciated, Thanks.

code in the gridsome.server.js file:



const axios = require('axios')

module.exports = function (api) {

    api.loadSource(async actions => {

        const { data } = await axios.get('http://dev.client.local/api/items/suggestitems?family=someCategory')

        const collection = actions.addCollection({ typeName: 'clientItems' })


        for (const item of data) {
            collection.addNode({
                label: item.label,
                labelNoFamily: item.labelNoFamily,
                path: item.path
            })
        }
    })

  //api.loadSource(({ addContentType }) => {
  //  // Use the Data Store API here: https://gridsome.org/docs/data-store-api
  //})

  api.createPages(({ createPage }) => {
    // Use the Pages API here: https://gridsome.org/docs/pages-api
  })


}
marcel_g
  • 1,980
  • 2
  • 17
  • 19
  • 1
    Hi marcel_g, first of all can you please update to the latest version 0.7.12 ? Did you npm install axios ? Did you in general run npm install ? If you did all above I can post an my example tomorrow. – ewatch Feb 12 '20 at 23:51
  • Thanks @ewatch - I did run 'npm install' in the project folder, and 'npm install gridsome', and 'npm install -g gridsome', but because of a warning about a bootstrap dependency, I guess it never updated. Gridsome was still stuck at 0.6.9. Being new to npm and node.js and vue.js, it took me a while to figure this out. Basically, install the correct jquery, and then force npm to get the right version of gridsome. -> 'npm i jquery@1.9.1 --save' followed by 'npm install npm-check-updates', followed by 'npm i gridsome@0.7.12 --save' – marcel_g Feb 13 '20 at 05:31

1 Answers1

1

Solved:

I was a little baffled by this, so I had to look up how to find the which version of gridsome was installed. It wasn't installed globally, so I had to navigate to the right folder to see which one it was.

Turns out it was 0.6.9, when the latest is 0.7.12, even though I had started this project with 'npm install gridsome' (I would have thought npm install would get the latest)

npm install npm-check-updates revealed that bootstrap was missing a dependency, so I apparently had to fix that first. I had tried to run 'npm install gridsome' and 'npm update gridsome' and various other permutations to get gridsome to update, but it never did.

The solution was:

  • 'npm i jquery@1.9.1 --save'
  • 'npm audit fix' (not sure if this was necessary)
  • 'npm install npm-check-updates' (also not sure if this was necessary)
  • followed by 'npm i gridsome@0.7.12 --save'

Apparently the --save option updates the package.json file in your local folder too, which might have been necessary as well.

marcel_g
  • 1,980
  • 2
  • 17
  • 19
  • 1
    Great that my questions put you in the right direction. I think jquery is not needed for running gridsome properly. Instead of jQuery gridsome is based on vue.js and it shouldn't be necessary to use jQuery. – ewatch Feb 13 '20 at 22:14
  • Yeah, I'm not sure why it was required. It looks like the starter sample project I started with requires bootstrap and jquery, so that might have been the sticking point. I haven't examined it closely enough to see why those are required, but it's possible they have some client side js, or they're needed to pull data from an instagram feed? – marcel_g Feb 19 '20 at 03:58