How to write magento custom search using GraphQl?

How to write custom search using GraphQl in magento 2? – Today’s article is about how to create a custom GraphQl schema for custom search page.

Which includes Search,Filter and Pagination. In This article i am going to start with the schema.graphqls. To explain How to Pass the search string, pass the filtering inputs, Page size and current-page for pagination.

Below is the basic idea of the page i am going to cover by today’s article.

I am not going to consider creating custom module explanation here. Hope that is pretty familiar with every one. Who are searching for this type of custom graphql related stuffs. As usual we need to create a schema.graphqls, Resolver file and Data provider file.
Lets see how our schema.graphqls files looks like. This is something different rather than our previous custom modules like below.

1. How to create GraphQl schema for Magento 2 custom module with custom table?
2. How to create a GraphQl schema by passing argument for custom magento 2 module with custom table ?
3. How to get product attribute value, label using GraphQl in Magento 2 ?

Schema.graphqls file ( app/code/Ayakil/News/etc/schema.graphqls )

I will explain one by one in this query news. Search is the direct input field which pass the search string to resolver. Filter is the input type, which is passing the FilterTypeInput to the resolver. So wants to define input NewsFilterInput after the query. pageSize and currentPage are common used for pagination.
Our resolver returning the NewsData. Which contain the total_count, total_pages and newsList array.

As we mentioned in our query. Resolver file is located at (app/code/Ayakil/News/Model/Resolver/News.php)

In the resolver file we can capture the data passed from the query and post it to the data provider file and return the result.

Data provider file is located in ( app/code/Ayakil/News/Model/Resolver/DataProvider/News.php )

Hope the data provider file contents are clear. Want to add the values to $news_data array by iterating through records and return the final data array like

GraphQl query to get the records. You may read What is GraphQl in Magento 2 and how to access it? for more clarification on GraphQl magento 2.

Below is the sample results with the above query. In this query we are passing empty arguments along with page size 3. So the total record is 16 and it have 6 pages returned.

If we want to pass the argument for filter type, We just need to pass the argument like below. I am just passing the argument ( tourist ) for tags in filter.

So the result looks like below.

We can pass the search text , We want to pass like below.

So the result is looks like below.

So this is going to be the end of the lengthy article of how to create custom GraphQl search query. I explained step by steps from the starting of creating the GraphQl schema to get the results. Along with passing the argument for the queries and get the results.

Hope this may be help some one. All these steps are checked in my projects. A happy stuff was we launched our PWA first project. Which is totally handled by magento 2( for back-end) and React ( for front-end).

That’s it for today for the article of how to write magento custom search using graphQl in magento 2. Share your thoughts and stay touch with me by comments. Tell me some thing that this article was really helpful, it may motivate me to write more with some fantastic articles in future.

That’s it. Have a nice day.Enjoy coding , Learn , Experience , Teach and Help.