Search by Algolia
What is a multi-vendor marketplace, and how to build one?
e-commerce

What is a multi-vendor marketplace, and how to build one?

Want to be the next Amazon? How about a follow-on to Etsy that adds a unique twist? We all ...

Catherine Dee

Search and Discovery writer

What is end-to-end AI search?
ai

What is end-to-end AI search?

Simplicity is critical for search engines, but building one that enables that simplicity is complex.  Over the last 20+ years ...

Abhijit Mehta

Director of Product Management

Comparing AI search solutions in a crowded market landscape
ai

Comparing AI search solutions in a crowded market landscape

Many new AI-powered search solutions have been released this year, and each promises to provide great results, but as ...

Andy Jones

Marketing Campaign Production Manager

What is B2B ecommerce? Everything you need to know
e-commerce

What is B2B ecommerce? Everything you need to know

When you think of “customer experience,” what comes to mind? People, right? Specifically, consumers. Retail customers. That’s easy; the ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is ecommerce merchandising? Key components and best practices
e-commerce

What is ecommerce merchandising? Key components and best practices

A potential customer is about to land on the home page of your ecommerce platform, curious to see what cool ...

Catherine Dee

Search and Discovery writer

AI-powered search: From keywords to conversations
ai

AI-powered search: From keywords to conversations

By now, everyone’s had the opportunity to experiment with AI tools like ChatGPT or Midjourney and ponder their inner ...

Chris Stevenson

Director, Product Marketing

Vector vs Keyword Search: Why You Should Care
ai

Vector vs Keyword Search: Why You Should Care

Search has been around for a while, to the point that it is now considered a standard requirement in many ...

Nicolas Fiorini

Senior Machine Learning Engineer

What is AI-powered site search?
ai

What is AI-powered site search?

With the advent of artificial intelligence (AI) technologies enabling services such as Alexa, Google search, and self-driving cars, the ...

John Stewart

VP Corporate Marketing

What is a B2B marketplace?
e-commerce

What is a B2B marketplace?

It’s no secret that B2B (business-to-business) transactions have largely migrated online. According to Gartner, by 2025, 80 ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

3 strategies for B2B ecommerce growth: key takeaways from B2B Online - Chicago
e-commerce

3 strategies for B2B ecommerce growth: key takeaways from B2B Online - Chicago

Twice a year, B2B Online brings together industry leaders to discuss the trends affecting the B2B ecommerce industry. At the ...

Elena Moravec

Director of Product Marketing & Strategy

Deconstructing smart digital merchandising
e-commerce

Deconstructing smart digital merchandising

This is Part 2 of a series that dives into the transformational journey made by digital merchandising to drive positive ...

Benoit Reulier
Reshma Iyer

Benoit Reulier &

Reshma Iyer

The death of traditional shopping: How AI-powered conversational commerce changes everything
ai

The death of traditional shopping: How AI-powered conversational commerce changes everything

Get ready for the ride: online shopping is about to be completely upended by AI. Over the past few years ...

Aayush Iyer

Director, User Experience & UI Platform

What is B2C ecommerce? Models, examples, and definitions
e-commerce

What is B2C ecommerce? Models, examples, and definitions

Remember life before online shopping? When you had to actually leave the house for a brick-and-mortar store to ...

Catherine Dee

Search and Discovery writer

What are marketplace platforms and software? Why are they important?
e-commerce

What are marketplace platforms and software? Why are they important?

If you imagine pushing a virtual shopping cart down the aisles of an online store, or browsing items in an ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is an online marketplace?
e-commerce

What is an online marketplace?

Remember the world before the convenience of online commerce? Before the pandemic, before the proliferation of ecommerce sites, when the ...

Catherine Dee

Search and Discovery writer

10 ways AI is transforming ecommerce
e-commerce

10 ways AI is transforming ecommerce

Artificial intelligence (AI) is no longer just the stuff of scary futuristic movies; it’s recently burst into the headlines ...

Catherine Dee

Search and Discovery writer

AI as a Service (AIaaS) in the era of "buy not build"
ai

AI as a Service (AIaaS) in the era of "buy not build"

Imagine you are the CTO of a company that has just undergone a massive decade long digital transformation. You’ve ...

Sean Mullaney

CTO @Algolia

By the numbers: the ROI of keyword and AI site search for digital commerce
product

By the numbers: the ROI of keyword and AI site search for digital commerce

Did you know that the tiny search bar at the top of many ecommerce sites can offer an outsized return ...

Jon Silvers

Director, Digital Marketing

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

Widely used on the web, GraphQL brings many advantages to developers. On the front end, it reduces roundtrips and enables better client-side caching. On the back-end, it simplifies the multiplicity of microservices by producing self-describing schema-based APIs. We’ll see how to enhance GraphQL search functionality in this article.

Algolia shares some of the same core values as GraphQL, such as providing a performant and streamlined way to access data and valuing a great developer experience. For this reason, when developers combine Algolia with GraphQL, they are given a rich set of tools to build a best-in-class search experience.

To see how these two technologies work together, we’ve created a fictional company that offers online flight price comparisons (flight-tickets.io). Flight-tickets.io’s system first leverages GraphQL to improve Algolia’s back-end indexing process, and then it integrates Algolia InstantSearch to provide a unified front-end programming environment.

Index rich data into Algolia with GraphQL

The company’s Algolia index exposes tickets prices that come from dozens of external providers. Without GraphQL, the ETL implementation to index all the providers’ data into the Algolia index was complex–it required a worker for each data source.

Here’s the flow:

As you can see, there were three steps: Pull data from multiple providers, transform it, and then push it to Algolia. The complexity of this process rapidly increased as the number of data sources and API types (REST, gRPC, …) grew, leading to slower integration and support from the engineering team for new providers.

There were stability issues as well:

  • each worker had to make multiple calls to multiple APIs for each data provider
  • each provider exposed data with its own protocol: REST, gRPC, or proprietary
  • custom error management was unique to each provider

Adding GraphQL-based indexing

The solution was to rewrite the ETL by leveraging GraphQL, as follows:

Now, the pull and transformation stages were managed (or unified) by one GraphQL process. By building a new GraphQL internal API, relying on GraphQL Mesh, the team added a single data layer between the data providers and the ETL.

Essentially, the ETL pulls or subscribes to data changes from the internal GraphQL API, which exposes multiple data sources that are queried in a unified way, as follows:

query getTicketsForProvider($provider: Provider!, $from: Date!, $to: Date!, $cursor: Cursor) {
  tickets(provider: $provider, from: $from, to: $to, cursor: $cursor) {
    edges {
      node {
        provider {
          id
          name
        }
        prices {
          ...PriceByLocationAndTime
        }
        # ...
      }
      pageInfo {
        cursor {
          before
          after
        }
      }
    }
  }
}

The data is uniform and includes error handling. Here’s a typical GraphQL error response body containing data and errors fields:

{
  "data": {
     “tickets”: []
  },
  "errors": [
    {
      "message": "[SuperFlight API]: unavailable",
      "locations": [
        {
          "line": 2,
          "column": 3
        }
      ],
      "extensions": {
        "code": "TICKETS_GRAPHQL_API_SUPERFLIGHT_ERROR",
        "exception": {
          "stacktrace": [
            "......",
          ]
        }
      }
    }
  ]
}

Finally, besides network latency optimization, GraphQL brings real performance optimizations on the provider’s data-fetching side. GraphQL API implementation is highly asynchronous by design: each data field is resolved in parallel, resulting in better performances.

Side-note:
For Algolia’s Shopify extension, we leverage Shopify’s GraphQL API to index Shopify data into Algolia indices. Shopify’s GraphQL API not only brings the same advantages already discussed, but it also goes further:

  • More generous and flexible rate-limiting, compared to the Shopify REST API
  • Advanced pagination patterns

We see a 28% increase in average indexing speed and a 150% increase in indexing peak capacity of Shopify data after migrating from the Shopify REST API to the Shopify GraphQL API.

GraphQL search with Instant Search

Now that they’ve unified with GraphQL, the airline company wanted to revamp their search UI to use a GraphQL back-end search for SEO and data enrichment reasons, backed by Algolia. While we always recommend front-end search (that is, to go directly to Algolia’s servers for maximum, instantaneous speed), in the case of reservations systems like reserving airlines tickets, it is sensible to take an extra trip back to the back-end server to fetch real-time data. As for SEO, you can often combine the back and front ends to enhance your company’s Google SEO.

Algolia GraphQL search

The first step was to expose a GraphQL search query on the existing public GraphQL API. To achieve this, the back-end team used a tool called algolia-graphql-schema that generated GraphQL types from a given Algolia index.

The flightsSearch Algolia index contained objects like the following:

{
  "provider_id": 12312312,
  "flight_company_name": "Bryan'air",
  "inbound": "2021-09-13T16:39:22.396Z",
  "outbound": "2021-19-13T16:39:22.396Z",
  "price": 1140.00
  // ...
}

They added the following script to the package.json:

// ...
"scripts": {
  "generate:graphql": "algolia-graphql-schema"
},
// …

And ran the script:

$ npm link
$ npm run generate:graphql

> algolia-graphql-demo-server@1.0.0 generate:graphql
> algolia-graphql-schema

Analyzing flightsSearch index (that might take a few seconds...)
flightsSearch.graphql created!

The following flightsSearch.graphql is generated:

type AlgoliaResultObject {
  provider_id: String!
  flight_company_name: String!
  inbound: Date!
  outbound: Date!
  price: Int!
  # ...
}

type SearchResultsEdge {
  cursor: Int!
  node: AlgoliaResultObject
}

type SearchResults {
  edges: [SearchResultsEdge!]!
  totalCount: Int!
}

input SearchInput {
  query: String
  similarQuery: String
  sumOrFiltersScores: Boolean
  filters: String
  page: Int
  hitsPerPage: Int
  offset: Int
  length: Int
  attributesToHighlight: [String]
  attributesToSnippet: [String]
  attributesToRetrieve: [String]
  # ...
}

type Query {
  # ...
  search_flights($input: SearchInput!, $after: String): [SearchResults!]!
}

Once they integrated the generated search types definition in the existing GraphQL API types and implemented the corresponding resolvers that called the Algolia search API, the back-end team gave the front-end team the green light to build the new Search UI using Algolia InstantSearch.

Algolia InstantSearch GraphQL integration

The front-end team was now able to use the search_flights($input: SearchInput!, $after: String) GraphQL Query to search for flights tickets. Fortunately, Algolia has documented how to use InstantSearch on the back end, so the setup was swift.

The front-end team implemented a custom GraphQL search client for their InstantSearch.

import { SearchClient } from 'instantsearch.js'

const query = `
  Search($input: SearchInput!, $after: String) {
    search_flights(input: $input, before: $after) {
      edges {
        cursor
        node {
          provider_id
          flight_company_name
          inbound
          outbound
          price
          # ...

        }
      }
      totalCount
    }
  }
`;

const HITS_PER_PAGE = 20

const transformResponse = ({ query, page }) => (response) =>
  response.data?.search_flights.edges.reduce(
    (acc, edge) => {
      acc.results[0].hits.push(edge.nodes);
      acc.results[0].nbHits += 1
    },
    {
      results: [
        {
            hits: [],
            page,
            nbHits: response.data?.search_flights.edges.length || 0,
            nbPages: response.data?.search_flights.totalCount / HITS_PER_PAGE,
            query: query || "",
            exhaustiveNbHits: false,
            hitsPerPage: HITS_PER_PAGE,
            processingTimeMS: 0,
            params: ""
          }
      ],
    }
  );

const searchClient: SearchClient = {
  searchForFacetValues: (() => {}) as any,
  search(requests) {
    const request = requests[0]
    return fetch("https://api.flightickets.io/graphql", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        query,
        variables: { input: { ...request } },
      }),
    }).then(transformResponse({ query: request.query, page: request.page }));
  },
};

Note: The search UI code targets a single Algolia index through a GraphQL API.

The custom hits widget benefits from the TypeScript search results types generated from the GraphQL search API, as seen here:

// TypeScript types generated from the GraphQL API using GraphQL code generator
import { AlgoliaResultObject } from './graphql/generated'

const structuredResults = connectHits(({ hits, widgetParams }) => {
  const results = hits as AlgoliaResultObject[];
  // results.flight_company_name is autocompleted by TypeScript generated types

  const { container } = widgetParams;

  if (
    results
  ) {
    // Render the result
    // ...
    return;
  }

  // Render no results
  // ...
});

They’re ready to go. They just need to integrate Algolia into the GraphQL API as well as the front-end’s InstantSearch configuration:

  • On the API side, they need to call Algolia with the JavaScript client
  • On the InstantSearch side, they need to provide the searchClient and a custom hits widget to InstantSearch

Conclusion

By combining Algolia and GraphQL, flight-tickets.io improved their overall user and developer experience.

First, by building a faster, more stable, and rich indexing pipeline leveraging GraphQL to consume and unify data from dozens of providers:

  • A unique data language and error management
  • Some performance improvements thanks to GraphQL parallel architecture
  • Less complexity leading to an improved developer experience

Finally, by leveraging GraphQL and building a back-end search, the front-end team perfectly integrated the search into the front-end stack with Algolia InstantSearch.

Have any feedback on this post? I’d love to hear from you: @whereischarly

About the author
Charly Poly

Freelance Front-end Architect

githubtwitter

Recommended Articles

Powered byAlgolia Algolia Recommend

Integrating third-party APIs into GraphQL with Apollo Client
engineering

David Lee

Sr. Frontend Engineer at Openbase

Building a COVID-19 geosearch index using CSV files, MongoDB, or GraphQL
engineering

Chuck Meyer

Sr. Developer Relations Engineer

An Exploration of Search and Indexing: Fast Indexing Scenarios
product

Peter Villani

Sr. Tech & Business Writer