LogoLogo
HomeDiscourseBlogDiscord
  • Introduction
  • Introduction
    • Quick start
    • Aurelia for new developers
    • Hello world
      • Creating your first app
      • Your first component - part 1: the view model
      • Your first component - part 2: the view
      • Running our app
      • Next steps
  • Templates
    • Template Syntax
      • Attribute binding
      • Event binding
      • Text interpolation
      • Template promises
      • Template references
      • Template variables
      • Globals
    • Custom attributes
    • Value converters (pipes)
    • Binding behaviors
    • Form Inputs
    • CSS classes and styling
    • Conditional Rendering
    • List Rendering
    • Lambda Expressions
    • Local templates (inline templates)
    • SVG
  • Components
    • Component basics
    • Component lifecycles
    • Bindable properties
    • Styling components
    • Slotted content
    • Scope and context
    • CustomElement API
    • Template compilation
      • processContent
      • Extending templating syntax
      • Modifying template parsing with AttributePattern
      • Extending binding language
      • Using the template compiler
      • Attribute mapping
  • Getting to know Aurelia
    • Routing
      • @aurelia/router
        • Getting Started
        • Creating Routes
        • Routing Lifecycle
        • Viewports
        • Navigating
        • Route hooks
        • Router animation
        • Route Events
        • Router Tutorial
        • Router Recipes
      • @aurelia/router-lite
        • Getting started
        • Router configuration
        • Configuring routes
        • Viewports
        • Navigating
        • Lifecycle hooks
        • Router hooks
        • Router events
        • Navigation model
        • Transition plan
    • App configuration and startup
    • Enhance
    • Template controllers
    • Understanding synchronous binding
    • Dynamic composition
    • Portalling elements
    • Observation
      • Observing property changes with @observable
      • Effect observation
      • HTML observation
      • Using observerLocator
    • Watching data
    • Dependency injection (DI)
    • App Tasks
    • Task Queue
    • Event Aggregator
  • Developer Guides
    • Animation
    • Testing
      • Overview
      • Testing attributes
      • Testing components
      • Testing value converters
      • Working with the fluent API
      • Stubs, mocks & spies
    • Logging
    • Building plugins
    • Web Components
    • UI virtualization
    • Errors
      • 0001 to 0023
      • 0088 to 0723
      • 0901 to 0908
    • Bundlers
    • Recipes
      • Apollo GraphQL integration
      • Auth0 integration
      • Containerizing Aurelia apps with Docker
      • Cordova/Phonegap integration
      • CSS-in-JS with Emotion
      • DOM style injection
      • Firebase integration
      • Markdown integration
      • Multi root
      • Progress Web Apps (PWA's)
      • Securing an app
      • SignalR integration
      • Strongly-typed templates
      • TailwindCSS integration
      • WebSockets Integration
      • Web Workers Integration
    • Playground
      • Binding & Templating
      • Custom Attributes
        • Binding to Element Size
      • Integration
        • Microsoft FAST
        • Ionic
    • Migrating to Aurelia 2
      • For plugin authors
      • Side-by-side comparison
    • Cheat Sheet
  • Aurelia Packages
    • Validation
      • Validation Tutorial
      • Plugin Configuration
      • Defining & Customizing Rules
      • Architecture
      • Tagging Rules
      • Model Based Validation
      • Validation Controller
      • Validate Binding Behavior
      • Displaying Errors
      • I18n Internationalization
      • Migration Guide & Breaking Changes
    • i18n Internationalization
    • Fetch Client
      • Overview
      • Setup and Configuration
      • Response types
      • Working with forms
      • Intercepting responses & requests
      • Advanced
    • Event Aggregator
    • State
    • Store
      • Configuration and Setup
      • Middleware
    • Dialog
  • Tutorials
    • Building a ChatGPT inspired app
    • Building a realtime cryptocurrency price tracker
    • Building a todo application
    • Building a weather application
    • Building a widget-based dashboard
    • React inside Aurelia
    • Svelte inside Aurelia
    • Synthetic view
    • Vue inside Aurelia
  • Community Contribution
    • Joining the community
    • Code of conduct
    • Contributor guide
    • Building and testing aurelia
    • Writing documentation
    • Translating documentation
Powered by GitBook
On this page
  • Prerequisites
  • Installation
  • Setting Up Apollo Client
  • Using Apollo Client in Components
  • Conclusion
  • Additional Tips

Was this helpful?

Export as PDF
  1. Developer Guides
  2. Recipes

Apollo GraphQL integration

GraphQL is a powerful data query language allowing you to request the data you need from your APIs. Integrating GraphQL with Aurelia 2 can be streamlined using Apollo Client, a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. In this recipe, we will set up Apollo Client within an Aurelia 2 application and demonstrate how to fetch data using GraphQL queries.

Prerequisites

Before integrating Apollo Client, ensure you have the following installed:

  • Node.js and npm

  • An Aurelia 2 project setup

  • A GraphQL backend service to connect to

Installation

First, install @apollo/client and graphql:

npm install @apollo/client graphql

Setting Up Apollo Client

Create a service to initialize Apollo Client. We will use Aurelia's dependency injection (DI) to make the client available throughout our application.

  1. Create a new file named graphql-client.ts in your src directory.

  2. Define the IGraphQLClient interface using DI.createInterface. This will allow us to inject the Apollo Client instance wherever we need it.

  3. Initialize the Apollo Client with your GraphQL server's URI.

// src/graphql-client.ts
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core';
import { DI } from 'aurelia';

export const IGraphQLClient = DI.createInterface<IGraphQLClient>('IGraphQLClient', x => x.singleton(GraphQLClient));

export class GraphQLClient {
  private client: ApolloClient<any>;

  constructor() {
    this.client = new ApolloClient({
      link: new HttpLink({ uri: 'YOUR_GRAPHQL_API_URI' }), // Replace with your GraphQL API URI
      cache: new InMemoryCache(),
    });
  }

  get clientInstance() {
    return this.client;
  }
}

Using Apollo Client in Components

With the Apollo Client service set up, you can inject it into any Aurelia component and use it to perform GraphQL queries, mutations, or subscriptions.

  1. In your component, import the IGraphQLClient interface and use Aurelia's resolve method to inject the Apollo Client instance.

  2. Use the clientInstance to send a query to your GraphQL server.

Here's an example component that fetches a list of items from a GraphQL API:

// src/my-component.ts
import { customElement, ICustomElementViewModel, resolve } from 'aurelia';
import { gql } from '@apollo/client/core';
import { IGraphQLClient } from './graphql-client';

@customElement({ name: 'my-component', template: `<template><ul><li repeat.for="item of items">${item.name}</li></ul></template>` })
export class MyComponent implements ICustomElementViewModel {
  public items: any[] = [];

  private readonly graphQLClient: IGraphQLClient = resolve(IGraphQLClient);

  public async binding(): Promise<void> {
    const { data } = await this.graphQLClient.clientInstance.query({
      query: gql`
        query GetItems {
          items {
            id
            name
          }
        }
      `,
    });

    if (data) {
      this.items = data.items;
    }
  }
}

Conclusion

Following the steps outlined above, you successfully integrated Apollo Client into your Aurelia 2 application using the framework's dependency injection system. You can now easily perform GraphQL queries, mutations, and subscriptions throughout your application.

Remember to replace 'YOUR_GRAPHQL_API_URI' with the actual URI of your GraphQL server. You can expand on this basic setup by adding error handling, loading states, and utilizing Apollo Client's advanced features like cache management and optimistic UI updates.

Additional Tips

  • For complex applications, consider creating a separate module or feature to encapsulate all GraphQL-related logic.

  • Explore Apollo Client's reactive variables and local state management capabilities for a more comprehensive solution.

  • Use fragments in your GraphQL queries to reduce duplication and enhance maintainability.

  • Ensure you handle loading and error states in your components for a better user experience.

PreviousRecipesNextAuth0 integration

Last updated 1 year ago

Was this helpful?