feat: afterSourcesLoaded hook

[mklueh]

What I was trying to achieve was connecting collection entries of two sources with each other, based on certain fields.

However, using the getCollection action in the loadSources hook for this case won´t work, as the collections from the source plugins aren´t loaded before, but afterwards and getCollection always returns 'undefined'.

To solve this, I´ve created a new hook, called afterSourcesLoaded which is called after all source plugins have fetched their data and created their corresponding collections. You can do manipulation on all available data (that is loaded with the data store api).

Although it is working as expected, I´m not sure if it´s done correctly. For example I´ve used the BOOTSTRAP_SOURCES phase twice, not sure if it has side effects in some way.

Also, the createSchemaActions(api, this._app) is called from loadSources and afterSourcesLoaded. Consequences if any?

BTW: Is there any date specified for the next Gridsome release? I have no idea how I can use my changes in production (CI build) without using the NPM releases

[hjvedvik]

Thanks, @mklueh. Having a hook after the sources have loaded seems like a good idea :) Should we name it afterLoadSource instead, maybe?

I'm not sure when we'll publish the next version yet, unfortunately. But in the meanwhile, you can try something like this in your gridsome.server.js:

module.exports = (api) => {
  const { hooks, store } = api._app

  hooks.bootstrap.tapPromise({ name: 'YourHookName', before: 'createSchema' }, async () => {
    const collection = store.getCollection('YourCollection')
  })
}

[mklueh]

Thanks, @mklueh. Having a hook after the sources have loaded seems like a good idea :) Should we name it afterLoadSource instead, maybe?

Good point, but would you rather agree with afterLoadSources?

I'm not sure when we'll publish the next version yet, unfortunately.

Is something blocking new releases currently? I feel like minor changes like this one should be able to be pushed to master more frequently and released more often.

But in the meanwhile, you can try something like this in your gridsome.server.js:

module.exports = (api) => {
  const { hooks, store } = api._app

  hooks.bootstrap.tapPromise({ name: 'YourHookName', before: 'createSchema' }, async () => {
    const collection = store.getCollection('YourCollection')
  })
}

That's good to know, I'll try that. Thank you :)

[mklueh]

I´ve renamed it now, however I cannot test it anymore locally for whatever reason. Autocompletion of the function name works in IntelliJ, but I´m running into this issue

Hello from Gridsome Source
Initializing plugins...
TypeError: gridsome.server.js: api.afterLoadSources is not a function (13:9)

  11 |     })
  12 | 
> 13 |     api.afterLoadSources(({getCollection}) => {
     |         ^
  15 |         const postCollection = getCollection("Post");
  16 |         const post2Collection = getCollection("Post2");
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reverting the renaming now leads to the same issue. I think I did everything as mentioned in the contribution guide, created two projects in /projects, test and test2 with different starters.

did yarn link @gridsome/cli in those projects and added a console.log("Hello from Gridsome Source") into the App.js of Gridsome to see if the source is used correctly. test uses the gridsome source while test2 uses the npm version still.

Am I missing something? I mean two days ago the hook worked, and now it´s not found anymore. I also did unlink, yarn install --force etc

[mklueh]

Hi @hjvedvik ,

This does unfortunately not work.

    hooks.bootstrap.tapPromise({name: 'afterLoadSources', before: 'createSchema'}, async () => {
        const collection = store.getCollection('Products')
        const post = store.getCollection('Post')

        console.log(collection)
        console.log(post)
    })

    api.afterLoadSources(({getCollection}) => {

    })

the hook is not available and I get gridsome.server.js: api.afterLoadSources is not a function (25:9).

I´m also not sure how, if this would work the hook is called. Would that be done automatically because of the 'before' property?