Delbert  Ferry

Delbert Ferry

1623292675

Apollo Optics and your GraphQL Server

As we move into a GraphQL-first world, it’s important to be able to understand not only what data you’re fetching, but also how it’s being fetched. Many people think of this as an after-thought, hoping that simply getting as much code as possible out as fast as possible will help them win over their competition.

However, this approach can be costly on many levels. First, your application’s end users will notice the clunkiness of your application. In addition, on your servers, fetching data the wrong way can create inefficiencies that cost you in CPU usage, memory leaks, and slow response times (not to mention your AWS bill skyrocketing through the roof). Not the type of growth you’re looking for, probably.

#graphql #graphql server #apollo optics

What is GEEK

Buddha Community

Apollo Optics and your GraphQL Server
Delbert  Ferry

Delbert Ferry

1623292675

Apollo Optics and your GraphQL Server

As we move into a GraphQL-first world, it’s important to be able to understand not only what data you’re fetching, but also how it’s being fetched. Many people think of this as an after-thought, hoping that simply getting as much code as possible out as fast as possible will help them win over their competition.

However, this approach can be costly on many levels. First, your application’s end users will notice the clunkiness of your application. In addition, on your servers, fetching data the wrong way can create inefficiencies that cost you in CPU usage, memory leaks, and slow response times (not to mention your AWS bill skyrocketing through the roof). Not the type of growth you’re looking for, probably.

#graphql #graphql server #apollo optics

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

Full-Stack GraphQL With Apollo & NextJS — Part 3: Server-Side

This is the third and final part of my series which explores implementing GraphQL using Apollo and NextJS.

Part 1 dealt with the app setup, and Part 2 dealt with the Client-Side in depth. I would highly recommend reading them first before getting into this article, unless you are already comfortable with Client-Side GraphQL using Apollo.

If you are completely new to GraphQL, please read my beginners tutorial here.

This article discusses the Server-Side implementation of Apollo. Let’s being!

A quick refresher/reminder: We leverage NextJS’ internal API Routes system to accept a GraphQL query, and by using apollo-server-micro (not apollo-server!), we are able to return GraphQL compliant results.

This is the Server-Side code for the app, and you can find it in the full project here.

import { ApolloServer, gql } from "apollo-server-micro";

	let book = {
	  name: "The Hungarian Sausage",
	  author: "Ben Grunfeld",
	};

	const typeDefs = gql`
	  type Book {
	    name: String
	    author: String
	  }

	  type Query {
	    book: Book
	  }

	  type Mutation {
	    updateBook(name: String!, author: String!): Book
	  }
	`;

	const resolvers = {
	  Query: {
	    book: () => book,
	  },

	  Mutation: {
	    updateBook: (root, args) => {
	      book.name = args.name;
	      book.author = args.author;
	      return book;
	    },
	  },
	};

	const server = new ApolloServer({ typeDefs, resolvers });

	const handler = server.createHandler({ path: "/api/graphql-data" });

	export const config = {
	  api: {
	    bodyParser: false,
	  },
	};

	export default handler;

#graphql #apollo-server #apollo #nextjs

Delbert  Ferry

Delbert Ferry

1622279628

React + GraphQL Tutorial — The Server

Setting up
We’re going to use Express in this tutorial, because that’s what most people are currently using, but you should be able to follow along even if you’re using hapi or Koa, because the GraphQL part of this tutorial is largely identical.

For starters, let’s clone the tutorial GitHub repo, which has a few resources we’ll need later. If you’ve already done that in Part 1, you can skip this step.

#graphql #react #server #graphql server

Maurice  Larson

Maurice Larson

1592741435

Server-Side GraphQL with Apollo & NextJS 

Part of the struggle is setting up an environment to test your new skills in. Sure, you can play around with some Client-Side GraphQL syntax in Github’s GraphQL Explorer, but that is one tiny piece of a much bigger puzzle.
How do you actually request data from the Client? (Queries)
How do you update state in the Client when that data changes?
How do you detect in other components when that state has changed?
How do you go about making changes to the data on the Server? (Mutations)

#graphql-apollo-server #javascript #graphql #nextjs