Implementing knowledgebase Search Functionality in a React Native App with Strapi and GraphQL

[leviOnNet]

What is your article idea?

Introduction
Searching through a large set of data efficiently is crucial for any application. In this tutorial, we will guide you through the process of implementing a search feature in a React Native app using Strapi as the backend and GraphQL for querying a knowledgebase.

Prerequisites
Basic knowledge of React Native
Familiarity with Strapi and GraphQL
A Strapi project set up with content to search through
Node.js and npm installed

Setting Up Strapi
how to setup a Strapi instance

Creating a Knowledgebase Content Type
adding content to the backend

Setting Up GraphQL Queries
understanding coding GraphQL queries

Setting Up the React Native App
setting up and creating a React Native app with search functionality

Conclusion
Conclusion

What are the objectives of your article?

how to create a local Strapi instance.
How to add content manually to a Strapi backend.
How to query the Strapi database with GraphQL.
How to create a React Native app.
how to implement search function on a React Native app.

What is your expertise as a developer or writer?

Intermediate

What type of post is this?

Tutorial

Terms & Conditions

• I have read the Write for the Community program guidelines.

[leviOnNet]

hi @Theodore-Kelechukwu-Onyejiaku, I just submitted another proposal.

[Theodore-Kelechukwu-Onyejiaku]

Hi @leviOnNet ,

How about building a knowledge-based app or system? Would you also consider using AI (Memory store and RAG)?

[leviOnNet]

Hi @Theodore-Kelechukwu-Onyejiaku no problem, I will create the knowledge-based app and add a Memory store and RAG.

[leviOnNet]

hi @Theodore-Kelechukwu-Onyejiaku here is the link to the hackmd article I write: https://hackmd.io/@Levi-masonde/BJUrlZl8C

[leviOnNet]

Hello @Theodore-Kelechukwu-Onyejiaku

Did you get a chance to look at this

[Theodore-Kelechukwu-Onyejiaku]

Hi @leviOnNet ,

Please could you grant me access to your draft?

[leviOnNet]

hi @Theodore-Kelechukwu-Onyejiaku ,

I just gave you access: https://hackmd.io/@Levi-masonde/BJUrlZl8C

[leviOnNet]

Hi @Theodore-Kelechukwu-Onyejiaku

Did you get to see my last comment?

[leviOnNet]

@Theodore-Kelechukwu-Onyejiaku

[Theodore-Kelechukwu-Onyejiaku]

Hi @leviOnNet ,

Thank you! I still don't have access to this draft. However, I left you some comments. Please incorporate. You can find the general review as well below:

Here is a general review of your work:

1. You are not capitalizing correctly. Please capitalize the first word of a sentence.
2. Use proper levels of heading where appropriate. Your headings are not properly used.
3. Please provide explanations to your codes.
4. The first time you mention a package, library, tool, function, etc. please provide a link.
5. Naturally integrate links to related blog posts within Strapi blog website to keep readers engaged and improve SEO.
6. Ensure technical terms are explained for readers who may not be familiar with them.

[leviOnNet]

hello @Theodore-Kelechukwu-Onyejiaku ,

I am done with the edits and have given you admin access to the notes. Thank you.

[leviOnNet]

Hello @Theodore-Kelechukwu-Onyejiaku,

This article should be intermediate or advanced since it uses more than 2 technologies along Strapi and the application uses complex concepts. please reconsider this if possible.

[leviOnNet]

hi @Theodore-Kelechukwu-Onyejiaku ,

any updates on this?

[Theodore-Kelechukwu-Onyejiaku]

Hi @leviOnNet, happy new year. Trust you are doing great. I was a bit late on this one since it didn't meet up with our writing guidelines.

Please have you implemented the changes requested, and are you willing to use Strapi 5?

[leviOnNet]

Hi @Theodore-Kelechukwu-Onyejiaku , compliments on the new year! I have made all the changes you advised on. Sure, I will re-do this with Strapi 5.

Can you consider changing the tag as mentioned above.

[Theodore-Kelechukwu-Onyejiaku]

Thank you @leviOnNet ,

I have updated the tag. How soon will this be ready? Meanwhile, I recommend that you use REST API.

That will be much easier. Let me know what you think. Thank you for your contribution.

[leviOnNet]

@Theodore-Kelechukwu-Onyejiaku okay, I am working on it.

[leviOnNet]

hello @Theodore-Kelechukwu-Onyejiaku . I am done with the edits.

[Theodore-Kelechukwu-Onyejiaku]

Hi @leviOnNet ,

Thank you for working on the edits.

Please, here are few more requests:

• Can you please upload the original videos here so I can convert them to GIFs myself as the ones in your draft are too blurry.
• We recommend you provide a link to your GitHub repo that is accessible so that we can run and test your work.
• And lastly, I am not sure you updated the draft to use Strapi 5, as can be seen in the Strapi dashboard and code, even though you mentioned the Strapi version upgrade.

[leviOnNet]

Hello @Theodore-Kelechukwu-Onyejiaku. thanks for the quick reply.

• I could only upload a cropped version of the original video here:
  https://github.com/user-attachments/assets/5a9c9910-3406-437a-83c4-ea81d395efc8

• Since this project has three applications running together, I put them in separate repos:

1. React Native application: https://github.com/leviOnNet/strapi5ReactNative
2. Strapi 5 application: https://github.com/leviOnNet/strapi5Kb
3. Python Ai search application: https://github.com/leviOnNet/Strapi5PythonAi

• I forgot to update the last code on my hackMD and to add the new screenshots. I have updated both.

[Theodore-Kelechukwu-Onyejiaku]

Thank you very much @leviOnNet ,

One last request please. Could you please upload the video above to YouTube and share the link so we can embed it into your article.

Please provide me with the following details:

• Full Name
• Photo
• Email
• Bio
• Job Title
• Twitter handle

You could share them here, or you can ping them to me on Discord.

Thank you for your contribution to the "Write for the Community" issue. 🚀

[leviOnNet]

Hello @Theodore-Kelechukwu-Onyejiaku ,

• here is the YouTube link: https://youtu.be/jh6gpXIATDc.
• Full Name: Levis Masonde.
• Photo:

• Email: Levi.masonde@gmail.com

• Bio: Levis Masonde is a full-stack developer fascinated by new, emerging software technologies and their real-world applications. He enjoys writing technical articles about these technologies as he believes in raising awareness for newcomers and veterans in this fast-paced field.

• Job Title: Full-stack developer

[leviOnNet]

Hi @Theodore-Kelechukwu-Onyejiaku. are article submissions still closed? I have a few ideas for projects.