London React August - GraphQL at The Financial Times - Viktor CharyparReact London Community
Recently released by Facebook, GraphQL isn't only useful for client-server communication. Viktor will show how Red Badger used the reference implementation - graphql-js - at the Financial Times as a generic data presentation layer over a set of backend APIs and how to deal with related requirements like caching or authorisation.
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)Hafiz Ismail
Talk for FOSSASIA 2016 (http://2016.fossasia.org)
----
This talk will give a brief and enlightening look into how GraphQL can help you address common weaknesses that you, as a web / mobile developer, would normally face with using / building typical REST API systems.
Let's stop fighting about whether we should implement the strictest interpretation of REST or how pragmatic REST-ful design is the only way to go, or debate about what REST is or what it should be.
A couple of demos (In Golang! Yay!) will be shown that are guaranteed to open up your eyes and see that the dawn of liberation for product developers is finally here.
Background: GraphQL is a data query language and runtime designed and used at Facebook to request and deliver data to mobile and web apps since 2012.
Hafiz Ismail (@sogko) is a contributor to Go / Golang implementation of GraphQL server library (https://github.com/graphql-go/graphql) and is looking to encourage fellow developers to join in the collaborative effort.
GraphQL is an application layer query language from Facebook. With GraphQL, you can define your backend as a well-defined graph-based schema. Then client applications can query your dataset as they are needed. GraphQL’s power comes from a simple idea — instead of defining the structure of responses on the server, the flexibility is given to the client. Will GraphQL do to REST what REST did to SOAP?
London React August - GraphQL at The Financial Times - Viktor CharyparReact London Community
Recently released by Facebook, GraphQL isn't only useful for client-server communication. Viktor will show how Red Badger used the reference implementation - graphql-js - at the Financial Times as a generic data presentation layer over a set of backend APIs and how to deal with related requirements like caching or authorisation.
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)Hafiz Ismail
Talk for FOSSASIA 2016 (http://2016.fossasia.org)
----
This talk will give a brief and enlightening look into how GraphQL can help you address common weaknesses that you, as a web / mobile developer, would normally face with using / building typical REST API systems.
Let's stop fighting about whether we should implement the strictest interpretation of REST or how pragmatic REST-ful design is the only way to go, or debate about what REST is or what it should be.
A couple of demos (In Golang! Yay!) will be shown that are guaranteed to open up your eyes and see that the dawn of liberation for product developers is finally here.
Background: GraphQL is a data query language and runtime designed and used at Facebook to request and deliver data to mobile and web apps since 2012.
Hafiz Ismail (@sogko) is a contributor to Go / Golang implementation of GraphQL server library (https://github.com/graphql-go/graphql) and is looking to encourage fellow developers to join in the collaborative effort.
GraphQL is an application layer query language from Facebook. With GraphQL, you can define your backend as a well-defined graph-based schema. Then client applications can query your dataset as they are needed. GraphQL’s power comes from a simple idea — instead of defining the structure of responses on the server, the flexibility is given to the client. Will GraphQL do to REST what REST did to SOAP?
Graph ql vs rest api - Seven Peaks Software (Node.JS Meetup 18 nov 2021)Seven Peaks Speaks
Georgii, our Senior full-stack developer, has over 12 years of experience working on both sides of web applications on the front-end and back-end.
Georgii was walk you through on GraphQL VS Rest API on our last Node.JS Meetup. There are several ways to create backend APIs. REST is the most common choice but it has some limitations. It’s where GraphQL comes as an alternative to REST.
For more info about Seven Peaks Software:
https://lnkd.in/g2jMsDy
Overview of GraphQL
How it is different from REST
When you should consider using it and when you should not
Incremental demos until calling GraphQL from an React application: https://github.com/bary822/graphQL-techtalk
In this presentation, Suraj Kumar Paul of Valuebound has walked us through GraphQL. Founded by Facebook in 2012, GraphQL is a data query language that provides an alternative to REST and web service architectures.
Here he has discussed core ideas of GraphQL, limitations of RESTful APIs, operations, arguments, fragmentation, variables, mutations etc.
----------------------------------------------------------
Get Socialistic
Our website: http://valuebound.com/
LinkedIn: http://bit.ly/2eKgdux
Facebook: https://www.facebook.com/valuebound/
GraphQL is a query language for APIs and a runtime for fulfilling those queries. It gives clients the power to ask for exactly what they need, which makes it a great fit for modern web and mobile apps. In this talk, we explain why GraphQL was created, introduce you to the syntax and behavior, and then show how to use it to build powerful APIs for your data. We will also introduce you to AWS AppSync, a GraphQL-powered serverless backend for apps, which you can use to host GraphQL APIs and also add real-time and offline capabilities to your web and mobile apps. You can follow along if you have an AWS account – no GraphQL experience required!
Level: Beginner
Speaker: Rohan Deshpande - Sr. Software Dev Engineer, AWS Mobile Applications
In this talk, I go over some of the concerns people initially have when adding GraphQL to their existing frontends and backends, and cover some of the tools that can be used to address them.
by Richard Threlkeld, Sr. Product Manager, AWS
Most applications are data-driven and our app is no exception to that. However, mobile development has some unique problems to be solved. In this session, we’ll introduce you to GraphQL – the latest in mobile-centric data access protocols – and show you how GraphQL can help with these problems.
GraphQL across the stack: How everything fits togetherSashko Stubailo
My talk from GraphQL Summit 2017!
In this talk, I talk about a future for GraphQL which builds on the idea that GraphQL enables lots of tools to work together seamlessly across the stack. I present this through the lens of 3 examples: Caching, performance tracing, and schema stitching.
Stay tuned for the video recording from GraphQL Summit!
Graph ql vs rest api - Seven Peaks Software (Node.JS Meetup 18 nov 2021)Seven Peaks Speaks
Georgii, our Senior full-stack developer, has over 12 years of experience working on both sides of web applications on the front-end and back-end.
Georgii was walk you through on GraphQL VS Rest API on our last Node.JS Meetup. There are several ways to create backend APIs. REST is the most common choice but it has some limitations. It’s where GraphQL comes as an alternative to REST.
For more info about Seven Peaks Software:
https://lnkd.in/g2jMsDy
Overview of GraphQL
How it is different from REST
When you should consider using it and when you should not
Incremental demos until calling GraphQL from an React application: https://github.com/bary822/graphQL-techtalk
In this presentation, Suraj Kumar Paul of Valuebound has walked us through GraphQL. Founded by Facebook in 2012, GraphQL is a data query language that provides an alternative to REST and web service architectures.
Here he has discussed core ideas of GraphQL, limitations of RESTful APIs, operations, arguments, fragmentation, variables, mutations etc.
----------------------------------------------------------
Get Socialistic
Our website: http://valuebound.com/
LinkedIn: http://bit.ly/2eKgdux
Facebook: https://www.facebook.com/valuebound/
GraphQL is a query language for APIs and a runtime for fulfilling those queries. It gives clients the power to ask for exactly what they need, which makes it a great fit for modern web and mobile apps. In this talk, we explain why GraphQL was created, introduce you to the syntax and behavior, and then show how to use it to build powerful APIs for your data. We will also introduce you to AWS AppSync, a GraphQL-powered serverless backend for apps, which you can use to host GraphQL APIs and also add real-time and offline capabilities to your web and mobile apps. You can follow along if you have an AWS account – no GraphQL experience required!
Level: Beginner
Speaker: Rohan Deshpande - Sr. Software Dev Engineer, AWS Mobile Applications
In this talk, I go over some of the concerns people initially have when adding GraphQL to their existing frontends and backends, and cover some of the tools that can be used to address them.
by Richard Threlkeld, Sr. Product Manager, AWS
Most applications are data-driven and our app is no exception to that. However, mobile development has some unique problems to be solved. In this session, we’ll introduce you to GraphQL – the latest in mobile-centric data access protocols – and show you how GraphQL can help with these problems.
GraphQL across the stack: How everything fits togetherSashko Stubailo
My talk from GraphQL Summit 2017!
In this talk, I talk about a future for GraphQL which builds on the idea that GraphQL enables lots of tools to work together seamlessly across the stack. I present this through the lens of 3 examples: Caching, performance tracing, and schema stitching.
Stay tuned for the video recording from GraphQL Summit!
Moje slajdy z prezentacji na GraphQL Wroclaw #3 https://www.meetup.com/GraphQL-Wroclaw/events/261828347/
Większość prezentacji dotyczących GraphQL opowiada o JavaSkryptowych narzędziach, natomiast mało kto mówi o tym jak korzystać z GraphQL w Javie. Prezentacja będzie o tym, jak sprawić aby nasz backendowy, Javowy serwer korzystał z GraphQL. Będzie o możliwych podejściach w implementacji, dobrych praktykach i 4-letnim doświadczeniu z GraphQL na produkcji.
JavaScript client API for Google Apps Script API primerBruce McPherson
An API for JavaScript/jQuery client webapps providing CRUD access to Google Apps Script scriptDB - a free noSQL databases. This adds to a VBA API for Excel already published. Now Excel, Google Apps Script and JavaScript clients can share the same noSQL database and data.
Simplify Access to Data from Pivotal GemFire Using the GraphQL (G2QL) ExtensionVMware Tanzu
GemFire GraphQL (G2QL) is an extension that adds a new query language for your Apache Geode™ or Pivotal GemFire clusters allowing developers to build web and mobile applications using any standard GraphQL libraries. G2QL provides an out-of-the-box experience by defining GraphQL schema through introspection. It can be deployed to any GemFire cluster and serves a GraphQL endpoint from an embedded jetty server, just like GemFire’s REST endpoint.
We will be demoing G2QL using a sample application that can read and write data to GemFire and share data between applications built using GemFire client APIs, showing you:
- How to use GraphQL to query and mutate data in GemFire
- How to use open-source GraphQL library to build web and mobile applications using GemFire
- How to use GraphQL to deal with object graphs
- How G2QL can simplify their overall architecture
Presenters : Sai Boorlagadda, Staff Software Engineer & Jagdish Mirani, Pivotal
Flask and Angular: An approach to build robust platformsAyush Sharma
AngularJS is a really powerful and extensible Javascript library that can be used for all number of applications. The team that up with Flask and you've got a great power and maintainability.
Codepot - Pig i Hive: szybkie wprowadzenie / Pig and Hive crash courseSages
Szybkie wprowadzenie do technologii Pig i Hive z ekosystemu Hadoop. Prezentacja wykonana w ramach warsztatów Codepot w dniu 29.08.2015. Prezentacja wykonana przez Radosława Stankiewicza oraz Bartłomieja Tartanusa.
Nikita Galkin "Looking for the right tech stack for GraphQL application"Fwdays
У рамках доповіді ми будемо говорити про реалізації серверної частини GraphQL додатку. Тобто доповідь орієнтована в першу чергу на Node.js розробників. Проте концепції з доповіді можуть бути реалізовані на інших серверних платформах. Ми обговоримо такі питання та варіанти їх вирішення:
дублювання в GraphQL схемі та коді, а так же ризик їх розсинхронізації;
тестування та версіонування GraphQL схеми й додатку;
авторизація та перевірка прав доступа до полів та мутаторів;
продуктивність;
підписки;
реалізація фронтенд компонентів з GraphQL як джерелом даних.
Для слухачів, які не мають досвіду з GraphQL рекомендується ознайомитися з інформацією .
Gen Z and the marketplaces - let's translate their needsLaura Szabó
The product workshop focused on exploring the requirements of Generation Z in relation to marketplace dynamics. We delved into their specific needs, examined the specifics in their shopping preferences, and analyzed their preferred methods for accessing information and making purchases within a marketplace. Through the study of real-life cases , we tried to gain valuable insights into enhancing the marketplace experience for Generation Z.
The workshop was held on the DMA Conference in Vienna June 2024.
Italy Agriculture Equipment Market Outlook to 2027harveenkaur52
Agriculture and Animal Care
Ken Research has an expertise in Agriculture and Animal Care sector and offer vast collection of information related to all major aspects such as Agriculture equipment, Crop Protection, Seed, Agriculture Chemical, Fertilizers, Protected Cultivators, Palm Oil, Hybrid Seed, Animal Feed additives and many more.
Our continuous study and findings in agriculture sector provide better insights to companies dealing with related product and services, government and agriculture associations, researchers and students to well understand the present and expected scenario.
Our Animal care category provides solutions on Animal Healthcare and related products and services, including, animal feed additives, vaccination
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfFlorence Consulting
Quattordicesimo Meetup di Milano, tenutosi a Milano il 23 Maggio 2024 dalle ore 17:00 alle ore 18:30 in presenza e da remoto.
Abbiamo parlato di come Axpo Italia S.p.A. ha ridotto il technical debt migrando le proprie APIs da Mule 3.9 a Mule 4.4 passando anche da on-premises a CloudHub 1.0.
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBrad Spiegel Macon GA
Brad Spiegel Macon GA’s journey exemplifies the profound impact that one individual can have on their community. Through his unwavering dedication to digital inclusion, he’s not only bridging the gap in Macon but also setting an example for others to follow.
Instagram has become one of the most popular social media platforms, allowing people to share photos, videos, and stories with their followers. Sometimes, though, you might want to view someone's story without them knowing.
2. Problems with REST API
GET id -------------------> data
GET id2 -------------------> more data
GET data.id ------------------> even more data
3. Multiple Round Trips
● In order to descent into the object graph, multiple
round trips to the server are required.
● Critical for Mobile Environment
7. Graph Application Layer Query Language
(not Storage Query Language)
“A better solution that can replace restful server and mvc framework”
8. Basically JSON without the values
No custom endpoints
Clients ask exactly what they want
person:{ name:, address: }
Graph QL
9. ● User-defined type system - “schema”
● Server describes what data is available
● Clients describe what data they require
● User-defined data fetching (“how do I get an article”)
● Front end request independent to backend
How Graph QL
Works
10. GraphQL has a type system
Three main “types” required to get an
endpoint up and running.
1. A type for the model
2. A type for the query
3. A type for the schema
In reality, it is more complex than this.
(forget about it for now)
12. Model Type
Model Type is pretty much a mirror image
of each Goldberg in our goldbergs data
--------->
var goldbergType = new GraphQLObjectType({
name: "Goldberg",
description: "Member of The Goldbergs",
fields: {
character: {
type: GraphQLString,
description: "Name of the character",
},
actor: {
type: GraphQLString,
description: "Actor playing the character",
},
role: {
type: GraphQLString,
description: "Family role"
},
traits: {
type: GraphQLString,
description: "Traits this Goldberg is known for"
},
id: {
type: GraphQLInt,
description: "ID of this Goldberg"
}
}
});
1. Create a new instance of GraphQLObjectType, “Goldberg”
2. Under “fields”: Each “type” indicates the type expected
(e.g. string (GraphQLString) for character, int (GraphInt) for id.)
3. “description” fields are good for self-documentation
13. Query Type
The query type tells how we will query
our data
var queryType = new GraphQLObjectType({
name: "query",
description: "Goldberg query",
fields: {
goldberg: {
type: goldbergType,
args: {
id: {
type: GraphQLInt
}
},
resolve: function(_, args){
return getGoldberg(args.id)
}
}
}
});
function getGoldberg(id) {
return goldbergs[id]
}
1. Query Type is an instance of GraphQLObjectType, it just serves
a different purpose.
2. Create a new query field called goldberg and set its “type” to the
goldbergType we created earlier. Our new goldberg field will accept
an id as an assignment.
3. When we resolve our query we return the output of a function
getGoldberg()
14. Schema Type
Schema type combines them all together.
/* creating schema instance */
var schema = new GraphQLSchema({
query: queryType
});
/* serve our schema */
var graphQLServer = express();
graphQLServer.use('/', graphqlHTTP({ schema: schema,
graphiql: true }));
graphQLServer.listen(8080);
console.log("The GraphQL Server is running.")
15. {
goldberg ( id : 2 ) {
id,
character
}
}
{
“data” : {
“goldberg” : {
“id” : 2,
“character” : “Murray Goldberg”
}
}
Let’s Test
Go to GraphiQL IDE and test it yourself.
(GraphiQL IDE is just like postman of RESTful API for GraphQL)
16. React and
Redux
Let’s delete the “hello world” from
static/index.html and add a new message
using React in index.js:
| -- app
| -- actions
| -- components
| -- reducers
In the “reducers” folder we’ll create a new
file called reducer.js where we’ll work on
our reducer function.
import React from "react";
import ReactDOM from "react-dom";
const Main = React.createClass({
render: () => {
return (
<div>
<p>hello react!</p>
</div>
)
}
});
ReactDOM.render(
<Main />,
document.getElementById("example")
);
17. React and
Redux
We’ll be using the Immutable module for
our state so that we can form some good
habits.
Our state has two fields — one to let us
know if we are in the middle of a
query/awaiting a response from the server
and another that contains the response
data.
Next we plug our immutableState into a
reducer function:
import Immutable from "immutable";
const immutableState = Immutable.Map({
fetching: false,
data: Immutable.Map({})
})
--------------------------------------------------
export const queryReducer = (state = immutableState,
action) => {
switch (action.type) {
case "STARTING_REQUEST":
return state.set("fetching", true);
case "FINISHED_REQUEST":
return state.set("fetching", false)
.set("data",
Immutable.Map(action.response.data.goldberg));
default:
return state
}
}
18. Store
Back in index.js we want to create a store
out of our reducer and feed it to our main
component.
We’ll need to import the reducer we just
created along with some helpers from
redux and react-redux.
We also need the redux-thunk middleware
to help us later on when we need to make
some requests.
import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import { queryReducer } from
"./app/reducers/reducers.js";
import thunkMiddleware from "redux-thunk";
/* First, we apply the redux-thunk middleware:*/
const createStoreWithMiddleware = applyMiddleware(
thunkMiddleware
)(createStore)
/* Then we wrap our Main component in the Redux
Provider and pass our queryReducer into
createStoreWithMiddleware.*/
ReactDOM.render(
<Provider
store={createStoreWithMiddleware(queryReducer)}>
<Main />
</Provider>,
document.getElementById("example")
);
19. Actions
In the “actions” folder we’ll create a new
file called actions.js.
We need to create two actions to dispatch
to our reducer,
one for “STARTING_REQUEST”
and one for “FINISHED_REQUEST”:
const startingRequest = () => {
return {
type: "STARTING_REQUEST"
}
}
const finishedRequest = (response) => {
return {
type: "FINISHED_REQUEST",
response: response
}
}
20. Actions
The great thing about the redux-thunk
middleware we applied to our store earlier
is that when an action returns a function
that function is injected with dispatch().
We’ll get to use dispatch() twice in a new
action called getGraph:
When getGraph() is called we dispatch
startingRequest() to indicate the start of a
new query. We then begin the async
request (note the “application/graphql”
content type in the header) and when our
query is complete we dispatch
finishedRequest() with the results of our
query.
export const getGraph = (payload) => {
return dispatch => {
dispatch(startingRequest());
return new Promise(function(resolve, reject) {
let request=new XMLHttpRequest();
request.open("POST", "/graphql", true);
request.setRequestHeader("Content-Type",
"application/graphql");
request.send(payload);
request.onreadystatechange = () => {
if (request.readyState === 4) {
resolve(request.responseText)
}
}
}).then(response =>
dispatch(finishedRequest(JSON.parse(response))))
}
}
21. Component
For now we’ll create an empty Query
component:
We need to hook up our component with
our store and the dispatch method by
creating a container component and using
the react-redux connect() helper.
import React from ‘react’;
import { connect } from ‘react-redux’;
import { getGraph } from ‘../actions/actions.js’;
let Query = React.createClass({
render() {
return (
<div>
</div>
)
}
});
const mapStateToProps = (state) => {
return {
store: state
}
};
export const QueryContainer = connect(
mapStateToProps
)(Query);
let Query = React.createClass({
componentDidMount() {
this.props.dispatch(
getGraph("{goldberg(id: 2) {id, character, actor}}")
);
}
});
22. Component
We’ll also add the elements that our
response data will fill and a button to
submit additional queries. We want to
know if we are in the middle of a query so
we’ll grab our fetching field from our state
and display it on the page.
let Query = React.createClass({
componentDidMount() {
this.props.dispatch(
getGraph("{goldberg(id: 2) {id, character, actor}}")
);
},
render() {
let dispatch = this.props.dispatch;
let fetchInProgress =
String(this.props.store.get('fetching'));
let queryText;
let goldberg = this.props.store.get('data').toObject();
return (
<div>
<p>Fetch in progress: {fetchInProgress}</p>
<h3>{ goldberg.character }</h3>
<p>{ goldberg.actor }</p>
<p>{ goldberg.role }</p>
<p>{ goldberg.traits }</p>
<input ref={node => {queryText = node}}></input>
<button onClick={() => {
dispatch(getGraph(queryText.value))}
}>
query
</button>
</div>
)
}
});
23. Component
With that done, the last thing we have to
do is plug our QueryContainer component
into our Main component.
In index.js:
import { QueryContainer } from “./app/components/Query.js”;
// And replace “hello react!”
const Main = () => {
return (
<div>
<QueryContainer />
</div>
)
};