How to write custom search using graphQl in Magento 2?

How to write custom search in Graphql

How to write custom search using graphQl in magento 2? – Today’s article is about how to create a custom GraphQl shema for custom search page. Which includes Search,Filter and Pagination. In This article i am going to start with the shema.grapghqls. To explain How to Pass the search string, pass the filtering inputs, Page size and current-page for pagination.

Which includes Search,Filter and Pagination. In This article i am going to start with the shema.grapghqls. 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.

grapghql shema for search and filter in magento 2.3
A model news page contains search,filter and pagination.

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 shema.graphqls,Resolver file and Data provider file.
Lets see how our shema.graphqls files looks like. This is something different rather than our previous custom modules.

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

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.

magento 2 custom graphql search query.
graphql query and result for search.

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.

graphql query with passing arguments.
Graphql query with passing arguments.

If we want to pass the search text, We want to pass like below.

So the result is looks like below.

Graphql query with passing arguments.
Graphql query with passing arguments.

So this is going to be the end of the lengthy article of how to create custom search graphql 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.

That’s it for today for the article of how to write custom search 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.

Leave a Reply

Your email address will not be published. Required fields are marked *