How to Implement Search in GraphQL: Simple Guide

To implement search in GraphQL, define a query with arguments that accept search criteria, then filter your data source based on those arguments in the resolver. Use input types or simple scalar arguments to pass search terms, and return matching results from your database or data array.

Syntax

A typical GraphQL search query includes a query field with arguments for search terms. The resolver uses these arguments to filter data. The main parts are:

• query: The operation to fetch data.
• searchTerm: An argument to pass the search keyword.
• resolver: The function that filters data based on searchTerm.

graphql

type Query {
  searchItems(searchTerm: String!): [Item]
}

type Item {
  id: ID!
  name: String!
  description: String
}

Example

This example shows a GraphQL schema with a searchItems query that accepts a searchTerm. The resolver filters a list of items by checking if the name or description includes the search term.

javascript

const { ApolloServer, gql } = require('apollo-server');

const typeDefs = gql`
  type Query {
    searchItems(searchTerm: String!): [Item]
  }

  type Item {
    id: ID!
    name: String!
    description: String
  }
`;

const items = [
  { id: '1', name: 'Apple', description: 'A red fruit' },
  { id: '2', name: 'Banana', description: 'Yellow and sweet' },
  { id: '3', name: 'Carrot', description: 'Orange vegetable' }
];

const resolvers = {
  Query: {
    searchItems: (_, { searchTerm }) => {
      const lowerTerm = searchTerm.toLowerCase();
      return items.filter(item =>
        item.name.toLowerCase().includes(lowerTerm) ||
        (item.description && item.description.toLowerCase().includes(lowerTerm))
      );
    }
  }
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

Output

Server ready at http://localhost:4000/

Common Pitfalls

Common mistakes when implementing search in GraphQL include:

• Not validating or sanitizing the search input, which can cause errors or security issues.
• Returning too many results without pagination, leading to performance problems.
• Using case-sensitive search unintentionally, which may miss matches.
• Not handling empty or null search terms properly.

Always normalize input (e.g., to lowercase) and consider adding pagination arguments like limit and offset.

javascript

/* Wrong: Case-sensitive search and no input check */
searchItems: (_, { searchTerm }) => {
  return items.filter(item => item.name.includes(searchTerm));
}

/* Right: Case-insensitive and input checked */
searchItems: (_, { searchTerm }) => {
  if (!searchTerm) return [];
  const lowerTerm = searchTerm.toLowerCase();
  return items.filter(item => item.name.toLowerCase().includes(lowerTerm));
}

Quick Reference

• Define search arguments in your GraphQL query.
• Filter data in resolvers using those arguments.
• Normalize search input for consistent matching.
• Use pagination to limit results.
• Validate inputs to avoid errors.

Key Takeaways

Define search arguments in your GraphQL schema to accept search terms.

Filter your data in resolvers using case-insensitive matching for better results.

Always validate and normalize search inputs to avoid errors and improve accuracy.

Implement pagination to handle large result sets efficiently.

Test your search queries to ensure they return expected results.