Everything I Discovered About GraphQL and Apollo

In the older ages of front end development, fetching data from Web APIs was a very boring process. Indeed, the data model was frozen, meaning that you faced one of these situations:

  • The data model was too rich for your use case.
  • Some pieces of data were missing.
  • You needed to chain requests to get the expected data structure.

To overcome these situations (and ease front-end developer tasks), GraphQL was created. It provides a new way to fetch data from the back end. Instead of dealing with frozen data structures, GraphQL offers a query language which allows us to get only what we need.

Image for post

Photo by Federico Beccari on Unsplash

In this article, I won’t explain how GraphQL works or how to set it up — Medium hosts many meaningful articles on GraphQL and Apollo, its client for web and mobile applications, and you can find documentation here:

GraphQL: A query language for APIs.

Learn Code Community Spec Code of Conduct Foundation Landscape Learn Code Community Spec Code of Conduct Foundation…

graphql.org

And here:

Documentation Home

Welcome! 👋 Apollo is a platform for building a data graph, a communication layer that seamlessly connects your…

www.apollographql.com


In this article, I will share some tips I discovered when using GraphQL and Apollo to ease development and make the Apollo-related code reusable.

Disclaimer:_ most of the code snippets concerns Vue.js and Vue Apollo. Anyway, as I introduce concepts and hints, I would guess that they can be applied to any other JavaScript Framework supported by GraphQL and Apollo._


First Things First…

GraphQL

As I said earlier, GraphQL is a new technology which modifies the relationships between back-end and front-end developers.

Previously, both teams had to define a contract interface to ensure correct implementations. Sometimes, latencies could occur due to misunderstanding on object complexity or typings.

Thanks to GraphQL, backends can provide all the data that front ends could need. Then, it’s up to them to “pick” the properties they require to build the interface.

Moreover, GraphQL offers a web interface (named GraphiQL) to test queries and mutations (if you don’t understand what I’m writing about, please refer to documentation). It’s a clever tool to enable front ends to write requests, and browse the docs and typings.

graphql/graphiql

Looking for the GraphiQL Docs? : This is the root of the monorepo! The full GraphiQL docs are located at…

github.com

A query language

Using GraphQL implies understanding and mastering the query language included in the kit. It’s not a trivial one and is based on an _object nesting _syntax.

query GetProductInfo {
  product {
    id
    name
    price
  }
}

When querying object seems simple, it’s not the case for the mutations. A mutation updates/inserts new data, potentially with some arguments.

mutation ($label: String!) {
  addTag(label: $label) {
    id
    label
  }
}

Here, an argument is specified with its type on L1. Then, it’s used on the second line. The ending content between square brackets id and label defines the structure of the returned object, the result of the insertion.

Apollo

Apollo is the client used to communicate with GraphQL. Whether you develop a web or mobile app, Apollo can support it.

Image for post

https://www.apollographql.com/docs/intro/platform/

Apollo supports several platforms:

Its configuration allows to define specific aspects such as: cache-network strategypipelines (covered here), Server-Side Rendering (Vue.js version), local state (Vue.js version), performanceerror handling (covered here) or internationalization (covered here).

#javascript #graphql #nodejs #react #programming

What is GEEK

Buddha Community

Everything I Discovered About GraphQL and Apollo
Eleo Nona

Eleo Nona

1600219097

How to Build Apollo GraphQL Server From Scratch

What is GraphQL

GraphQL is a query language and a server-side runtime that is used to request data from the server. The first thing that comes to mind when hearing the term “query language” is SQL. Just as SQL is used for querying databases, GraphQL is a bit like SQL but for querying web APIs as it eliminates the need to repeatedly develop or change existing end-points. GraphQL also enables the client/front-end to retrieve exactly the data they have requested and no more. This means that, within a single request of GraphQL, you can traverse from the entry point to the related data (whereas in RESTful API you have to call multiple endpoints to fetch similar results).

The following example will help you to understand this better. Let us consider an object person which has the attributes name, age, email, and contactNumber. Suppose the front-end only needs the name and age of the person. If we design a REST API, the endpoint will look like api/persons, which will end up fetching all the fields for the person object. The issue arises here because there is no easy way to communicate that I am interested in some fields and not others (which causes REST API to over fetch the data).

#graphql #nodejs #apollo-server #graphql-apollo-server

Tyrique  Littel

Tyrique Littel

1603573200

Discover GraphQL by Building a Headless Blog with Apollo and Slash GraphQL

In this article, I’m going to explore graph databases/GraphQL by building a proof of concept blog powered by the recently launched Slash GraphQL - a hosted GraphQL backend.

Graphs are a fascinating way to model the information in a system where the relationships (edges) between pieces of data (nodes) are first-class entities of the system. This is a different approach to the more common relational database (RDBMS) model, where the relationships between records are implied. For example, “this user owns this post because user.id == post.user_id”.

Graphs are most useful when the relationships among the data are as important as the data itself. For instance:

  • Knowledge graphs
  • Recommendation engines
  • Supply chain management
  • Social media

In general, graphs offer more descriptive queries, greater flexibility in adapting your model, and better performance when traversing relationships. _GraphQL _(which we will be working with in this article) is a data manipulation and query language that gives you the power of graph through an API.

Working with graphs can feel a little unfamiliar if you’re used to working with RDBMSs, so in this article, I’ll try to show you some of the basics. I’m going to build a GraphQL-powered blog. The relationships between Users, Posts, and Comments (user has many posts, post has many comments, user has many comments) highlight the power of GraphQL, as you’ll see below. As usual, I’m not trying to produce finished, production-ready code here—just simple examples to show you the underlying concepts.

You can find all the example code for this article here.

Dgraph

For this article, I’m going to use Dgraph, a native GraphQL database (as opposed to a GraphQL layer on top of a relational datastore) written in Go, and designed for large-scale application with high-availability and transaction support. If you’re interested in learning more about the project, there are some good introductory videos on their YouTube Channel. Using a native GraphQL database over a GraphQL layer is usually preferred, as it offers easier data modeling, deep join speed, and solves the n+1 problem.

Rather than installing Dgraph on a server, or running it locally via docker, I’m going to use their hosted GraphQL backend service Slash GraphQL. The free tier (at the time of writing) allows 10,000 operations per month, which is plenty for our purposes.

Let’s get started.

Creating a GraphQL Backend on Slash GraphQL

In order to use Slash GraphQL, you need to log in using your GitHub or Google account, and you’ll then see the web interface with options to create and manage your backends, as well as many links to tutorials and other documentation, which I recommend exploring.

Dgraph recently released slash-graphql, a hosted GraphQL backend. With a hosted backend, you don’t need to manage your own infrastructure, create and manage your own database, or create API endpoints. That’s all taken care of for you, so it’s a great choice for our project. Because I strongly prefer working on the command-line, I’m going to use that for this article. But you can do everything via the web interface, if you prefer.

Slash Graph dashboard

You can install the command-line tool by running:

npm install --global slash-graphql

Create a Backend

Using slash-graphql to manage Slash GraphQL backends feels a lot like using the Heroku command-line tool to manage Heroku applications, so if you’re comfortable with that, you should find this quite familiar.

To create a Slash GraphQL backend via the command-line, we first have to log in:

slash-graphql login

This will prompt you to confirm that a code on your terminal matches a code shown on the web page that the command will open. Once you have done this, you can issue commands to Slash GraphQL.

Now we can create our GraphQL backend like this:

slash-graphql create-backend blog

This will output the “endpoint” of your backend, which usually takes around 20 seconds to create. This is the URL we will use to interact with our GraphQL database. You’ll be using this throughout this article, so please make a note of it.

#graph database #graphql #vue #database architecture #web programming #database application development #apollo #graph query languages #dgraph

Delbert  Ferry

Delbert Ferry

1622276694

Apollo interns on GraphQL Radio

Shadaj Laddad
Shadaj is a senior at Lynbrook High School, and has been programming for a long time. He’s been historically interested in Scala, but was working mostly in JavaScript during his internship. Here’s what he worked on:

  • Subscriptions tutorial: Shadaj continued the Full-stack GraphQL tutorial with two steps about subscriptions: [Server-side] and [client-side].
  • Apollo Cache API: He refactored Apollo Client internals to separate out the internal GraphQL cache implementation behind a clean API. In Apollo Client 2.0, the cache will be completely pluggable, so that people can integrate caches based on different technologies like MobX, and build new features like offline support.

#graphql #graphql radio #apollo

Delbert  Ferry

Delbert Ferry

1622282384

How We Built GraphQL Subscriptions with Apollo

A real-world example
At Scaphold, we manage a lot of infrastructure to make sure our customers’ APIs stay available and performant. One of our core features is a graphical schema designer that allows you to easily define the GraphQL schema that will come to define your Scaphold API. What you don’t see when playing around with our schema designer, however, is a complex migration system that makes sure your API’s database is always up to date and in adherence with your schema. When you make a migration to your schema, the machine that fields the migration request will make the necessary changes to your database so that your API stays in sync.

#graphql #graphql subscriptions #apollo

Delbert  Ferry

Delbert Ferry

1622102394

What is a GraphQL query? GraphQL query examples using Apollo Explorer

How to execute GraphQL queries

We know what queries look like and we know what to expect in response when we write them. The next question is: how do we execute them?

It’s important to know that since GraphQL queries are just plain strings, we can use a variety of approaches to fetch data. Among the many options, some that come to mind are:

  • curl
  • fetch
  • GraphQL client libraries (like Apollo Client)

#graphql #graphql query #apollo explorer