slides.com/gerardsans | @gerardsans
Spoken at 48 events in 17 countries
900
1K
npm install --global graphcool graphcool init
graphcool push graphcool console
source: blog
// webpack.dist.config.js
module.exports = {
module: {
loaders: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
]
}
};
// src/graphql/Questions.query.gql
#import "./Question.fragment.gql"
query questions {
allQuestions {
...question
}
}
// src/graphql/CreateQuestion.mutation.gql
#import "./Question.fragment.gql"
mutation addQuestion($body: String!, $user: ID!) {
createQuestion(body: $body, userId: $user) {
...question
}
}
// src/graphql/Question.fragment.gql
fragment question on Question {
id
body
createdAt
_votesMeta { count }
user { id username pictureUrl flagged }
flagged
}
// client.js
import ApolloClient, { createNetworkInterface } from 'apollo-client'
const networkInterface = createNetworkInterface({
uri: 'https://api.graph.cool',
dataIdFromObject: record => record.id, // will be used by caching
})
export const client = new ApolloClient({ networkInterface })
// app.js
import { ApolloProvider } from 'react-apollo'
let combinedReducer = combineReducers({
filter,
apollo: client.reducer(),
})
const store = compose(
applyMiddleware(client.middleware())
)(createStore)(combinedReducer)
render(
<ApolloProvider store={store} client={client}>
<App />
</ApolloProvider>,
document.getElementById('root')
)
schema {
query: Query,
mutation: Mutation
}
type Query {
allQuestions(skip: Int, take: Int): [Question!]!
}
type Mutation {
createQuestion(body: String!): Question
}
// List.js
import { graphql } from 'react-apollo'
import gql from 'graphql-tag'
const withQuestions = graphql(
gql`query questions {
allQuestion {
id body
}
}`, {
props: ({ ownProps, data }) => {
if (data.loading) return { userLoading: true }
if (data.error) return { hasErrors: true }
return {
list: data.allQuestions,
}
}
})
// App.js
const withAddQuestion = graphql(
gql`mutation addQuestion($body: String!) {
createQuestion(body: $body) {
id body
}
}`,
{
props: ({ ownProps, mutate }) => ({
addQuestion(text) {
return mutate({
variables: { body: text },
updateQueries: {
todos: (state, { mutationResult }) => {
return {
allQuestions: [...state.allQuestions,
mutationResult.data.createQuestion
],
}
...
source: blog
// client.ts
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'
const wsClient = new SubscriptionClient('wss://subscriptions.graph.cool/v1', {
reconnect: true,
})
const networkInterface = ...
const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
networkInterface,
wsClient
)
export const client = new ApolloClient({
networkInterface: networkInterfaceWithSubscriptions,
})
schema {
query: Query,
mutation: Mutation,
subscription: Subscription
}
type Subscription {
Question(filter: {
mutation_in: [CREATED]
}) {
node {
id
body
}
}
}
// QuestionList.js
const withSubscription = graphql(QUESTIONS_QUERY,
{
props: ({ data: { subscribeToMore } }) => ({
subscribeToNewQuestions() {
return subscribeToMore({
document: QUESTIONS_SUBSCRIPTION,
updateQuery: (state, { subscriptionData }) => {
const newQuestion = subscriptionData.data.Question.node
if (!isDuplicate(newQuestion.id, state.allQuestions)) {
return update(state, {
allQuestions: {
$push: [newQuestion],
},
})
}
},
})
},
}),
},
)
gsans/handsup-react