Learn 11ty, Algolia and Apollo

Today’s users expect great things from their search experiences — speed, relevance, and usability, to name a few. Algolia provides developers with out-of-the-box and customizable search experiences that are a joy to build.

This introductory course on the Algolia search solution focuses on the user-facing part of search. Using the Algolia InstantSearch.js front-end library, we’ll see how to build an engaging search experience in no time. (28 minutes, to be exact.) 

**Prerequisites:** 
You don’t need previous experience with search to follow this course — we’ll use an example index with an e-commerce data set preconfigured. We will work mainly in JavaScript, so basic JS knowledge is expected.

If you want to play with your own index settings and data set, you can [create a free Algolia account here](https://www.algolia.com/users/sign_up/hacker/?utm_medium=link&utm_source=egghead&utm_campaign=education), but this is not required to follow along with this first course. 

Algolia's full suite APIs enable teams to develop unique search and discovery experiences for their customers across all platforms and devices. Type a query. Click a link. Open an app. Everything your customers do sends a signal about what they want. Algolia decodes that intent to deliver the right content - instantly.

algolia

Getting Started with Algolia InstantSearch.js

Eleventy, or 11ty,  is a simple yet very powerful static site generator. It does not require any config to get started.

This what it will take you to get an 11ty project running.

```
npm install -g @11ty/eleventy
echo '# Page header' > README.md
eleventy
```

After watching this collection you will be able to:

* Bootstrap a simple 11ty website
* Use 11ty layouts
* Chaining multiple 11ty layouts
* Use 11ty Collections
* Create pages from data

...and much more

Eleventy was created to be a JavaScript alternative to Jekyll. It’s zero-config by default but has flexible configuration options. Eleventy works with your project’s existing directory structure.

Eleventy uses independent template engines. We don’t want to hold your content hostage. If you decide to use something else later, having your content decoupled in this way will make migration easier.

11ty

Getting Started with Eleventy

GraphQL is a fan favorite for good reason. It lets a client make specific, complex, and/or aggregate queries for data, and it’s user-friendly to boot.

If you’ve been meaning to learn GraphQL and start harnessing its powers, this is a great place to start.

This course is for GraphQL newbies with a basic understanding of React. It focuses on the client-side implementation of GraphQL usage using the Apollo client.

We’ll start with a guide on how to add the Apollo client to an existing project, then move on using the Query and Mutation components to fetch and manipulate data using a GraphQL API.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

GraphQL Data in React with Apollo Client

Start from a blank project and build up to an Eleventy site that includes a blog collection and is prepared to source content from a headless CMS. You'll also learn how to add Sass as the styling solution, complete with triggering 11ty to re-compile when the Sass changes.

These lessons will help explain key 11ty features and concepts to help you make the most of this amazing static site generator.

By the last lesson, you'll have learned how to:
- define custom `input` and `output` directories
- create a layout that accesses front matter variables
- watch for Sass changes and include CSS in the build proces
- create an 11ty collection using `tags`
- define front matter for an entire collection
- make and apply a filter to a collection
- generate pages from an external data source, such as a CMS or API

Build An Eleventy (11ty) Site From Scratch

Learn how to make flexible customized Twitch Scenes using the static site generator Eleventy (11ty), CSS, and ComfyJS.

Throughout this course, you'll create scenes for preshow, host, and main desktop display streaming purposes. Using ComfyJS, we'll add embedded chat and be able to create responses to chat commands. Finally, we'll see how to actually setup the scenes in OBS to prepare to use them for your stream.

Bonus: you'll learn a bit more about CSS grid layout, and also the "cicada principle" to be able to show the commands randomly across the scene!

Develop Custom Twitch Scenes and Setup in OBS

In this lesson I refactor a simple application built with Apollo, GraphQL, and React to utilize Apollo Boost. Apollo Boost combines many of the Apollo libraries we had to import and configure separately into one awesome API. 

Resources:

[What's in Apollo Boost](https://github.com/apollographql/apollo-client/tree/master/packages/apollo-boost#whats-in-apollo-boost)

[Zero config GraphQL State Management](https://dev-blog.apollodata.com/zero-config-graphql-state-management-27b1f1b3c2c3)


Zero-config Apollo + GraphQL with Apollo Boost

In this lesson we look at how the Apollo @client directive can be used to fetch client-side state along with server data with one query. I also show how to update the client-side state using a mutation connected to a button.

Additional Resources [Apollo Client 2.0](https://dev-blog.apollodata.com/apollo-client-2-0-beyond-graphql-apis-888807b53afe)


Fetch Server Data and Client-side State in One Query using React Apollo + GraphQL

In this lesson I refactor a React component that utilizes a higher-order component for mutations to the new Mutation render prop component baked into react-apollo 2.1.

Additional Resources:
https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926

Update Application State with React Apollo Mutation Component

In this lesson I refactor some code that utilizes the Mutation component to update client-side cache to use the new ApolloConsumer component baked into react-apollo 2.1.

Additional Resources: 
https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926

Update Application State with React Apollo ApolloConsumer Component

In this lesson we’ll execute GraphQL queries using our AWS AppSync API and show how to display the returned data inside of our React application using the AWS AppSync GraphQL client.

We'll create a query string using `gql` (`graphql-tag`) and pass that query into a `graphql` Higher-order component where we will pass the resulting data in our exisiting app.


Execute Queries to an AWS AppSync GraphQL API from a React Application

In this lesson, we’ll execute GraphQL mutations using our AWS AppSync API and show how to add data to the database from a React web application using the AWS AppSync GraphQL client.

We'll create a `mutation` query string that will call `createTodo` that is defined in our WAS AppSync GraphQL client. This query will be passed in as props from a Higher-order component and we'll wire up input in React to feed values into this query.

Execute Mutations to an AWS AppSync GraphQL API from a React Application

Apollo provides a universal GraphQL API on top of your existing services, so you can build new application features fast without waiting on backend changes.

apollo

In this lesson, we’ll show how you can have your mutations work when the user is offline. We’ll handle the offline mutation with an optimistic response, then when the user comes back online the data will be sent to the dashboard for a seamless user experience.



Implement an Optimistic Response to a React UI & Showcasing Offline Functionality

In this lesson we’ll show how to use GraphQL subscriptions coming from our AWS AppSync API to listen to real time data changes in a React application and render the new data as it comes in.

Subscribe to New Data in a React Application with AWS AppSync GraphQL Subscriptions

Building a real world, scalable & production-ready GraphQL API is hard. In this course, we’ll learn how to create a production-ready GraphQL API that can handle everything from queries to mutations & subscriptions. We’ll also connect to our API from a React application and execute queries, mutations & subscriptions using the new API.



Course Overview: Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

You already know that Apollo Client can manage your remote data and state from a GraphQL server, but did you know that you can also use it to manage local state in your React apps? You can! 

`apollo-link-state` lets you query and mutate local state the same as you would a GraphQL server. This means that you don't need to add _another_ dependency like Redux or MobX to your app. 

Managing your remote and local state using the same interface results in a codebase that's easier to maintain and reason about.

Manage local state in React using GraphQL and Apollo Client.

This will get you started on how to setup the Javascript API client of Algolia search solution. To follow along the video having a free Algolia account already setup will make things easier (but is not required). Once the client is setup we will test it by pushing a couple of records to an index.  

Set up the Algolia JavaScript Client

We’ll load a simple JSON file containing 500 actors records from disk and push it to our Algolia index using the Javascript API client.

Push JSON Data to an Algolia Index from the JavaScript Client

We’ll learn how to push a small amount of data from a local MySQL database to an Algolia index. The first step is to connect to the DB using the `mysql` package, then select all records from the DB and finally push them to Algolia using the JS API client.

Push MySQL Data to an Algolia Index from the JS Client

The Apollo Client gives you a simple way to query data from an external API in any application. With `apollo-link-state`, you can take those same concepts you've already learned and interact with local state.

In this lesson, you will learn how to query and update state in your `ApolloClient` with React using the `ApolloProvider` and `Query` components. First, we'll set up the application to read from state, then write a function that will increment that state.

Read and Update Local State with Apollo Link State in React

Using the Lodash library, we’ll see how to split large amounts of data from a local MySQL database into smaller chunks and push them to an Algolia index.  

Push Chunks of Large MySQL Data to an Algolia Index with Lodash

In this lesson, you will learn how to update the Apollo Link State cache using a mutation.

Topics

Instructors

Content Type

Free or Pro