Search by Algolia
How personalization boosts customer engagement
e-commerce

How personalization boosts customer engagement

You land on your favorite retailer’s website, where everything seems to be attractively arranged just for you. Your favorite ...

Jon Silvers

Director, Digital Marketing

What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?
e-commerce

What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?

There is such tremendous activity both on and off of retailer websites today that it would be impossible to make ...

Catherine Dee

Search and Discovery writer

8 ways to use merchandising data to boost your online store ROI
e-commerce

8 ways to use merchandising data to boost your online store ROI

New year, new goals. Sounds positive, but looking at your sales data, your revenue and profit aren’t so hot ...

John Stewart

VP, Corporate Communications and Brand

Algolia DocSearch + Astro Starlight
engineering

Algolia DocSearch + Astro Starlight

What is Astro Starlight? If you're building a documentation site, your content needs to be easy to write and ...

Jaden Baptista

Technical Writer

What role does AI play in recommendation systems and engines?
ai

What role does AI play in recommendation systems and engines?

You put that in your cart. How about this cool thing to go with it? You liked that? Here are ...

Catherine Dee

Search and Discovery writer

How AI can help improve your user experience
ux

How AI can help improve your user experience

They say you get one chance to make a great first impression. With visual design on ecommerce web pages, this ...

Jon Silvers

Director, Digital Marketing

Keeping your Algolia search index up to date
product

Keeping your Algolia search index up to date

When creating your initial Algolia index, you may seed the index with an initial set of data. This is convenient ...

Jaden Baptista

Technical Writer

Merchandising in the AI era
e-commerce

Merchandising in the AI era

For merchandisers, every website visit is an opportunity to promote products to potential buyers. In the era of AI, incorporating ...

Tariq Khan

Director of Content Marketing

Debunking the most common AI myths
ai

Debunking the most common AI myths

ARTIFICIAL INTELLIGENCE CAN’T BE TRUSTED, shouts the headline on your social media newsfeed. Is that really true, or is ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

How AI can benefit the retail industry
ai

How AI can benefit the retail industry

Artificial intelligence is on a roll. It’s strengthening healthcare diagnostics, taking on office grunt work, helping banks combat fraud ...

Catherine Dee

Search and Discovery writer

How ecommerce AI is reshaping business
e-commerce

How ecommerce AI is reshaping business

Like other modern phenomena such as social media, artificial intelligence has landed on the ecommerce industry scene with a giant ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

AI-driven smart merchandising: what it is and why your ecommerce store needs it
ai

AI-driven smart merchandising: what it is and why your ecommerce store needs it

Do you dream of having your own personal online shopper? Someone familiar and fun who pops up every time you ...

Catherine Dee

Search and Discovery writer

NRF 2024: A cocktail of inspiration and innovation
e-commerce

NRF 2024: A cocktail of inspiration and innovation

Retail’s big show, NRF 2024, once again brought together a wide spectrum of practitioners focused on innovation and transformation ...

Reshma Iyer

Director of Product Marketing, Ecommerce

How AI-powered personalization is transforming the user and customer experience
ai

How AI-powered personalization is transforming the user and customer experience

In a world of so many overwhelming choices for consumers, how can you best engage with the shoppers who visit ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show
algolia

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show

Get ready for an exhilarating journey into the future of retail as Algolia takes center stage at the NRF Retail ...

John Stewart

VP Corporate Marketing

How to master personalization with AI
ai

How to master personalization with AI

Picture ecommerce in its early days: businesses were just beginning to discover the power of personalized marketing. They’d divide ...

Ciprian Borodescu

AI Product Manager | On a mission to help people succeed through the use of AI

5 best practices for nailing the ecommerce virtual assistant user experience
ai

5 best practices for nailing the ecommerce virtual assistant user experience

“Hello there, how can I help you today?”, asks the virtual shopping assistant in the lower right-hand corner ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Add InstantSearch and Autocomplete to your search experience in just 5 minutes
product

Add InstantSearch and Autocomplete to your search experience in just 5 minutes

A good starting point for building a comprehensive search experience is a straightforward app template. When crafting your application’s ...

Imogen Lovera

Senior Product Manager

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