March 2017 Summaries

Apollo Client 1.0 is a fully featured, stable, and production-ready JavaScript GraphQL client that leverages the power of a GraphQL API to handle data fetching and management for developers, allowing them to focus on building their application. The Apollo community has made significant progress since the project's start, with over 3,000 commits, 2,000 stars on GitHub, and 100,000 monthly downloads on npm. The client works seamlessly with various frameworks like React, Angular, Ember, Vue, Meteor, Next.js, and more, providing a wide range of features such as optimistic UI, SSR, pagination, loading state, GraphQL subscriptions, and full control over the GraphQL store. With its extensive documentation and Apollo Developer Tools, developers can easily get started and build their applications. The team is excited to continue improving Apollo Client with new features like cache invalidation, persistent offline caching, file upload handling, and streaming network interface, and invites the community to join them in contributing to the project.

Designing a good GraphQL API balances utility and convenience with consideration for how the API may evolve in the future. When designing GraphQL mutations, it's essential to consider naming conventions, specificity, input objects, unique payload types, nesting, and more. A well-named mutation should represent a semantic action that can be taken by the user. Mutations should have one input argument, which is an object type with a non-null unique input type. Nesting is beneficial for both inputs and outputs to allow room for future design changes without cluttering existing schema types. Always create custom object types for each mutation and add output fields as needed, resisting the temptation to return only one type directly. By following these principles, you can design an effective GraphQL mutation system that balances utility with flexibility and maintainability.

Apollo is a GraphQL client that focuses on data fetching efficiency, while Next.js is a minimalistic framework for server-rendered React applications. Universal rendering combines the benefits of both by processing initial requests on the server and subsequent requests on the client. Apollo can be used independently to fetch data, but using it with Next provides significant performance and productivity gains. Next's file system API makes it easy to set up universal rendering, and its features such as automatic code splitting and hot code reloading further enhance development velocity. When combined, Apollo and Next enable developers to build applications that optimize for user experience and performance without sacrificing any aspect of the development process.

The tutorial covers how to use a simple mutation to modify data on the server and keep the state synchronized on the client in a GraphQL + React application. It starts by connecting the frontend to the server, defining the GraphQL mutation on the server, calling the mutation from a React component, and updating the client state after a mutation. The tutorial concludes with a discussion of how to make mutations more efficient and apparently faster, including using optimistic UI and store updates.

The author of the text is Sashko Stubailo, who has been working with the community on the Apollo project for a year. The Apollo project has already seen dozens of blog posts, meetup talks, announcements, events, and more. To keep up with what's happening in GraphQL and Apollo, one can follow the official blog on Medium, which publishes high-quality content about GraphQL and open-source announcements. They can also follow @apollographql on Twitter for timely news and links to cool content. Additionally, they can watch the GitHub repositories of the project to stay updated on bug reports, discussions, and debates. Sashko invites the community to join the Apollo Slack channel to get involved in discussions about best practices, implementations, and more. They also recommend using Stack Overflow to ask and answer questions about Apollo and GraphQL, and subscribing to their YouTube channel for talk videos from meetups and conferences. Furthermore, they mention that if one is interested in attending or speaking at a meetup, there are opportunities available in the San Francisco Bay Area.

This tutorial is part of a full-stack tutorial series that teaches building an instant messaging app with React and GraphQL. The second part focuses on setting up a Node GraphQL server using Express and the `graphql-server-express` library. It covers topics such as writing a GraphQL schema, wiring up the schema to the server, setting up GraphiQL, connecting the GraphQL schema to real data, and writing resolver functions. The tutorial aims to provide a comprehensive understanding of building a GraphQL server from scratch.

The Apollo Client now provides a new imperative store API, allowing developers to control the data in their cache. This API includes four methods: `readQuery()`, `readFragment()`, `writeQuery()`, and `writeFragment()`. These methods enable developers to read and write directly to the cache, providing complete control over the data. The new API also includes an `update` method that allows for imperative updates of the cache after a mutation, making it easier to manage optimistic mutation updates in a transparent way. This new API is designed to provide a GraphQL-shaped client-side database, allowing developers to use Apollo Client as a flexible and powerful tool for managing their data.

The new version of Optics, a product development tool, introduces an interactive data-rich visualization that allows users to view performance trends over time. This feature is the #1 requested feature from users and provides four key charts for understanding GraphQL performance: a heat map showing performance trends over time, a step chart showing endpoint traffic over time, a performance distribution showing aggregate trends in a time range, and sample traces showing specific executions of GraphQL operations. The visualization helps developers identify performance issues and understand the impact of server-side operations on request volumes. It also highlights the importance of daily analytics collection times and their potential to cause performance degradation. The new feature is part of Apollo Engine, which offers error tracking, query caching, and more, and is free for 1 million requests a month.

Apollo Client 1.0 is a significant release that builds upon the best features from the previous series, including seamless integration with various frameworks and support for GraphQL subscriptions. The new version includes several improvements, such as fine-grained cache reads and writes, simplified client API, and better defaults for query deduplication and network status changes. To ensure its success, the team is relying on the community's help, encouraging users to try it out, report bugs, write blog posts about their experiences, find edge-cases that break the software, and spread the word. The release marks the start of a new testing period before the official launch, during which the team will thoroughly test Apollo Client, collect feedback, and fix major bugs. After reaching 1.0, the development process will continue with new features and improvements.

Sashko Stubailo explains the anatomy of a GraphQL query, starting with basic concepts such as fields, arguments, operation types, operation names, variable definitions, and variables. He also introduces fragments, which bring additional power to GraphQL by allowing for reusable pieces of queries. Directives are another key concept that enable getting extra functionality out of GraphQL servers. The author emphasizes the importance of understanding these technical terms to participate in deep conversations about GraphQL and its applications. By covering these core concepts, developers can effectively use GraphQL to fetch data from APIs.

The author discusses the optimization of GraphQL request waterfalls and how to make efficient use of this technology. The main goal is to minimize the number of asynchronous calls made to the backend, which can significantly improve performance. The author uses a fictional example of an events app to demonstrate their approach, starting with a naive implementation that makes many concurrent requests and gradually improving it through batching up nodes and edges, and finally looking ahead to optimize the request chain by requesting data early based on the query AST. The author highlights the importance of understanding the GraphQL execution model and how to visualize critical chains of requests to identify performance wins.

The tutorial is about building a full-stack React application with GraphQL and Apollo Client. It provides a step-by-step guide for setting up a simple client, writing the first component, wiring the component together with the GraphQL query, and creating a mock network interface for testing purposes. The author emphasizes that this is just the beginning of a series of tutorials that will cover building a real messaging app using GraphQL throughout.

The Apollo Angular team has released version 0.11.0 with several improvements and new features. The package was renamed to "apollo-angular" due to the deprecation of the term "Angular 2". This update includes support for Apollo Client 0.8+, Ahead-of-Time (AoT) compilation, multiple instances of Apollo Client in a single app, TypeScript improvements, and more control over the code through generic types. The team has also introduced a new tool called "apollo-codegen" to generate API code or type annotations based on a GraphQL schema and query documents. Additionally, the Apollo Client Developer Tools are now integrated with Angular, providing features such as a built-in GraphiQL console, query watcher, and cache inspector. The update includes improvements for performance, size reduction through Tree Shaking, and better compatibility with upcoming Angular releases.