Apollo helps international manufacturers and brands scale on Western eCommerce platforms and marketplaces

Apollo

apollo

Q4 Results 13 May 2024 Live Updates: Investors will be watching the performance of players like ONGC, Indian Railway Finance Corporation, Bharat Electronics, Oil India, Steel Authority of India, Whirlpool of India, India Cements, <strong>Apollo</strong> Pipes, Honda India Power Products Limited, Tracxn ...

Q4 Results 2024 LIVE Updates: ONGC, Oil India, Steel Authority of India, Whirlpool of India, Apollo Pipes, more to announce earnings today - Industry News | The Financial Express

GraphQL is the alternative for REST made by Facebook. When facebook reached the limits of REST API, they had to make something breaking these limits. Through this article, you can learn what GraphQL is, how it works, and how to use it in your projects. GraphQL (Graph Query Language) is an API-level query language. Like SQL is used for requests to relational databases, GraphQL allows clients to request data from an API. For a good understanding of this article, you should have a basic understanding of TypeScript and NodeJS. Why is GraphQL so good? Receive only data you need. GraphQL allows you to manage what data API will return to you. This has a number of advantages. It helps network performance when the response contains a lot of data you don't need. Of course, REST can handle it via request parameters like , however much easier when it is available by default, does it? It is also useful if your API supports different types of clients which want to call less and fetch more. ?fields=name,birthdate Access to a complex graph of objects aggregated from different sources. GraphQL allows you to get a complex graph of objects by a single request. These objects might be from different sources. Clients and server API schemes are always in sync. Your clients and server have the same scheme, so it is easy to sync it. GraphQL anatomy To understand how GraphQL realizes all you’ve read above, let’s talk about what artifacts GraphQL includes. GraphQL includes schema, which describes the types of objects you can operate on. Take a look at the following schema: type App {
   id: ID!
   name: String!
} This is the type App, which includes id and name required fields. It means you can operate this object. But how to operate it? There are a few access operators in GraphQL. The first one (required one) - . This is a getter for your object. The second one - , is a setter. And the last one is a , which allows you to subscribe for updates of your type. query mutation subscription type Query {
   apps: [App!]!
   app(id: ID!): App!
}
 
type Mutation {
   createApp(app: AppInput!): App!
   updateApp(appId: ID!, app: AppInput!): App!
}
 
input AppInput {
   name: String!
   publisherId: ID!
}
 
type Subscription {
   appMutated: AppMutationPayload!
}
 
type AppMutationPayload {
   mutation: MutationType!
   node: App!
}
 
enum MutationType {
   CREATED
   UPDATED
   DELETED
} The code snippet above contains . Inputs allow you to define input parameters types. input AppInput Another important component of GraphQL - resolvers. Resolvers define how to handle queries, mutations, and subscribers. We will come back to it soon. Apollo Apollo Server is a Node.js implementation of graphQL server. There is good scalable architecture and a strong community that means it is a good choice for use. We won’t talk much about Apollo architecture, we’ll learn everything needed by code examples. Install dependencies "dependencies": {
   "apollo-datasource": "^0.8.0",
   "apollo-server": "^2.22.1",
   "graphql": "^15.5.0"
 },
 "devDependencies": {
   "@types/graphql": "^14.5.0",
   "@types/node": "^14.14.37",
   "ts-node": "^9.1.1",
   "typescript": "^4.2.3"
 } - allows implementing GraphQL server - allows implementing data sources (like database aggregators or rest api integrations) - graphQL package. Required by Apollo. apollo-server apollo-datasource graphql Server Initialization import {ApolloServer, gql} from 'apollo-server'
import {typeDefs} from './graphql/typedefs'
import {resolvers} from './graphql/resolvers'
import {dataSources} from './datasources'
 
const server = new ApolloServer({
 typeDefs: gql`
   ${typeDefs}
 `,
 resolvers,
 dataSources
})
 
server.listen().then(({url}) => {
 console.log(`Server ready at ${url}`)
}) Let’s understand the code above. We are initializing Apollo Server with several arguments. - this is a path for graphQL schema - as a said earlier, we will come back for that a bit later - data sources like DB aggregators and API integrations typeDefs resolvers dataSources DataSources import { AppService } from './app-service';
 
export const dataSources = () => ({
   appService: new AppService()
}); This is DI of dataSources. This format is required by Apollo. import { DataSource } from 'apollo-datasource';
 
export class AppService extends DataSource {
   constructor() {
       super();
   }
} dataSource might look like this. This is an aggregator, where you can implement business logic and accessors for data. Resolvers Finally, let’s talk about resolvers. As I said earlier, resolvers define how to handle queries, mutations, and subscribers. Take a  look at that: type Mutation {
   createApp(app: AppInput!): App!
   updateApp(appId: ID!, app: AppInput!): App!
}
 
type Subscription {
   appMutated: AppMutationPayload!
}
 
type AppMutationPayload {
   mutation: MutationType!
   node: App!
} And now take a look at the resolver: import { pubsub } from '../pubsub';
 
const APP_MUTATED = 'appMutated';
 
export default {
   Query: {
       apps(parent, args, {dataSources}) {
           return dataSources.appService.getApps();
       },
       app(parent, args, {dataSources}) {
           return dataSources.appService.getApp(args.id);
       }
   },
 
   Mutation: {
       async createApp(parent, args, {dataSources}) {
           const { publisherId, ...rest } = args.app;
           let app = await dataSources.appService.createApp({...rest}, publisherId);
           pubsub.publish(APP_MUTATED, {
               appMutated: {
                   mutation: 'CREATED',
                   node: app
               }
           });
           return app;
       },
       async updateApp(parent, args, {dataSources}) {
           const { publisherId, ...rest } = args.app;
           let updatedApp = await dataSources.appService.updateApp(args.appId, {...rest}, publisherId);
           publishAppUpdated(updatedApp);
           return updatedApp;
       },
       async setAppDevelopers(parent, args, {dataSources}) {
           let updatedApp = await dataSources.appService.setAppDevelopers(args.appId, args.developerIds)
           publishAppUpdated(updatedApp);
           return updatedApp;
       }
   },
 
   Subscription: {
       appMutated: {
           subscribe: () => pubsub.asyncIterator(APP_MUTATED)
       }
   },
};
 
function publishAppUpdated(app) {
   pubsub.publish(APP_MUTATED, {
       appMutated: {
           mutation: 'UPDATED',
           node: app
       }
   });
   return app;
} This resolver totally defines all queries, mutations, and subscribers. And as you can see, we have access to data sources that were injected into ApolloServer. let app = await dataSources.appService.createApp({...rest} We deal with this, but what about subscribers? Subscription: {
    appMutated: {
        subscribe: () => pubsub.asyncIterator(APP_MUTATED)
    }
} And what is the code in mutations? pubsub.publish(APP_MUTATED, {
   appMutated: {
     mutation: 'CREATED',
        node: app
     }
}); This is pubSub. Maybe you know this pattern. Microservices usually communicate using it. This is required for subscribers in Apollo. And it makes sense because subscribers are WebSockets. Websockets keep connections, so it is easy to reach a high load. So, the Apollo team decided to handle it with this design solution. Anyway, there is an in-memory dummy, just for testing. Never use it in production. import { PubSub } from 'apollo-server';
 
export const pubsub = new PubSub(); How to test Run the app using the following command: ts-node src/index.ts Go to localhost:4000 via web browser and see the following: This is the test console Apollo. You can test queries, mutations, and subscriptions here. Congratulations! You’ve just learned how to build graphQL API using Apollo and Node.JS. Full code example you can find here: https://github.com/gandronchik/graphql-example

Intro Guide to the GraphQL API using Node.JS and Apollo

One of my side projects involves writing a around the Universal Chess Interface ( ). I originally developed a mock implementation and . That used version one of Apollo’s client/server stack, which . One of the biggest changes was the subscriptions interface and implementation, and I struggled for many hours to get that to work. Part of the problem is that the documentation is not very complete and rather scattered. This post will cover the most basic implementation of subscription service and the client code that uses it. GraphQL API UCI wrote about it awhile back changed quite a bit in version two Getting started The GraphQL server will be based on , which in this case will use an Express server as middleware. Subscriptions will use a that is attached to a plain HTTP server (also managed by ApolloServer, as we shall see). ApolloServer WebSocket There are two clients: the , and a client for use by Mocha to test the API outside of a GUI. For simplicity, I’ll keep the Mocha client code in the same folder as the server code. I also use Babel so I don’t have to think about and the like. GraphQL Playground Michael Jackson Scripts With that in mind, here are the packages to be installed: apollo-link, apollo-link-http, apollo-link-ws, apollo-server-express babel-cli, babel-core, babel-preset-env graphql, graphql-tools subscriptions-transport-ws mocha, chai I’ll provide a link to a working code repository at the end of this article. The Server The server is as basic as I could make it: express ; { ApolloServer } ; http ; { typeDefs } ; resolvers ; PORT = ; app = express(); server = ApolloServer({
  typeDefs,
  resolvers,
});

server.applyMiddleware({
  app
}); httpServer = http.createServer(app);
server.installSubscriptionHandlers(httpServer);

httpServer.listen({ : PORT }, () => { .log( ); .log( );
}); import from 'express' import from 'apollo-server-express' import from 'http' import from './schema' import from './resolvers' const 3031 const const new const port console `🚀 Server ready at http://localhost: ` ${PORT} ${server.graphqlPath} console `🚀 Subscriptions ready at ws://localhost: ` ${PORT} ${server.subscriptionsPath} An ApolloServer is created with schema and resolver parameters. The call passes in an express application instance. Finally, an HTTP server is created to handle the web socket interface to the subscription service. Both GraphQL and the subscription websocket share the same port, but under different protocols. applyMiddleware The Schema { makeExecutableSchema } ; resolvers ; typeDefs = [ ,
]; options = {
  typeDefs,
  resolvers,
}; executableSchema = makeExecutableSchema(options); executableSchema; { typeDefs }; import from 'graphql-tools' import from './resolvers' const `
  type Query {
    go: String!
  }
  type Subscription {
    info: String!
  }
` const const export default export The schema is very basic: will return a string acknowledgment, but behind the scenes it will fire off a method that sends publish notifications to subscribers. Subscribers subscribe through the subscription API. go info We can see how this works in resolvers.js: { PubSub } ; pubsub = PubSub(); TOPIC = ; infos = [ , , , ] publish = {
    setTimeout( infos.forEach( pubsub.publish(TOPIC, {info})), )
} { : { : { publish(); }
    }, : { : { : pubsub.asyncIterator([TOPIC]),
      },
    },
  }; import from 'apollo-server-express' const new const 'infoTopic' const 'info1' 'info2' 'info3' 'done' const => () => () => info 1000 export default Query go => () return 'going' Subscription info subscribe => () I’ve made the resolvers deliberately simple. For example, the asyncIterator method from PubSub is quite sophisticated (it supports filters and authentication, for example). Since it is already , I won’t delve into various options here. All the resolver above does is to publish an to all subscribers, passing objects as the body of the subscription. well-documented infoTopic info The Client As I mentioned, I’ll use two clients for testing. One is the built-in Prisma Playground, a service automatically provided by the ApolloServer (FYI: ). you can turn this feature off in production Testing in Playground To test, I’ll open Playground in Chrome, at Within Playground you can open up multiple tabs. For the first, I’ll subscribe to the : http://localhost:3031/graphql. infoTopic When this command is played, you will see a ‘Listening …’ response in the right pane, as shown above. Now you’re subscribed. Open another tab within Playground and query go: This sends back a response of “going”, so everything is okay. Now, going back to the subscription tab, you will see the published output: Testing using Mocha/Chai There’s a lot of boilerplate in setting up a client, so I’ve created a utility file to handle query and subscribe operations. It’s called fetch.js: fetch ; { execute, makePromise } ; { WebSocketLink } ; { SubscriptionClient } ; ws ; { HttpLink } ; gql ; uri = ; wsUri = ; link = HttpLink({ uri, fetch }); wsClient = SubscriptionClient(wsUri, { : }, ws); wsLink = WebSocketLink(wsClient); doQuery = { operation = { : gql ,
  }; .log( ) makePromise(execute(link, operation));
}; subscribe = { operation = { : gql ,
  }; execute(wsLink, operation).subscribe(handlers);
}; doQuery; { subscribe }; /* eslint-env mocha */ /* eslint-disable import/no-extraneous-dependencies */ // see https://www.apollographql.com/docs/link/index.html#standalone import from 'node-fetch' import from 'apollo-link' import from 'apollo-link-ws' import from 'subscriptions-transport-ws' import from 'ws' import from 'apollo-link-http' import from 'graphql-tag' const `http://localhost:3031/graphql` const `ws://localhost:3031/graphql` const new const new reconnect true const new const ( ) => query const query ` ` ${query} console `$query is ` ${query} return const ( ) => query, handlers const query ` ` ${query} return export default export The fetch.js code pulls in a lot of interdependent modules. For the test operations, I use to handle the interface between the server (which has to be running, btw 😉) and the GraphQL operations used by the tests. There are actually two interfaces here: one to handle query and mutation requests vis HTTP, and another that goes through a web socket to subscribe to a topic. apollo-link Most of this comes from the , but you will have to install a few additional modules I neglected to mention earlier: documentation node-fetch (installed globally via ) npm -g ws gql The module implements the HTTP that’s becoming a standard. The module is a WebSocket implementation for Node (there are others), and is a template literal tag that you can read more about . node-fetch Fetch API ws gql here The test itself is pretty straightforward: we first , then : subscribe go chai ; fetch, { subscribe } ;

chai.should();

describe( , { .timeout( ); handlers = { : { .log( , data); (data.data.info === ) { .log( )
        process.exit( );
      }
    }, : .error( ),
  }; it( , () => { query = ;
    subscribe(query, handlers);
  });

  it( , (done) => { query = ; { res = ( fetch(query)).data;
      res.should.have.property( )
      res.go.should.equal( )
    } (e) { .error(e)
      done(e)
    }
  })

}) /* eslint-env mocha */ import from 'chai' import from './fetch' 'subscribe, then go' ( ) function this 5000 const next ( ) => data console `received data:` if 'done' console 'exiting...' 0 error => error console `received error ` ${error} // get the subscriber ready... 'subscribe' async const `subscription {
          info
        }` 'go' async const `query {
            go
        }` try const await 'go' 'going' catch console The object (passed to the method) is what receives the publish notifications. When the last published message is received, the test process is terminated. hander subscribe Conclusion You should explore the links provided, as there is a lot more about GraphQL subscriptions that I wasn’t able to cover in this article. I’ve also included a few relevant links, below. A complete github repository containing the code above can be found . Enjoy! here Tutorial: GraphQL Subscriptions (server-side) — Apollo GraphQL apollographql/graphql-subscriptions: A small module that implements GraphQL subscriptions for Node.js SSL on Apollo Server 2.0 + Subscriptions · Issue #1338 · apollographql/apollo-server apollo-link-ws | Apollo Link Composable networking for GraphQL | Apollo Link Apollo Client | Apollo Client

GraphQL Subscriptions Using Apollo 2

Apollo is the best solution for managing remote data with a client cache. But if you are already using Apollo (or another client cache like Relay), the question is: What should you do about the rest of your client state? React’s new context API (available in 16.3 or as a polyfill) has opened up new possibilities for dealing with app state. At , we’ve been trying to find that blissful state that combines the data from the server, component state, and the app state, which hasn’t always been smooth. OK GROW! App state is tiny I became interested in Redux after watching Dan Abramov’s seminal talk at ReactEurope. After I’d learned the basics of Redux, I began looking for information on “advanced Redux.” But that brought me face-to-face with the problem with Redux for users: Every tutorial I found turned out to be implementing a client cache. You would learn the three or so ways to do async with Redux and then implement those async actions to work with your Redux store. But Apollo’s client cache already does all of that. It has all of my loading and error states handled, it deals with optimistic updates, you name it. So what’s left to manage? Apollo The answer, as it turns out, is very little for most apps. Most of it should just live in components. React What about centralizing to Redux for better testability? I agree that this makes testing very easy, but I have two problems with it: The whole point of having a component system is for encapsulation. React allows you to put state into your components so that when you are working elsewhere, you don’t have to think about what’s happening in that component. As soon as you try to separate that functionality, you have keep two things in your head, the component and the state (which is now probably in a separate file, so you need more buffers open). Not only that, but there is also risk that somebody else (never you!) would be tempted to grab that state from a different component. It breaks encapsulation. I’ve heard of developers making their entire app out of functional components with all state coming from Redux. Hey, I had a “let’s use all functional components!” phase too. But having a global store bypasses the top-down data flow and makes your app harder to reason about. Also, that’s a lot more code! Removing state from components feels un-React-y. Some of this movement stems from the fact that testing components has been pretty awkward for a long time, but I think we can solve that using tools like (more on this in a future post), or possibly a new tool like . React Test Renderer Cosmos There are apps that will really benefit from Redux, so I’m not saying not to use it. But in my own work, I have not been able to justify the overhead once Apollo took over remote data synchronization and caching. What state is left to manage? If you put most of your state into components and have a client cache, what’s left? Almost nothing. In one app, I had only a single global state variable to manage. But I tried managing it directly with the old Context API, and that convinced me that app-wide state is still a problem worth solving! Here are some things I think legitimately belong in app-wide state: Top-down data propagation runs into a roadblock when you hit a routing boundary. Of course you’ll pass some params to dependent routes, but passing shared state is a recipe for disaster. Just use app state instead. State that needs to be shared between routes. Sure you could put it in your root component and pass it down, but why? As an aside, I think a case can be made to store current session information (e.g., is the user logged in) in state even though you can also do that with Apollo. State that is used all over the place. In the last app I worked on, we tried . The logic is compelling: Since you already have a nice library to query and update values in the database, and since most of your data will already be in that format, why not just store your app state the same way? Then you have one way to do things, and you can use the existing reactive query components to update UI elements regardless of whether the data is local or remote. Apollo Link State To be fair, Apollo Link State totally works, though I ran into some sharp edges on what was then a new addition to Apollo. The real problem is that the way you produce and consume local app data just doesn’t match the pattern of remote data. Queries for remote data tend to be specific to one part of your app and don’t repeat much. The queries are intentionally verbose to clarify the relationship between the client and server, and they may reside in their own files and may have options for optimistic updates, updating based on mutations, etc. They also make extensive use of loading/error state, the ability to select which fields you need, etc. But by definition, app data is ubiquitous and simple — usually key-value pairs, or sometimes objects that are needed in various combinations that are read and updated in multiple places in your app. You don’t need to select fields, deal with loading state, etc. Writing queries for these things is simply awkward and excessively verbose, and don’t forget that queries and mutations require separate code. Here’s an example: We had an app for ordering from restaurants. If you leave your table, it should clear incomplete orders and remove the table number you were sitting at. But you shouldn’t be able to do that if you have an unpaid tab (ticket). We had components with render props to compose in the state queries and mutations, and this was a piece of code that appeared in the app: <ClearOrder    render={clearOrder => (      <SetCurrentTable        render={setCurrentTable => (          <GetOrderStatus            render={({ ticketId }) => (              <HeaderButton                label="Leave Table"                disabled={!!ticketId}                onPress={() => {                  clearOrder();                  setCurrentTable({ qrCode: '' });                }}              />            )}          />        )}      />    )}  /> It’s almost enough to make you go back to higher order components! 😱 Actually, I think HOCs would be a good solution here, but composing individual operations is still pretty heavy. Enter Unstated Before we look at Unstated, I should say that you don’t need to use any other state library at all! The is quite nice and may be all you need, allowing you to keep state in a root component. That said, here’s that same component written with new Context API Unstated <Subscribe to={[Table, Order]}>  {(currentTable, order) => (    <HeaderButton      label="Leave Table"      disabled={!!order.state.ticketId}      onPress={() => {        order.clear();        currentTable.set({ qrCode: '' });      }}    />  )}</Subscribe> I find it much more readable, and there are fewer levels of indentation and fewer lines of code. It avoids the pyramid of doom in two ways: Get and set functionality can be shared in one state object, reducing imports. Order and table state could have been combined to one object if we preferred that. We are dealing with classes, so we can combine as many things as we like on that container. There’s a built-in way to subscribe to multiple state containers in one component – the prop takes an array of state objects. Subscribe to Finally, if we compare the code to perform , one of the actions, the difference becomes a little starker: clearOrder The GraphQL is simple enough but doesn’t tell us much: mutation clearOrder {  clearOrder @client} And the resolver ends up looking a lot like a Redux reducer. clearOrder: (_, __, { cache }) => {  const data = cache.readQuery({ query: GET_ORDER });  // make sure you mutate your object correctly  // or other state could be affected  data.items = [];  cache.writeQuery({ query: GET_ORDER, data });  return null; // if you forget to return null, you'll get errors}, The equivalent method in the Unstated class would be a one-liner: // make sure you bind your method if you might pass it// as a propclear = () => this.setState({ items: [] }); Ah, That feels better! Testing with unstated Because Unstated creates an object that is not a react component, you can test it without rendering the component just as you might with Redux: test('clear order', () => {  // instantiate and set up our state object for the test  const orderState = new OrderState();  orderState.setState({ items: ['hamburger'] });  orderState.clear();  expect(orderState.state.items).toEqual({ items: [] });}); Or you can test it in place by injecting it into a component tree with the prop: inject test('clear rendered Orders', () => {  // render an Orders component with the same orderState as above  // (here with react-test-renderer)  const tree = TestRenderer.create(    <Provider inject={[orderState]}>      <Orders />    </Provider>,  );  // make sure our order rendered (1 item)  expect(tree.root.findAllByType(OrderItem).length).toBe(1);  // "press" the leave-table button by calling its onPress, which will  // call our `clear()` method  const leaveTableButton = tree.root.findByProps({    testId: 'leave-table-button',  });  button.props.onPress();  expect(tree.root.findAllByType(OrderItem).length).toBe(0);}); Follow Your Bliss In fact, Unstated is so easy to use, it would be easy to use it for everything, but that’s not really the intent of the library. Use it judiciously, though, and it will fill in a small but very important hole in your state management. Using Unstated in my current project feels like I’ve finally arrived at a complete data solution, and I’m no longer wishing for something different. Originally published at www.okgrow.com .

State of Bliss: Handle Your State with React, Apollo, and Unstated

You shall fail… successfully Errors are common to all computer programs; they might be hard to maintain, but properly dealing with them is without any doubt the most critical part of building applications. In the context of a Client/Server architecture we need the Server to output and that the Client can and in order to . well-formatted easily identifiable errors seamlessly read, process handle fail successfully E.g. a successful failure GraphQL powered APIs are no (pun intentional 😏) to this rule. Here is what the latest draft of the GraphQL specification says about how error outputs should be formatted. Exceptions (Sun, Jun 10, 2018) If the operation encountered any errors, the response map must contain an entry with key . _errors_ Every error must contain an entry with the key with a string description of the error intended for the developer as a guide to understand and correct the error. _message_ GraphQL services may provide an additional entry to errors with key . This entry, if set, must have a map as its value. This entry is reserved for implementors to add additional information to errors however they see fit, and there are no additional restrictions on its contents. _extensions_ With this in mind, a typical error object should look something like this: ..."errors": [    {      "message": "Only Prophets can do this",      "locations": [ ... ],      "path": [ ... ],      "extensions": {        "code": "NOT_A_PROPHET",        "timestamp": "Thu Jun 21 17:03:00 UTC 2018"      }    }  ]... Remember that we want the error output to be “ and ” meaning it should contain at least one field than can be seamlessly processed by a computer. well-formatted easily identifiable First candidate to consider is , a Since it is formatted to be read by a human, it could potentially be an expressive long string containing unwanted characters ( etc…) thus not ideal. message “string description of the error intended for the developer[…]”. %, ç, à, $, €, @, white spaces, According to the specification, should be the dedicated space for any additional entry to Here, it gives us the ability to attach a key, providing a datum that can be extensions errors . code machine-readable “ seamlessly read, processed and handled ”. if (error.extensions.code === "NOT_A_PROPHET") {  // Do Something} Moving forward 🏇 We just saw that there are guidelines on how to output errors in the context of a GraphQL API. With that we should be able to: Throw and output and errors — thanks to — within our resolvers. spec-compliant identifiable _extensions_ Identify and handle errors client-side to . fail successfully However, the specification doesn’t specify guidelines for issues like APIs errors documentation, retry or failure handling, meaning that there are countless ways to properly arrange our code base for that purpose. The absence of explicit convention led me to build . Apollo-Prophecy The way of the pagan First, let’s illustrate what maintaining errors can be like without . To that end we’ll be using , a prominent, spec-compliant, fully-featured and well-maintained GraphQL server implementation for nodeJS. Apollo-Prophecy Apollo Server Because we’re using , we can use the constructor : errors thrown using this constructor produce a spec-compliant JSON output like the one above. Apollo Server ApolloError(message, code) throw new ApolloError("Only Prophets can do this", "NOT_A_PROPHET"); In order to make it easier for us to store errors we could organize our server-side code the following way: And properly handle errors like this: Done, right? No, we can do better. With this configuration, we end up doing the same work twice: since on the server we would have to write a client side. for every existing error entry corresponding key I don’t know about you but I prefer to say DRY. To leverage API documentation 📑 One of the most interesting propositions of GraphQL is that While this is usually done through a mechanism named “introspection queries” — giving us detailed information about the fields and types in our schema — this doesn’t mean that we cannot add documentation material to the schema itself: API should be self-documenting. What if errors were part of the schema? Here is how we could exploit this: We include errors in the schema: 1. type ErrorExtensions {  code: String!}

type Error {  name: String!  message: String  extensions: ErrorExtensions}

type Query { We create the corresponding resolver on the Query field: 2. ...const resolvers = {Query: {...errors: { ... }}}... That’s cool but what about the client? 🤷 Assuming that information about errors are accessible through our APIs, we need to find a way to access them from the client, keeping in mind that we want to avoid doing the same work twice. From here we can discuss two different implementations: Every time our app launches, the client could . perform a query to fetch all errors codes and store them locally 😒 Meh… Handle it on the dev-side by fetching and as part of the build process. storing errors statically in the codebase 💁 Why not? Since correct error-handling is critical to the good functioning of your application, going with would make fetching all errors’ definitions a mandatory step of the app launch process — therefore increasing loading duration. option 1 That’s why for cleanliness and overall performance, I like the better. second option The prophet way? 🧙🏼‍ I’ve started working on : a code generation Command Line interface that does what we need (and a tiny bit more!). It will: Apollo Prophecy Generate errors that we can throw in our resolvers and expose through the schema as documentation — apollo-prophecy generate Query the server schema and generate file with methods and helpers to gracefully consume errors — apollo-prophecy ask The goal is to always keep you server and client errors repository in sync. First, install it through your favorite package manager. [npm | yarn] install -g apollo-prophecy To generate errors like a greek God 🔮 The command will create a file containing throwable error classes. It takes as input a JSON file formatted like this: generate It can be run like below (if nothing is specified it will look for an file inside the running folder): errors.json apollo-prophecy generate errorsDef.json Using the above the CLI will generate the following file. errosDef.json Here are the generated file key components: — plain JSON array meant to be used as documentation output. It contains all error representations with their static data: , , . errorsList name message extensions -> code Always generated but empty if there is no error to generate. — GraphQL object type that we can include in our . It should be used alongside for documentation. . errorType schema definition errorsList Always generated as is — class extending ApolloError meant to be by other errors in this file. . PropheticError inherited Always generated as is — those are the two custom error classes generated with the information of the JSON file input. NotAProphetError ProphetNotFoundWithId We can use all these elements in our server. Given that we need errors to be part of our schema, we can do the following: import { errorsList, NotAProphetError } from './gen/GeneratedErrors' Query: {errors: () => errorsListgetAllUsers: () => {...throw new NotAProphetError()},} Hmm ok… Does that make us prophets now? 🤔 Not yet; prophets need to communicate with gods in order to anticipate the future, don’t they? Using , we can do something similar with the command : Apollo-Prophecy ask apollo-prophecy ask http://localhost:3000/graphql [--field] This will send a request to the specified endpoint and try to perform a GraphQL query on the option to try and fetch errors’ information (if nothing is specified, an will be queried by default). --field “errors” field Below is an extremely simplified version of the generated file. If you want to have an idea of what it really looks like go and ! try it yourself —an enum with the codes of all errors exposed in the schema. PropheticErrorCode and are the real two helper methods that enable us to handle client-side errors in a clean and reusable way. errorHere isThis - errorHere(error) When called, it returns an object that has found on the server. Depending on the supplied argument, the called property returns either : one property named after each errors true or false import { errorHere } from `./_generated/Errors.ts`; ...(error) => {if(errorHere(error).isNotAProphetError){// Do something} else if(errorHere(error).isProphetNotFoundWithId){// Do something else}} - isThis(error) When called, it returns an object that has found on the server**.** one handler function named after each errors import { isThis } from `./_generated/Errors.ts`; ...(error) => {isThis(error).UserNotFoundError(() => ...).NotAProphetError(() => ...).handle()} Handlers return the same instance object than , so that each function call can be chained. Once the method is called, it initiates the check and calls the corresponding handler if there is a match. isThis handle And… voilà! Thanks to the command we can keep our client-side error repository in sync with the API through the schema. By using and we now have a clean and expressive way of handling errors — and look, the code is pretty too! ask errorHere isThis Conclusion Just like any young technology, still has gaps to fill. is built to fill just one of these gaps: . But this isn’t the end of the conversation; is open-source, and I’m sure together we can come up with even better ways to improve it. GraphQL Apollo-Prophecy how we implement error handling and documentation Apollo-Prophecy Already there is a lot of work and fixes to be done on ; contributions and suggestions are both welcomed and needed. Please visit and take look at existing or even s. Apollo-Prophecy Github issues create new one If you’ve come this far, thank you for reading ❤️ I really hope you enjoyed this post and I’d love to hear your thoughts and feedback 🙂. _apollo-prophecy - 🔮 GraphQL error management made Easy, generate custom machine-readable errors for Apollo…_github.com theGlenn/apollo-prophecy

Handling and documenting GraphQL errors using Apollo-Prophecy + Apollo

and its ecosystem are awesome and makes using it a pleasure. If you are writing a javascript application today I can’t stress enough how much simpler these two technologies will make that process. GraphQL Apollo A has recently and released there own mechanism to help you store local state in their cache. I’m really excited about this move and believe that this will further simplify the process of frontend development. However it does add complexity in the fact that there not many resources or third party library support out there for yet. This tutorial aims to help change that. 😀 pollo moved away from Redux apollo-link-state By the end of this tutorial you will have: Setup a React project using create-react-app Used to store and query for information apollo-link-state Written some stateless components with help from recompose Special thanks to Peggy Rayzis and the Apollo team for all the awesome work and communication that has been going out around this product. See her Future of State Management post to see what initially brought we over to this technology Getting Setup Before you start Please make sure you have the following installed and/or ready to go: Node Npm Yarn Initialize the project First before we can dive into Apollo we need a React App to use it with so lets create a React project called using . link_state_demo create-react-app # Download Create React Appyarn global add create-react-app # Use it to create a React Projectcreate-react-app # Navigate to the projectcd link_state_demo Add Additional Dependencies Next we want to add , , and among other supporting libraries. apollo apollo-link-state recompose lodash yarn add apollo-boost apollo-link-state react-apollo graphql-tag graphql lodash apollo-client-preset recompose Kick it off! It’s that simple, now we can just start our dev server and go! yarn start You should now be able to navigate to _localhost:3000_ and see your application running. create-react-app running out of the box Modify App.js to be Stateless Optional! I prefer to write my components using React’s stateless components because I It helps to simplify my code by: believe Reducing boilerplate Increasing Readability Discouraging lifecycle methods Encouraging a healthy separation between UI and Application Logic Though these are opinions and not required for using this demo! To change over to using stateless components is as easy as copying the code below to your file: app.js Setup the Apollo Client To begin we will have to set up our Apollo client. This is fairly simple and will involve the modification of one existing file and the creation on another. Setup the ApolloProvider Open and wrap in Apollo’s . index.js <App/> ApolloProvider Setup the ApolloClient Create a new file named and initialize the cache and the Client.js ApolloClient Setup State logic that will support a To-Do List (A To-Do List Demo! How Original!) Now that we have the Apollo Client setup it’s time to begin adding the methods, queries and components that will allow us store and modify local state in the Apollo Cache. Add apollo-link-state to Client.js Below you’ll find an updated which fully implements all the necessary tools to use to handle Todo list state. However before you dive into it you should understand what the sections do: Client.js apollo-link-state Defaults The default values that our local cache falls back to when the application loads. GraphQL This section houses the GraphQL queries which are used in the following ways: Finding data from the cache Finding where to insert data into the cache There are a few differences to pay attention to: The **_@client_** decorator This is what tells Apollo that these queries target the local cache. Query vs Mutation The keyword in the context does exactly what you expect, it looks for the data in the cache and returns it. query @client However the keyword tells us that it needs to modify something in the cache. To do this the mutation looks for an identically named function in the resolvers object we pass into which we define further down. mutation CreateClientStore Cache Mutations These are the functions that are called by our mutation queries. They are given the parameters sent to the query and an instance of the cache with the intention that we use these to update the state held inside. Store This is where we tie together our cache, client state, defaults, resolvers and the Apollo Client to give the ApolloProvider the ability to store state using . apollo-link-state Helpers Here we’ve created a Higher Order Component to help give a child component access to the functions needed to interact with the state mechanism we’ve just setup. What this all looks like Setup the TodoList Component Next we need to actually use the queries we defined above. To do this we are going to create a basic To Do List that lets us add items to a list and clear the list. Create TodoList.js Add TodoList to our App We then just need to add the to our container and it should be good to go. TodoList App What it should look like Navigating back to you should see: localhost:3000 And thats it! You’re now storing state locally using apollo-link-state Wrap up Simple solutions and simple architectures lead to a better and more stable systems in the long run. While GraphQL has helped to simplify query logic the Apollo Team has been doing an equal amount of work to simplify the rest. Because of this I’m happy to include these two technologies where ever I can. In this specific case has proved to be a valid alternative to Redux and has saved me from: apollo-link-state Adding another technology and paradigm Splitting my state into multiple locations Adding more that one method to get application state. The only caveat so far is that Link State lacks some tooling and third party library support that the Redux community enjoys, but I believe that is a very small and very temporary issue. Coming up next We dive into how to set up for success when handling additional stores. apollo-link-state N _Overview_medium.com Setting up apollo-link-state for Multiple Stores This is open source! you can 🧞‍ find it here on Github ❤️ I only write about programming and remote work. If you I won’t waste your time. follow me on Twitter

Storing Local State in React with apollo-link-state

Take a look into your future 🔮 I want to touch on how to set up to allow for support of multiple stores without interfering with one another. apollo-link-state In my last post we went over how to setup for basic use: apollo-link-state _Special thanks to Peggy Rayzis for all the awesome work and communication that has been going out around this product._medium.com Storing Local State in React with apollo-link-state Now in this tutorial this is the moon we’re shooting for: Moving to its own file. withClientState Moving specific resolvers and mutations to their own files. Writting an elegant way to merge together multiple stores. Adding a new Notes feature to the previous demo. Lets Dive in! 🚀🌙 My biggest problem when using apollo-link-state To kick this off I want to talk about the problem we are trying to solve. It boils down to that expects only one value for and one value for which is incompatible if you have more than 1 object you want to store. CreateClientState defaults Mutations.resolvers This will get unruly fast It’s incompatible because it forces us to keep the and for multiple logically separate features in one place. OR if forces us to explicitly reference a / from a separate file every time we create one. resolvers defaults resolver default This is bad and in a medium to large app is a great way to make your logic hard to track. How can we solve this Thankfully the solution to this is really easy! It involves the following: 1. Move our CreateClientStore out of client.js file Move the configuration of your client store to its own file to help highlight that this is a very specific and a very important piece in our application. Our new should look like this: client.js 2. Move our defaults, resolvers, and queries to their own file @client Break out the and for a specific area of functionality into their own “store” files to help ensure as the application grows code is logically co-located. defaults resolvers 3. Tie it together with some lodash magic 🧙‍ Finally we use some helpers from lodash to merge the export of each file into one. This allows us to define and in separate files and bring them back together during configuration. store resolvers defaults Look at the _mergeGet_ function specifically to see how this occurs. Adding another feature becomes easy-peasy Now that we have the above infrastructure in place adding a second feature is just as easy as adding the 100th feature. Lets test out this statement by adding a Freeform notes field to the application. 1. Create the Notes Store Nearly identical to the Todo Store above. 2. Hook up the new Store Import the new store into and add it to our . CreateClientStore.js STORES 3. Create the Note Component Now that we have the store created and wired in it’s time to put it all to use. 4. Add to app.js Finally add our new component to our container. <App/> See it in action! You should now be able to run the update demo and see our new note’s feature in action. Simple. Wrap up I wanted to put this out because I think this Apollo’s version of maintaining local state has some real potential and as a young project the more support it gets the more we should see if grow and thrive. Part of supporting a project is learning how to use it and learning how to improve on it. I hope this helps do both! Happy coding! 🧞‍ This is open source! you can find it here on Github ❤️ I only write about programming and remote work. If you follow me on Twitter I won’t waste your time.

Setting up apollo-link-state for Multiple Stores

✨ an AWS experiment ✨ Motivation We started a big project few months ago: . migrate our application to GraphQL With and with many nested ressources, the maintainability and performance of the application were getting worse every month. 300+ React Component 20 API endpoints Once this project finished, we wanted to ensure that GraphQL fulfil his promises, so we decided to track migrated components “perceived performance”. We wanted to watch the performance of our GraphQL Ruby API over time and avoid UX/performance regression. Considering that we already use a lot of external SASS (NewRelic, Cloudinary, AWS, Segment, OAuth0, …), instead of building a full AWS data ELK stack, we decided to build a simple and low-cost performance “dashboard”. Since our Segment account save all raw data in a S3 bucket, we decided to use this data by sending a custom event . Perfomance.QueryLoadTime Note: is a SASS Analytics API that provide integrations with 200+ services like Hubspot, custom webhooks or AWS. Segment The Architecture Of course, Segment can easily be replaced by AWS and AWS Kinesis Firehose API Gateway The front React application is sending a custom event to Segment each time a specific GraphQL request end.The event is then stored in S3 as JSON raw data files. Perfomance.QueryLoadTime Then, every week, the data is fetched from S3 and consolidated, ready to be used in Google Sheets. Let’s see how to make it work out ! Send performance data — setup Apollo with Segment is a GraphQL client compatible with React Apollo Data For this, we need to write a that intercept some filtered queries and send performance data to Segment. custom link You’ll see below a service.Don’t worry, this is our Segment client wrapper. JasonBourne It’s all.All you have to do is to add this to your instance. link ApolloClient export const client = new ApolloClient({link: ApolloLink.from([perfMonitorLink, networkLink]),cache: apolloCache}); You’re all set for the front part. Build consolidated data — Setup AWS Athena Athena is a service of Amazon that allow to run SQL queries against S3 files. Configuring Athena is quite easy, you need to: create a database create a table by specifying a source and the data structure create a named query and save it The data Here is the raw data structure that Segment store to S3(for the event) Perfomance.QueryLoadTime You’ll notice that many field are not relevant for data analysis, so we’re gonna only keep a subset. Create a database and a table The “Create table” UI available on AWS Athena do not allow to create table with complex data structure (nested field, union type field, etc), so we need to write a create table query, by hand ✍️ Note: Athena use a language to describe data, here is the wanted query : Apache HIVE CREATE TABLE The query expose the data format (JSON), data structure, the source and the destination To do so, we can use a wonderful tool called .This is an open source project — recommended by AWS official documentation — to generate HIVE query from JSON raw data. [hive-json-schema](https://github.com/quux00/hive-json-schema) In short, given a JSON example file, it generate a corresponding query. CREATE TABLE , it’s really simple (take 5 minutes maximum). Read the doc Write and save a SELECT Query The table is now ready, we can write a query.Here’s ours: SELECT SELECTproperties.ellapsedMs, properties.operationName, sentAtFROM "segment"."perf" WHEREevent = 'Performance.QueryLoadTime'ORDER BY sentAt DESC; Since it’s plain SQL, you can select all the field available on this table. Run the query and save it. NB: each time a query is executed, Athena store the CSV result on your S3.To know where (which bucket), go to Settings. Problem Athena do not propose to run a saved query periodically.However, we can use the AWS Athena API to run a query remotely.Next step, the lambda. Keep data fresh — Setup a periodic AWS Lambda AWS Lambda is a service that allow to create . serverless functions Serverless architectures refer to applications that significantly depend […] on custom code that’s run in ephemeral containers (Function as a Service or “FaaS”)[…] . By using these ideas, […], such architectures remove the need for the traditional ‘always on’ server system sitting behind an application. Depending on the circumstances, such systems can significantly reduce operational cost and complexity at a cost of vendor dependencies and (at the moment) immaturity of supporting services. Martin Fowler — Serverless Architectures We don’t want to go on AWS Athena UI every week to run the saved query manually, so we need a Lambda that run our query very week. Here’s how to do so: Create a periodic lambda Ensure lambda have sufficient rights to call Athena and store results to S3 Create a “periodic lambda” Go to “Create Function” and select “Node 6.10” and “Create a custom role”.You’ll be redirect to , click on “Allow”. AWS IAM Please write down the name given to the IAM role, it will be used later. Then click on “Create Function”. Select a trigger You’ll arrive a page like this. In order to run, a lambda need to be invoked.We want to invoke our lambda on a weekly basis, like a CRON task. offer this feature. AWS Cloudwatch On the left, select “CloudWatch Events”, then use this configuration : The lambda will be invoked by a Cloudwatch event every 7 days. The lambda IAM role This is the nifty part, you’ll need to go to IAM and find the role you just created. Then ensure that the role has the following permissions: : , Athena GetNamedQuery StartQueryExecution : , , , S3 ListBucket CreateBucket PutObject ListAllMyBuckets This will allow the lambda to find run a query and store it results on S3. NB: I highly encourage you to dig in the AWS IAM documentation in order to understand all the implications. The lambda code The lambda must : Get the named query by id Start the query Terminate lambda execution NB: To get your Athena Query ID, open the query from Athena “Saved Queries” and copy the id from the URL Displaying data — Configure Google Spreadsheet Now the consolidated data is fresh and available, we need to : get the consolidated data format date field — if any build a pivot table build a chart Copy the content of the last CSV file created by AWS Athena You’ll find the file in the bucket specified in the Lambda source code. Remember, we specified a custom output location to the AWS Athena start query call. Copy the content of the file, and paste it in a new sheet. Format data In case you’re dealing with date field, here’s a trick. Google Spreadsheet do not understand the ISO date format, we need to “format” it.Here is the formula, apply it to a whole new column for each needed field. = DATEVALUE(MID(C2,1,10)) + TIMEVALUE(MID(C2,12,8)) ⤴️ Here you’ll get a “MM/DD/YYYY HH:MM:SS” format Remember to change the column format to “Date time” Build the “pivot table” The consolidated CSV data is no yet usable.Since the data use many dimensions (sentAt, operationName) for a single value (elapsedMs), we need to build a “matrix/pivot table”. For this, create a new sheet and go to “Data>Pivot table …” Here is an example of pivot table configuration, it’s very “data-specific”. Configure the chart The configuration of the chart is very personal and depend on what type of data you have, here’s an example of time-based performance data. My favorite chart type for time based performance data is ⤵️ Scatter chart Or the classic Smooth line chart with average valuesinstead of detailed values ⤵️ This helps us to see the trend and maximum values in a glance ✨ Conclusion Pros only pay for Lambda execution and Athena query once a week very flexible configuration geeky 🤓 Cons Solutions already exists : ELK, AWS Quicksight, Tableau Copy-paste data every week not configurable for a non-tech Future and improvements 📈 CVS file data pasting step This step is hard to automate easily because AWS Athena create a unique .csv file in S3 each time a query end.A workaround could be to do 2 things : update the lambda to save the result of the query in a file named and on S3. latest.csv save it publicly Then use awesome function in Google Spreadsheet IMPORTDATA() This way, the data will always be the freshest one! Support for many queries We may want to create many Athena queries (examples: BI or advanced cross analytics-tools reporting) For this we can update the Lambda function to update all or many queries. What about Tableau, AWS Quicksight or Datadog ? Of course, there is a lot of battle-tested and professional solutions.This blogpost expose a solution to a specific context with a particular financial and technologic constraints.We could totally configure Datadog or pay a Tableau licence, but it would not be that fun! This is of course an experiment and temporary solution. Thanks for reading! 🌞 I hope you learnt some things about AWS or GraphQL.Please feel free to drop a comment if i missed anything!

Build performance reports for your Apollo React Components in 30 minutes. ⏲️

When developing a website that interacts with a REST API, a common path is to use a network management library together with Redux to manage state. This means writing reducers, actions, and state management for the different stages when communicating with the API. With good design, this can be generalized using HOCs, or some other structure to avoid repeating code. The Apollo stack aims to simplify development of applications that consume an API. GraphQL For the backend part of the stack, it uses instead of REST. is a query language created by Facebook in 2012 for describing the capabilities and requirements of data models for client‐server applications. It tackles several of REST’s shortcomings, providing an easy way of defining data structures and queries so that development and usage of the API is easy and flexible. GraphQL GraphQL Some people are even calling it REST 2.0. There is a whole ecosystem around GraphQL. Some notable examples of tools are: provides a way to use GraphQL like a backend-as-a-service. GraphCool to validate queries using ESLint, avoiding typos and warning the developer if something changed in the backend. Plugins exists Some are pointing to (an interactive tool for exploring and testing GraphQL backends) as the killer app for GraphQL. GraphiQL is a GraphQL client for , React Native, Angular, Swift and Java. When using it, you get options for configuring caching, mutations, optimistic UI, subscriptions, pagination, server-side rendering, prefetching, and more. Apollo Apollo React It can be incrementally adopted, meaning that it can be implemented for small components, coexisting with non-apollo components. Apollo uses Redux under the hood, so it can plug into existing Redux applications and all Redux development tools will work with Apollo’s queries. All code related to API interactions gets managed by Apollo, allowing the developer to just define what data a component needs. , these are some useful resources: Besides the official documentation : an excellent 6-part tutorial for implementing the full Apollo stack. Full-stack React + GraphQL Tutorial : Top 3 things to know coming from REST. How do I GraphQL? : How GraphQL turns a query into a response. GraphQL explained : Keeping your components pure with HoCs Simplify your React components with Apollo and Recompose

React, Apollo and GraphQL

The Scene I am doing some experimentation and I want to try something with GraphQL on a React project. I already know something about GraphQL but I never really used it by myself. I begin searching for a good GraphQL backend and I settle with which seems the best out there at this moment: has a lot of guides and tutorials, it integrates with other services, it is very flexible and it’s free for developers. Bright green lights! Graphcool Graphcool has quickstart guides for both and Relay but I already decided what to use so I begin yarn-ing what it needs on my React project: Apollo "apollo-client": "^0.8.1","graphql-tag": "^1.2.3","react-apollo": "^0.9.0", The Mission I think about something not so original but always fun to work with: music bands and albums and songs and stuff.. always more exciting than :) Northwind Traders or Contoso Ltd. So I just want to read/write data from/to Graphcool. In GraphQL when you want to read you need , when you want to write you need . Queries Mutations I am not writing about queries because the focus of this story is about nested mutations and because queries are well explained and I got no problems during the implementation. LET THE PARTY BEGINS With the Graphcool “Console” (an awesome interface for db modelling) I created a rough-and-ready structure. type Band {name: String!country: Stringwebsite: Stringmembers: [Person]contact: Personalbums: [Album]} type Person {firstName: String!lastName: String!} type Album {name: String!year: Int!songs: [Song]} type Song {trkNr: Inttitle: String!duration: String} As you can see we nested two arrays on two different levels starting from the albums field of the Band model. So, to be clear, I want to store all this info using some data about STORMO music band, and I want to do it with a single mutation! The Problem The party suddenly crashes (and STORMO stop playing!) when I realize I don’t know how to create nested mutations, nor the (anyway very good) Apollo documentation can help me out. Moreover I was brave enough to use arrays and now my eyes are lost in the window… the physical one!! The Help After a few not-worth-mentioning tries i decide to use where I begin stalking in the general channel. the salvific Graphcool slack support , from Graphcool staff begins to help me in no time and when i finally explain in a comprehensible way my situation, he hands me… Nilan Marktanner The Solution Thanks to Nilan I relaize three things: the importance and, yes, the beauty, of a timely assistance nested mutations on Graphcool are improved and easyer to use when you write a nested mutation there is no need to write about the types of the nested objects! and that was exactly what i needed. Code Time The mutation I have to build mutation {createBand(name: "Stormo"country: "Italy"website: " "members: [{firstName: "Luca"lastName: "Rocco"}, {firstName: "Federico"lastName: "Trimeri"}, {firstName: "Giacomo"lastName: "Rento"}, {firstName: "Gabriele"lastName: "Coldepin"}]contact: {firstName: "Giacomo"lastName: "Rento"}albums: [{name: "SOSPESI NEL VUOTO BRUCEREMO IN UN ATTIMO E IL CERCHIO SARÀ CHIUSO"year: 2014songs: [{trkNr: 1title: "In Volo"duration: "02:50"}, {trkNr: 2title: "Supernova"duration: "02:10"}, {trkNr: 3title: "Fuga"duration: "01:24"}, {trkNr: 4title: "Perchè La Bambina Cade"duration: "02:46"}]}, {name: "7"year: 2009songs: [{trkNr: 1title: "Incosiderata Putrefazione"duration: "03:18"}, {trkNr: 2title: "Abbandono La Mia Volontà"duration: "03:20"}]}, {name: "Self-Titled EP"year: 2007songs: [{trkNr: 4title: "Quando Non Ci Sei"duration: "02:08"}, {trkNr: 5title: "Al Punto Di Non Ritorno"duration: "04:36"}]}]) {idmembers {id}contact {id}albums {idsongs {id}}}} https://stormo.bandcamp.com/ Using Apollo Client, I specify input arguments with GraphQL variables, so let’s see how it looks in this case: import gql from 'graphql-tag'; const BandMutation = gql`mutation ($name: String!$country: String$website: String$Members: [Person]$Contact: Person$Albums: [Albums]) {createBand(name: $nameCountry: $CountryMembers: $MembersContact: $ContactAlbums: $Albums) {idmembers {id}contact {id}albums {idsongs {id}}}}`; Using a form I compose the data like this: (but pay attention, apollo wants this object called ‘ ’ and nothing else!) variables const variables = {name: "Stormo",country: "Italy",website: " "members: [{firstName: "Luca",lastName: "Rocco",}, {firstName: "Federico",lastName: "Trimeri",}, {firstName: "Giacomo",lastName: "Rento",}, {firstName: "Gabriele",lastName: "Coldepin",}],contact: {firstName: "Giacomo",lastName: "Rento",},albums: [{name: "SOSPESI NEL VUOTO BRUCEREMO IN UN ATTIMO E IL CERCHIO SARÀ CHIUSO",year: 2014,songs: [{trkNr: 1,title: "In Volo",duration: "02:50" ,}, {trkNr: 2,title: "Supernova",duration: "02:10" ,}, {trkNr: 3,title: "Fuga",duration: "01:24" ,}, {trkNr: 4,title: "Perchè La Bambina Cade",duration: "02:46",}]}, {name: "7",year: 2009,songs: [{trkNr: 1,title: "Incosiderata Putrefazione",duration: "03:18",}, {trkNr: 2,title: "Abbandono La Mia Volontà",duration: "03:20",}]}, {name: "Self-Titled EP",year: 2007,songs: [{trkNr: 4,title: "Quando Non Ci Sei",duration: "02:08",}, {trkNr: 5,title: "Al Punto Di Non Ritorno",duration: "04:36",}]}]} https://stormo.bandcamp.com/ Finally, inside my React component I can use all of this to send my data to Graphcool import React, { Component } from 'react';import { graphql, compose } from 'react-apollo';import BandMutation from './../graphql/BandMutation'; class CompanySettings extends Component {constructor(props) {super(props);this.sendData = this.sendData.bind(this);} sendData(variables) {this.props.CreateBand({ variables }).then((response) => {window.alert('You submitted data about a new band');}).catch((e) => {console.error(e);});} render() {return <FormCreateBand onSubmit={this.sendData} />;}} export default compose(// with this I can use the mutation with this.props.CreateBandgraphql(BandMutation, { name: 'CreateBand' }),// I can write here other mutations or queries)(CompanySettings); Conclus… But wait! This is the beginning actually GraphQL is not the future, is the present, and it’s soo disarmingly good, in loving memory of REST Graphcool is an awesome service and its staff is careful and hyperactive (i’m quite sure they don’t sleep neither) Was there some fatigue?… Yes, of course! But with this kind of fatigue, for every minute of time that you invest, you will save A LOT more later, it depends on the project. P.S. The party now is going crazy, thanks to Storm{O} !! is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

GraphQL nested mutations with Apollo: small fatigue, max gain

Building a Progressive Blog App with Apollo and Cosmic JS

When It’s Time to Give REST a Rest

যখন আরেস্টকে বিশ্রাম দেওয়ার সময় হয়

Wenn es Zeit ist, sich auszuruhen

Cuando es hora de darle un descanso al DESCANSO

Quand il est temps de se reposer

जब आराम करने का समय हो

RESTを休ませる時が来たら

REST에 휴식을 주어야 할 때

Quando é hora de dar um descanso ao REST

Когда пришло время дать REST отдохнуть

REST'e biraz dinlenme zamanı geldiğinde

Khi đến lúc cần cho REST nghỉ ngơi

何时该让 REST 休息一下

To understand how graph databases work, let’s give a definition first. A graph database that stores nodes and relationships instead of tables, or documents. The data is stored without restricting it to a pre-defined model giving flexibility. The abovementioned NoSQL databases are often perceived In SQL databases, the data is only stored in tables. Using NoSQL you can store 4 types of databases: Document, Key-value, Wide-column, and Graph. is a type of NoSQL databases as “no SQL” at all but it’s actually “not only SQL”. SQL database examples: MySQL, PostgreSQL, OrientDB, MariaDB, CouchDB NoSQL database examples: MongoDB, Apache Cassandra, Neo4j, Redis, DynamoDB, HyperTable In fact, there are so many databases now that it gets hard to choose. However, which have descriptions of functionality and use cases. there are lists of best or top databases Why Use a Graph Database? Graph databases are multi-relational by nature opposed to relational databases (SQL). It seems more practical too as data is shown in an intuitive way. Relationships are already stored in the database so no need to calculate. Graph databases can store large quantities, be quick, and support a diversity of current data. If you want to develop a social media app or community app, graph database would be the most reasonable choice. Not only will the database handle a large number of users, but it’ll also form relationships between them. For any app involving social networking, graph database will be suitable. Moreover, graph database is perfect for real-time big data as you can add new nodes and relationships between nodes easily. This doesn’t affect performance though. NoSQL databases and graph databases in particular are better performings as they don’t need to load or touch unrelated data for a given query. The most popular use cases for graph databases: Social Networks Supply Chain Mapping AI Knowledge Graphs/Machine learning Network/Operations Mapping Any type of analytics Recommendations engines in retail Telecommunications apps Data Privacy, Risk, and Compliance Network and IT management Fraud detection Components of Graph Database There are three main components in every graph database: nodes, properties, and edges (or relationships). in simple words are entities or some objects in a domain like users, locations, and things. are added to nodes to add more context. In some cases, . And connect nodes and show a type of connection. Take a look at the image: Nodes Properties edges have properties as well edges Edges or relationships might have values attached. Here it’s “Follows” but there might be more than one value. One more addition are labels which define (classify) what kind of nodes they are (Student and Teacher). So, multiple nodes together form a sort of mind map ecosystem. Neo4j Main Features It wouldn’t be such a popular graph database if it didn’t have unique features. The first thing is that Neo4j is a native graph database. It means that the underlying architecture of how the data is stored . This type of data model is actually a highly connected graph. And when doing a query, in Neo4j you don’t have to index every time you make a hop like in relational databases. isn’t built on top of tables The query language Cypher is pretty straightforward. It's a declarative language where parentheses and relationships represent nodes are arrows and brackets. Below is an example of a Neo4j query. It demonstrates the query of which neighbor games share the most characteristics with the selected (i.e., searched-for) game. The most beautiful part of it is the code: MATCH p=(game:Game)--(characteristic:ConceptEntry)
WHERE game.uid = 'game-borderlands_2' OR game.uid = 'game-fallout_3'
RETURN p Three lines do the impressive work of finding needed data. Popular Graph Databases Now let’s look at graph database examples and their strong sides. is probably the most well-known graph database. It looks . Query language commands are relatively easy to learn. The most important thing about Neo4j is that it clearly represents connected data. Just from the look at it, you’ll understand relationships between many nodes. Neo4j only provides services related to graph database type. It can be said that Neo4j wins in terms of popularity and well-established functionality. Neo4j simple and user-friendly and at the same time powerful is a multitool various types of NoSQL databases. If the project or business demands several databases at the same time, ArrangoDB will be of great help. What’s even more unique about this service, it allows combining SQL and NoSQL in one project. ArangoDB designed specifically to maintain was a database but has overgrown it and now is an ecosystem of tools, libraries extensions, etc. It’s and supports third-party extensions. So, the main difference from others is increased levels of integrations. Some important things are the automation of various processes, GraphQL and its usage possibilities, and continuous development process (yes, it’s still actively developing). It’s newer than the first two so it has a way to go. Apollo highly compatible with Javascript frameworks Sum Up Now that you know that much about graph databases, you can be delighted with powerful data sets. It might be used in industries with high volumes of data and different types of it. Of course, every project is unique and has different business logic. So, weigh both pros and cons of graph databases before choosing. You know now how graph databases work and use cases with them. In software development, there is no final answer to such questions: what database is the best? what programming language is the coolest? The context matters, so choose wisely.

Graph Databases: How Do They work?

Where do you keep your dad jokes? In a of course! Let's imagine that you are a site maintainer for the world's best dad joke database. Your app communicates with the database using a REST API that allows you to retrieve jokes and post ratings for those jokes. Visitors to your site can rate each joke they see via a simple user interface. dadabase Recently you heard of a fancy new technology called GraphQL that provides the flexibility to request only the data that you need using a single API endpoint. It sounds neat, and you'd like to start using it in your app. But, you'd really prefer not to make any breaking changes to the existing REST API. Is it possible to support both the REST API and the GraphQL API in your app? You're about to find out! In this article we'll explore what it takes to implement a GraphQL API on top of an existing REST API. This strategy allows you to start using GraphQL in legacy portions of your app without breaking any existing contracts with functionality that may still rely on the original REST API. If you'd like to see the end result, you can find the and the . Don't forget to as well to groan at some jokes. code for the REST API here code for the frontend and GraphQL API here visit the app The Initial Architecture The app's backend was originally built using and . JSON Server utilizes to provide a full REST API to a mock database generated from a simple JSON file. A separate Express server takes care of serving the static HTML, CSS, and JavaScript assets for the frontend. The frontend is implemented in vanilla JS and uses the browser's built-in to make the API requests. The app is hosted on to make deployment and monitoring a breeze. Node JSON Server Express Fetch API Heroku Our JSON file contains information for a few jokes as well as some ratings. It's reproduced in full below: JSON Server takes that file as a starting point for the database and then implements a REST API that includes support for GET, POST, PUT, PATCH, and DELETE requests. The magic of JSON Server is that using this API really does modify the underlying JSON file, so the database is fully interactive. JSON Server can be started directly from an npm script without any additional setup, but in order to provide a little more configuration and a dynamic port, we can instead write a few lines of code like so: You can test out our mock database by cloning the , running , and then running . If you navigate to you'll see all of the jokes. Navigating to will display all the ratings. repo for the API npm install npm start http://localhost:3000/jokes http://localhost:3000/ratings /jokes API endpoint returns all the jokes when running the app locally Wonderful! We can run our app's backend locally in the browser. Now let's get our API hosted on Heroku. First, we need to . After that, we can log in, create the app, push it to Heroku, and open the new app in our browser in four easy steps: install the Heroku CLI heroku login heroku create dad-joke-dadabase-rest-api git push heroku master heroku open # log in to your Heroku account # create the Heroku app # deploy the code to Heroku # open the Heroku app on your machine And look, now we have a publicly available API out on the web! /jokes API endpoint returns all the jokes when hosting the API on Heroku Building the User Interface Now that we have a working REST API, we can build the frontend to consume that API and display the user interface for viewing and rating jokes. The HTML provides a shell of the page with containers into which the JavaScript will insert content for each joke. The JavaScript is shown below. The key pieces that interact with the REST API are the two fetch requests. The first fetches all of the jokes from the database by hitting the endpoint. The second makes a POST request to the endpoint to submit a new rating for each joke you rate. /jokes?_embed=ratings /ratings Dad joke "dadabase" user interface allows you to rate each joke Setting Up Apollo Server So, that's the existing app architecture: a simple frontend that interacts with the database via a REST API. Now how can we begin using GraphQL? We'll start by installing , which is a package that allows us to use with Express. We'll also install the package to help us integrate the REST API with Apollo Server. Then we'll configure the server by writing the following code: apollo-server-express Apollo Server apollo-datasource-rest As you can see, we configure Apollo Server with type definitions ( ), , and . The contain the for our GraphQL API. In it, we'll define types for our jokes and ratings as well as how to query and mutate them. The tell the server how to handle various queries and mutations and how those link to our . And finally, the outline how the GraphQL API relates to the REST API. typeDefs resolvers dataSources typeDefs schema resolvers data sources dataSources Here are the type definitions for the and types and how to query and mutate them: Joke Rating The jokes data source defines methods for calling the original REST API endpoint to create, read, update, and delete jokes from the database: The ratings data source looks nearly identical, but with "rating" substituted for "joke" in every instance. ( if you'd like to see the code for this.) Refer to the GitHub repo Finally, we set up our resolvers to show how to use the data sources: With that, we have everything in place we need in order to start using our GraphQL API through Apollo Server. To get our new frontend and GraphQL API hosted on Heroku, we'll create and deploy a second app like so: heroku create dad-joke-dadabase git push heroku master heroku open # create the Heroku app # deploy the code to Heroku # open the Heroku app on your machine Replacing the Endpoint to Fetch Jokes You'll recall that we have two endpoints used by the frontend: one to fetch jokes and one to post ratings. Let's swap out the REST API for our GraphQL API when we fetch the jokes. The code previously looked like this: Now to use the GraphQL endpoint, we can write this instead: We can run the app locally now and verify that the user experience still works properly. In fact, from the user's point of view, nothing has changed at all. But if you look at the network requests in your browser's developer tools, you'll see that we're now fetching our jokes from the endpoint. Amazing! /graphql The Network tab shows a request is being made to the /graphql endpoint now Replacing the Endpoint to Submit Ratings One API down, one to go! Let's swap out the ratings submission functionality now. The code to post a new joke rating previously looked like this: To use our GraphQL API, we'll now use the following: A quick test gives us some promising results. Once again, the user experience remains unchanged, but now we're fully using the endpoint for both our requests! /graphql Conclusion We did it! We successfully wrote a GraphQL API endpoint on top of an existing REST API. This allows us to use GraphQL to our heart's content without breaking existing functionality and without modifying the original REST API. Now we can deprecate the REST API or get rid of it completely at a later date. While our dad joke database is entirely fictional, nearly every technology company that existed prior to GraphQL's release in 2015 will find themselves in this same position of migrating to GraphQL if and when they choose to do so. The good news is that Apollo Server is flexible enough to pull data from a variety of sources, including existing REST API endpoints. Previously published at https://codeburst.io/how-to-implement-a-graphql-api-on-top-of-an-existing-rest-api-db8b343ddb5a

How To Connect GraphQL On Top of Existing REST API

A Great Way To Create A Brilliant GraphQL-Powered Blog

Intro For this blog post, I am going to go over how I built my blog site with Strapi and React. I'm going to keep this as short and simple as possible. I followed along with the tutorial from Strapi themselves but there were hiccups along the way that I will address. Also, the tutorial only goes over how to make the blog locally. In this post, I'll explain what I did to deploy it out to the worldwide web. Here is to the Strapi blog post that I followed along with. Overall it was great. It clearly described every step of the process and explained why things were done the way they were. the link Initial hurdles The first small issue I noticed was in their instructions. One of the first commands you have to run is . Before this command is run in the terminal you must ensure you are in the correct directory. Make sure to in your terminal. You make this backend folder in the step before this, they just don't tell you to navigate to the newly created folder before the next step. If you don't do this you will install graphql in the root folder of the project and your backend for the blog will not work. yarn strapi install graphql cd backend Another problem I ran into was how to organize the project for version control. I use VSCode's built-in source control almost 100% of the time for my projects. The way this tutorial gets setup (I'm starting to learn many projects are set up this way), you'll end up with two separate directories for your frontend and backend code. Since the backend was largely already set up for me by Strapi I only committed my frontend code to GitHub. My backend directory also has version control but it is managed through the Heroku CLI. I'm sure there is a better way to manage this, but at the time I was too lazy to look into other options. Especially, when my current setup was working perfectly fine. Lastly, I ran into an issue that I couldn't quite understand while running the frontend locally. Here was the error: Could not find "client" in the context or passed in as an option. Wrap the root component in an <apolloprovider>, or pass an ApolloClient instance in via options Luckily a couple of users had already solved this problem and put it in the comments. Link to comment here. Everything else in the tutorial was pretty self-explanatory though! If I did have any confusion on something Strapi was so kind to add a video to the tutorial which also guided people through the process of creating the blog. I was able to have the blog finished and running locally on my machine pretty quickly. The next step was deploying the blog out to Heroku and Netlify. Deploying to Heroku and Netlify If you haven't used this stack with other projects before, from what I've gathered, Heroku is used to host your backend server and Netlify is used to host the frontend (at least that is what the tutorial recommended). Heroku Strapi has great documentation on how to deploy their backend to Heroku. Quick note, I created a Heroku project for this blog while I was still going through the tutorial. Pro tip: don't do that. The Strapi documentation shows you how to create the Heroku project in your backend folder which is so much easier. But if you took the same route I did, make sure to skip those create Heroku project steps (step 6) in the Strapi Heroku docs and connect to your existing project. Here is the link to that. I used PostgreSQL for this. They also give you an option to use MongoDB. I'm sure both are great, but seemed like the PostgreSQL route was simpler. Other than that the Heroku backend set up was pretty straight forward. Let's get to deploying the frontend. Netlify I think the Netlify set up might have been the easiest part of the project. Like I mentioned above, I had already pushed up my frontend directory to GitHub. All I had to do was make a Netlify account and connect my GitHub repo to my Netlify server (they step you through this process when you make a Netlify account). Just like that my frontend code was being hosted on Netlify, but there was one problem. My Heroku backend wasn't connected to my Netlify frontend. That issue can easily be solved in your file in your frontend directory. Originally, your backend is set to your localhost URL. I think by default in the Strapi tutorial it is . You'll need to change that to the link of your Heroku app you just created. Pro tip: Make sure there is no trailing slash in the URL. For example, your file should have this one line in it: . .env https://localhost:1337 .env REACT_APP_BACKEND_URL="https://*your-app-name*.herokuapp.com" There we go! Now you should have your blog uploaded to the internet for the whole world to see. Next, I'll go over what I'll call an "optional issue". Image upload with Cloudinary Figuring out how to upload an image for a blog post was a real pain. What is the issue you may ask? Here is the answer straight from the Strapi docs: Heroku's file system doesn't support local uploading of files as they will be wiped when Heroku "Cycles" the dyno. This type of file system is called ephemeral, which means the file system only lasts until the dyno is restarted (with Heroku this happens any time you redeploy or during their regular restart which can happen every few hours or every day). Due to Heroku's file system, you will need to use an upload provider such as AWS S3, Cloudinary, or Rackspace. One very easy way to get around this is to simply not add any pictures to your blog posts (this is why I consider this an optional issue). If you do go this route, make sure an image is not a required field in the Strapi admin portal (it was by default when I created my Articles content type). I decided to use Cloudinary, but in hindsight, I think AWS would have been easier. I'm not giving Cloudinary enough credit though. It really wasn't that hard. I was just being stupid. First, you want to head over to the npm package page. This page will show you how to add the Cloudinary provider to your Strapi blog. Strapi Provider for Cloudinary Second, I set up my configuration differently than they recommended. Before I get into what I did, I should disclose that this is probably not a best practice. Instead of using an file for the Cloudinary config variables I just put them in the file statically as strings. Yes, I know. For some reason when I was trying to use environment variables Cloudinary wasn't getting hooked up correctly. Here is a code example of what I did in my file: .env plugins.js backend/config/plugins.js .exports = ({ upload: { : , : { : , : , : ,
    },
  }, }); module ( ) => { env } // ... provider "cloudinary" providerOptions cloud_name "add_cloudinary_name_here" api_key "add_api_key_here" api_secret "add_api_secret_here" // ... Definitely not the best way to solve that problem but it indeed worked. Conclusion See it live here: https://teamtyry.netlify.app/article/2 Overall this was a really fun project. If you're new to coding, this tutorial (along with the video) walks you through the process very well. There may be a couple of hiccups to figure out, but hopefully, this article solves most of them. Like always, peace ✌️ and happy coding!

How to Build a Blog with Strapi, Netlify, and React 👨‍💻

GraphQL has become the most loved tool for API development in a very short span of time, and developers across the world cannot seem to get enough of it. Today I met with the founder of Windsor.io, Pranay Prakash, who has worked on the team behind GraphQL during his time at Facebook. I chatted with him to find out more about his experience working closely with Lee Byron, the creator of GraphQL, and some of GraphQL’s benefits. According to Pranay, when he first came across GraphQL he was intimidated by its wild ideas, but eventually became a huge advocate for it. “REST APIs were pretty much the norm till a few years ago, and I honestly didn’t think we could do much better. Lee and I weren’t on the same team, and we didn’t even work on the same project for a while. I simply sat across from his desk when at Facebook, and knowing who he was and watching his talks in the past, I was pinching myself in shock every day. Over time I began to read some of his code and began asking him questions and pitching him ideas of my own. It took weeks before I got to work with him more closely, and he taught me a lot along the way.” According to Pranay, there are several reasons he never went back to using REST APIs again: Generated Typings and Documentation Because every GraphQL server has a predefined schema, it’s possible to generate a type-safe client for every programming language - this saves you a ton of headache by catching (type-related) errors before code ever gets shipped to production. IDEs can take advantage of the schema to show developers valuable documentation. Static types have been around for decades across popular programming like C++, Java, and Rust. It brought all the same benefits of catching errors before shipping code to production and empowering autocomplete features in IDEs, but those benefits didn’t exist when different systems had to start talking to each other. With microservices being all the rage in the last decade, GraphQL solved that problem and brought the benefits of a type system to networking. N+1 problem (a.k.a over/under-fetching) The major benefit of GraphQL is that we can retrieve the exact data we need from the API. You no longer have to rely on REST endpoints that return a fixed, predefined data structure. GraphQL solves two problems commonly associated with REST APIs: over fetching and under fetching. Over fetching is the retrieval of data that is actually not needed. It drastically reduces performance as it increases the time it takes to download data from the server. Meanwhile, Underfetching is the opposite of over fetching and means that not enough data is included in an API response and the client needs to make follow up requests to get the necessary data. This results in the infamous N+1-request problem, a situation where an endpoint returns a list of n items, but follow up requests have to be made for each of those items to get any useful data. “Take, for instance, an app that only wants the name for a given user. A traditional REST implementation would include a `/profile` endpoint would fetch and return plenty more data for the user than required. One solution to this problem is where an API can return a small profile object along with links to fetch more data about the user, for example, what groups they belong to, or their friends.  However, this means that when you actually do need that data in a different part of the app, you need to make additional requests/round-trips. You need to fetch the user, and then follow up by making extra fetches to get the name of each of their groups, or the profiles for each of their friends. GraphQL solves all this by letting the app specify precisely what data they want, allowing the server to decide how best to query just that without any additional overheads” said Pranay, who has been using GraphQL to solve problems just like this for more than 3 years. API management and versioning For every new use case/feature on an app, we usually have to create several new REST API endpoints. Some of these can sometimes be so specific to the new feature that they just return the same data as a previous endpoint but in a different format or with a few changes. Over time this becomes a mess to handle, and we tend to create new “versions” of an API, where we can use a single endpoint that returns a uniform data object, useful for more than one feature. The larger the app, there are more endpoints and versions to manage, which just makes the problem worse. “Getting rid of old versions isn’t easy either because people may be running an early version of an app that relies on an old data format, and so the problem of maintenance just gets worse” said the 22-year-old innovator and entrepreneur. According to Pranay, when the data and its relations are represented as a graph, it facilitates numerous applications and features since it’s easy to simply add new fields to an existing data type, or new connections (edges) within the graph which enables new features without breaking any existing code. Older apps can just continue requesting data in the old format, and the latest version of the GraphQL API can support it without any hiccups. A pleasant developer experience that enables rapid prototyping Pranay, who has developed numerous APIs over the years using GraphQL, both at Facebook, and at his startup Windsor.io, stated that GraphQL makes the life of  a frontend developer much easier. “Thanks to GraphQL client libraries (like Apollo, Relay, or Urql), frontend developers are getting features like caching, batching, realtime and optimistic UI updates basically for free — features which have required entire teams dedicated to working on, and maintaining them in the past” “We are product people — and we designed the API that we wanted to use to build products based on lessons from years of experience,” said Pranay, whose own startup Windsor.io uses API to track and collect consumer data for analytics to help businesses, especially early-stage startups, understand their customers’ buying behavior. Such platforms using GraphQL like his can be used by teams to improve their product and provide the highest quality customer service.

Is GraphQL Still a Thing in 2020?

Implementing a good GraphQL backend to serve your database data is not an easy task, you have to implement a lot of resolvers, add authorization, pagination of the fields and use a DataLoader to not repeat your database queries during relations. It also becomes boring after some time, especially if you do a lot of side projects with the same stack like me, you have to implement the same basically service for every project. But i am super lazy and i wanted a reusable, fast way to build my graphql backend, so i built (https://github.com/remorses/mongoke) mongoke Mongoke is a docker image that generates the GraphQL API to serve your Mongodb data. It can be used directly from the frontend as it supports authorization via your , it also can be composed with other services using (so for example you can handle the mutations in a different service). jwt Apollo Federation Let's create an example, a basic blog app with 2 collections: users and posts schema: |
    type User { _id: ObjectId username: String email: String } type BlogPost { _id: ObjectId author_id: ObjectId title: String content: String } types: User: collection: users BlogPost: collection: posts relations: -   field: posts from: User to: BlogPost relation_type: to_many where: author_id: ${{ parent['_id'] }} Here i defined the database schema with the User and BlogPost types, then i defined the associations between the types and the collections and finally i defined a to_many relation from User to BlogPost. To deploy the above configuration we can use docker-compose # docker-compose.yml version: '3' services: mongoke: ports: - 4000 :80 image: mongoke/mongoke environment: DB_URL: mongodb://mongo/db volumes: - ./mongoke.yml:/conf.yml mongo: image: mongo logging: driver: none The mongoke service generates the boilerplate code every time the service starts, you can go to http://localhost:4000/graphiql to open graphiql. An example query you can make: {
    user( {username: {eq: }}) {
        _id
        username
        email
        posts {
            nodes {
                title
            }
        }
    }

    blogPosts( , after: , cursorField: title) {
        nodes {
            title
            content
        }
        pageInfo {
            endCursor
            hasNextPage
        }
    }
} where: "Mike" first: 10 "Post 1" Give me your thoughts in the comments and leave a star on , thanks for reading! github

Instant GraphQL + MongoDB Backend With Mongoke

GraphQL subscriptions are the key part of our environment because it allows using the same schema/query based concept but with live WebSocket updates over multiple UI components. Especially considering our use-case for UI <> API communication at , some of our website analysis tools can give a response with a partial data or it could take a significant amount of time. Using WebSockets allows us to send data to UI whenever our tools are ready to respond. Hexometer.com Besides UI convenience, there is actually a lot of benefits in having Queue + PubSub based system to handle user requests, because everything operates in an async way, without spinning up new service or allocating more resources to process every request. However, of course, there are some downsides, specifically managing WebSocket connections could require a lot more resources than a standard request-response cycle. Our Base Setup All requests to our infrastructure are passing through our Nginx instance, which then makes a proxy to a specific service based on request. The same happens with our Node.js API instance, which handles GraphQL Websocket subscriptions over our Apollo Server. Based on this structure and our benchmarks, each WebSocket connection on average takes about 4Kb memory, which is not a big deal, but if you calculate how many live connections and active website analysis we are doing, keeping live WebSockets connections gets more and more expensive. The main problem with WebSockets is that resource usage grows exponentially, and it is very hard to predict how to match it will grow over time. Sometimes Node.js isn’t freeing up memory when a connection is closed because there is a specific timeout option by default. Apollo Server setup Generally, we don’t have any custom stuff here, it is a basic Apollo Server with some middleware to handle connection, validate or pass authentication process over it. We use `cors` module to be able to keep our API endpoint as a subdomain and access it from multiple UI projects. server = ApolloServer({ : Resolvers,
  typeDefs, : ({ req }) => { }, : { : , : (
      connectionParams: ConnectionParamsObject,
      websocket,
      context
    ) => { }, : { }, : }
}); app = express();
app.use(cors());
server.applyMiddleware({ app, : , : }); httpServer = http.createServer(app);
server.installSubscriptionHandlers(httpServer); port = process.env.HEXOMETER_PORT || ;

httpServer.listen({ port }, () => { .log( ); .log( );
}); const new resolvers context async // Authentication and Connection validation goes here subscriptions keepAlive 1000 onConnect async // Handling connection context here onDisconnect ( ) => websocket, context // console.log("WS Disconnected! -> ", JSON.stringify(context)); path '/api/ws' const path '/api/ql' cors false const const 4000 console `🚀 Server ready at http://localhost: ` ${port} ${server.graphqlPath} console `🚀 Subscriptions ready at ws://localhost: ` ${port} ${
      server.subscriptionsPath
    } As you may notice we use an `express` to make a basic routing and connect over Apollo Server, but, it is just for having some routing if we will need an external REST Endpoint (just in case). Otherwise we are using only GraphQL based queries, mutations and subscriptions across all our apps. Even if we need to make a request from other services to our main API we are making a basic HTTP Request with a GraphQL query body, it's just that simple to follow the rules :) GraphQL Subscriptions The main concept behind GraphQL subscriptions is to send a specific type based subscription request, and keep infinite async iterator alive, which allows sending back to UI messages whenever we need from our API endpoint. For making all that process we are using our custom-built PubSub library very similar to what Apollo Server is giving by default. { PubSub } ;
....
export pubsub = PubSub();
....

async subscribeResolver(parent: , : , : GrqphqlContext) { pubsub.asyncIterator(topic);
}

.... pubsub.publish(topic, data); import from 'apollo-server-express' const new Object args Object context return // After some specific events, we can publish to that asyncIterator // Which will send Websocket message to UI and will try to get another async iterator message The cool part of this process is that with GraphQL subscriptions you have to have an async iterator to get published messages on UI, otherwise it is the same as having a basic Query type. As you can imagine each PubSub topic as a Queue which operates in a “First In, First Out” concept, and it’s actually shared across all customers. At first, we’ve been making new PubSub object for every subscription, BUT it ended up taking a lot of resources because each topic allocates specific memory size and it frees up ONLY when you manually handling connection close and cleaning up that specific topic queue. We basically wrapped default PubSub class and now, whenever Websocket connection closes, and async iterator stops iterating, it destroys itself automatically. And the cool part is that we now making single PubSub objects across the entire service, but for each customer, we are making a separate topic, which allowed us to pass global pubsub objects across multiple modules and send objects to UI without even having that functionality for the specific module. 1M WebSocket issue If you can imagine what it means to actually have 1M live WebSocket connections, you will get an idea that it just requires a lot of resources, which is quite hard to scale automatically, even tho we have all our infrastructure on Google Cloud Kubernetes. Core concepts of Live TCP connection are that it requires open file/socket allocated memory for IO buffers CPU cycles to manage data flow events all of the points are super limited by OS itself. Of course, it depends on your application performance as well, but if you have everything as we did (basic, default way), then your main limitations or performance issues are actually coming from these 3 limitations. For example, if you will spin up Apache Server as the main Websocket handler instead of Nginx, you will probably get a huge headache, because Apache is not async and will take up a lot of resources to keep the single connection alive. So choosing Load Balancing software is crucial, and you actually can’t go without having a Load Balancer, because in any case, you will want to scale your API instance from one to multiple, that’s just the nature of having microservices. Nginx actually is a lot cheaper in resource usage compared to other software load balancers, however, there is some specific tuning that we had to do in other to make it more reliable with WebSocket connections. auto; { ; ; ;
}

.... {
     ...... . ; Connection ; Upgrade ; ; }
.... worker_processes events use epoll # Using OS's base Event Loop for IO operations worker_connections 1024 multi_accept on location '/ws' proxy_http_version 1 1 proxy_set_header $connection_upgrade proxy_set_header $http_upgrade proxy_read_timeout 999950s # Just a large number to wait for data The most important part here is to add use configuration, which means that Nginx will maintain all connections over base Linux Epoll event loop system managing entire IO for all hardware drivers. That 2 words actually dropped our CPU and Memory usage by 4-5 times, because after that Nginx wasn't maintaining data buffering for specific sockets, that's done by OS Epoll itself, which then transferred buffer and socket state to Nginx with a basic Event principle. epoll Why WebSockets is not so popular? I think the reason that most of the companies still using basic HTTP requests were that they think it is hard to maintain. However, using GraphQL Subscriptions, it is completely abstracted away, and the developer actually doesn’t feel any difference, because it is the same GraphQL Types and same resolvers. The only difference is that developers should understand base concepts of having a PubSub system and that all messages/data flow passing over Queue principle (First In, First Out). It is actually possible to connect GraphQL Subscriptions PubSub to Redis or any other Queue (DB) system, but it just depends on the specific use-case. We are continuing to move more and more stuff from basic Queries to Subscriptions to provide more interactive UI to our users, but I’ll agree that it is not going to replace standard Request Response entirely. We are continuing to move more and more stuff from basic Queries to Subscriptions to provide more interactive UI to our users, but I'll agree that it is not going to replace standard Request Response entirely.

Stories, News & Mentions about APOLLO

Apollo’s Stories on HackerNoon

Apollo's News & Mentions