Any Fork Maintaining Gridsome? Gridsome graphql port to Nuxt ?

[milindsingh]

Is there any fork maintaining Gridsome?

Or Shall I create one ?

[hacknug]

I'd prefer seeing something like Gridsome's data layer ported as a Nuxt plugin. Given both Nuxt and Gridsome overlap on lots of the things they do, I think this might have the potential to reach a bigger audience while reducing the scope of the project as it exists now.

Not sure how easy doing something like this would be and I don't even know if the current architecture for Nuxt modules/plugins would support.

[milindsingh]

I'd prefer seeing something like Gridsome's data layer ported as a Nuxt plugin. Given both Nuxt and Gridsome overlap on lots of the things they do, I think this might have the potential to reach a bigger audience while reducing the scope of the project as it exists now.

Not sure how easy doing something like this would be and I don't even know if the current architecture for Nuxt modules/plugins would support.

Its an amazing idea, I will do some poc this week with nuxt v3 and see if this is possible.

[N0K0]

Hey @milindsingh, did you figure out anything cool? 😄

[jacobsteenstenersen]

I'd prefer seeing something like Gridsome's data layer ported as a Nuxt plugin. Given both Nuxt and Gridsome overlap on lots of the things they do, I think this might have the potential to reach a bigger audience while reducing the scope of the project as it exists now.
Not sure how easy doing something like this would be and I don't even know if the current architecture for Nuxt modules/plugins would support.

Its an amazing idea, I will do some poc this week with nuxt v3 and see if this is possible.

@milindsingh detailed below is poc. It's not a replication of Gridsome's data layer but a way to do something similar in Nuxt 3 🔥

The library that you'll use in Nuxt is this. You'll be using query which has a mongodb query syntax (so no Graphql here). You'll also need to create a content folder that Nuxt content will read from.

At first glance this won't seem like a viable option, but it's similar to the gridsome data layer in the fact that you can access data from any of your Nuxt pages/components.

Your biggest hurdle is now physically creating that data on start up of nuxt dev instances/when building. You'll want to hook into nitro:config which runs before any of your Nuxt logic. Inside here, you'll make your requests to your content sources (such as Contentful) and the data that comes back you'll write as physical files inside of the content folder.

Once you've written your physical files, you can now access them in your setup function using queries like so:
const { data } = await useAsyncData('blog/${some-custom-param-maybe-a-slug}', () => queryContent('blog/${some-custom-param-maybe-a-slug}').findOne())
You'll notice that I duplicate the dynamic string. You need to have a custom id for your async data methods. The reason for this is because without a dynamic id and a change in the query string, your first initial request will fetch the correct data but any requests after (think navigation between blogs) will serve a cached version of that first request. Always give your useAsyncData calls a unique id

I know, this is wild but it works

It gets even spicier when you want to dynamically generate files like Gridsome's templates. Let's say you have a list of blogs you want to generate. Still inside of "nitro:config" you'll add these dynamic routes yourself like so config.prerender.routes.push('/blog/whoop');

You'll need to read up on how Nuxt handles generating dynamic pages.

Sorry for the huge post, but I just wanted to say that it is possible to create your own data layer but it is extremely tough and confusing 🫠

A plugin would be great, but right now you can use these steps to get something running in Nuxt

[hacknug]

Just to add to the convo, Nuxt's content module introduced two hooks in v2.3.0 that perhaps could be used to add the documents as @jacobsteenstenersen mentioned. Not sure how you'd use them or if they would allow for what has been discussed but I thought it would be a good idea to share here since it could help anyone willing to look into it 👍

nuxt/content#1744