[SUBMIT] How to implement infinite scrolling when using Strapi in React

[Tammibriggs]

My resource

In this article, I will show how to implement infinite scrolling which is one of the patterns used to handle performance issues that may arise when working with large data sets.

Outline:

• What is infinite scrolling
• Cloning the stater Strapi app
  • Brief overview of our stater app
• Implementing infinite scrolling
  • Observing scroll position for appending to existing data
  • Create functionality to fetch new data based on scroll position
  • Stop fetching when all data has been fetched
• Conclusion

My content is

• [x] A Strapi Tutorial / Guide / How to article
• [ ] About Headless, CMS, javascript, open source, or jamstack
• [ ] Other, specify

What do you all think? ❤️ I love it! 🚀 I can help you!

Thank you for submitting your article proposal.

[ShadaW11]

Hello @Tammibriggs can you please expand more on your outline before we approve this tutorial?

What app will you build? what tech stack will you use? we already have some tutorials covering this topic such as this: https://www.youtube.com/watch?v=VHf2EM38Ikg

I would like to have an article published on the blog about this topic but it has to be within a certain use case and also should include using one of our plugins published on our market place here: https://market.strapi.io

[Tammibriggs]

Hi @ShadaW11, thanks for your reply.

I will update the pitch and send it to you ASAP.

[Tammibriggs]

Hi @ShadaW11, I have updated the outline based on your suggestions.

Here is the updated outline:

• Setting up a Strapi Project
  • Creating the Collection Types
• Building a Book app
  • Brief overview of our app
  • Adding book data to Strapi
  • Integrating Meilisearch for searching books
  • Implementing infinite scrolling with intersection observer
    • Observing scroll position for appending to existing data
    • Create functionality to fetch new data based
• Conclusion

[ShadaW11]

Hello @Tammibriggs thank you for updating the outline. Can you please let me know what tech stack you will be using? also can you add additional plugins? here's a sample of a detailed outline:

1- Goal

In this tutorial, we will look at how we....

Outline

The need for headless CMS Why use strapi? How it all works setting up the Nuxt frontend Configuring Nuxt to work with Apollo Client Creating a Strapi Collection Type Install the Strapi GraphQL Plugin Using the GraphQL Playground Adding a query to our Nuxt client Rendering Strapi data in the Nuxt client Resources

Github code Resources Conclusion

2- Hi, I will like a create a new tutorial about....

Outline

Introduction Prerequisites Backend Setup Strapi Setup Cloudinary installation and set up Creating Photos collection type Allowing Access to the backend Frontend Setup 11ty and Tailwind CSS Setup Connect Strapi backend to 11ty frontend Creating 11ty file structure Creating Website's layout Importing and displaying data from Strapi Conclusion

[ShadaW11]

Can you please update and expand your outline based on the above feedback. Thank you

[Tammibriggs]

Hi @ShadaW11, here is the updated outline using the above samples.

Topic: Build a book app with infinite scrolling and Meilisearch Strapi Plugin in React

Goal In this tutorial, we will be building a book app using Strapi. The app will focus on how to fetch and render data in chunks with infinite scrolling and how to integrate and use meilisearch plugin to search for data.

Outline

• Introduction
• Prerequisite
• Setting up a Strapi Project
  • Creating the Collection Types
• Building a Book app
  • Brief overview of our app
  • Adding book data to Strapi
  • Integrating Meilisearch for searching books
  • Implementing infinite scrolling with intersection observer
    • Observing scroll position for appending to existing data
    • Create functionality to fetch new data
• Conclusion

What do you think?

[Tammibriggs]

Hi @ShadaW11,

I haven't heard from you concerning the updated outline above.

Is it ok now?

[ShadaW11]

Hello @Tammibriggs sounds great, please gp ahead and start working on it.

[Tammibriggs]

Hi @ShadaW11,

I am done with the article. Here is the link to it on DropBox: https://www.dropbox.com/scl/fi/w8s31b8f79o9k57w6leg6/Build-a-book-app-with-infinite-scrolling-and-Meilisearch-Strapi-Plugin-in-React.paper?dl=0&rlkey=iuhiksa0xodbryvke9d6cfofc

[PaulBratslavsky]

@Tammibriggs not sure if anyone has responded yet in terms of reviewing your article. I am going to be taking over for what Shada used to do here. I am fairly new so still learning the ropes around the process.

[Tammibriggs]

Hi @PaulBratslavsky,

No one has answered me yet.

[PaulBratslavsky]

I will review your article, as well as the steps that I need to take, and will get back to you.

[Tammibriggs]

@PaulBratslavsky,

Any update on the review of the article.

[TiaraOluwanimi]

@Tammibriggs, thanks for your patience. There are no updates yet, but you'll get them soon. Your article will be reviewed and published. Thanks.

[dessireugarte]

Hello @Tammibriggs 👋 Just wanted to let you know that your article will be published the second week of August so you can proceed to submit your invoice and get your payment.

[Tammibriggs]

@dessireugarte Please where should I submit my invoice?

[dessireugarte]

Hello @Tammibriggs 👋 Your article is live! 🎉 Please register to our forum by clicking on the discussion at the bottom of your post, so you automatically receive notifications when someone adds comments. Also please follow the guidelines to issue and submit an invoice. Now you can submit your invoice here, and soon you will receive your payment. Please feel free to reach out to me if you have any questions!

[dessireugarte]

Hello @Tammibriggs 👋

We just got contacted by Meilisearch and they are very pleased about the article you wrote. They are willing to promote on their side, but they shared these comments:

1. the article is showing v0.27.2 of Meilisearch, which is an old one as we're now they are at v0.28.1
2. there is no search-as-you-type
3. They noticed a few missing imports that prevent the code from working

Could you take a look at these changes? cc @malgamves @TiaraOluwanimi

[Tammibriggs]

Hi @dessireugarte,

Let me look into this and give you feedback.

[Tammibriggs]

Hi @dessireugarte @malgamves @TiaraOluwanimi,

I have confirmed that with the upgrade of Meiliserach to v0.28.1 breaking changes have been introduced and indeed there is a missing import in the article that prevents the code from working. So how should I proceed to fix this?

Also, I don't get what you mean by there is no search-as-you-type. Is it that you want me to include that functionality?

[malgamves]

Hi @dessireugarte @malgamves @TiaraOluwanimi,

I have confirmed that with the upgrade of Meiliserach to v0.28.1 breaking changes have been introduced and indeed there is a missing import in the article that prevents the code from working. So how should I proceed to fix this?

Also, I don't get what you mean by there is no search-as-you-type. Is it that you want me to include that functionality?

Could you make the relevant changes to the original Dropbox Paper doc you used to write the first version of the article and then tag @TiaraOluwanimi when done?

Also, yes you would have to implement that functionality. Let us know if you have any other questions

[Tammibriggs]

Hi @TiaraOluwanimi,

I am done making the suggested changes to the article on Dropbox.

[Tammibriggs]

Hi @dessireugarte, it's been over 3 weeks I sent my invoice but I haven't gotten paid.

[malgamves]

hey @Tammibriggs we had a lot of our team on summer holiday thus the delay. We've put this through. Could you ping in a week if the status doesn't change?

[Tammibriggs]

Hi @malgamves It's been more than a week now but I haven't still received it.

[malgamves]

hey @Tammibriggs please confirm that this is sorted now?

[Tammibriggs]

Yes, it has been sorted. Sorry for not telling you earlier.