Skip to content

Instantly share code, notes, and snippets.

View peggyrayzis's full-sized avatar
🚀
GraphQL all the things

Peggy Rayzis peggyrayzis

🚀
GraphQL all the things
View GitHub Profile
@peggyrayzis
peggyrayzis / server.js
Created May 2, 2018 21:11
Apollo Server 2.0
const { ApolloServer, gql } = require('apollo-server');
// Construct a schema, using GraphQL schema language
const typeDefs = gql`
type Query {
hello: String
}
`;
// Provide resolver functions for your schema fields
@peggyrayzis
peggyrayzis / filter-link.js
Created March 22, 2018 18:23
ApolloConsumer
@peggyrayzis
peggyrayzis / todos.js
Created March 22, 2018 18:16
RA 2.1 Query component
import React from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
const GET_TODOS = gql`
{
todos {
id
type
}
@peggyrayzis
peggyrayzis / update-todo.js
Created March 22, 2018 18:13
RA 2.1 mutation
import React from "react";
import { Mutation } from "react-apollo";
import gql from "graphql-tag";
const TOGGLE_TODO = gql`
mutation ToggleTodo($id: Int!) {
toggleTodo(id: $id) {
id
completed
}
@peggyrayzis
peggyrayzis / dogs.js
Created March 22, 2018 18:00
RA 2.1 Query component
import React from "react";
import gql from "graphql-tag";
import { Query } from "react-apollo";
const GET_DOGS = gql`
{
dogs {
id
breed
}
@peggyrayzis
peggyrayzis / dog.js
Created March 14, 2018 15:55
Apollo Link State + React Apollo 2.1 = <3 <3 <3
import React from 'react';
import { ApolloConsumer, Query } from 'react-apollo';
import gql from 'graphql-tag';
const SimpleMutation = () => (
<ApolloConsumer>
{(cache) => (
<button onClick={() => cache.writeData({ data: { status: 'yo' }})}>Click me!</button>
)}
</ApolloConsumer>
@peggyrayzis
peggyrayzis / Placeholder.js
Created March 1, 2018 18:49
placeholder for react async
import React, { Fragment } from "react";
function Placeholder({ delayMs, fallbackUI, children }) {
return (
<React.Timeout ms={delayMs}>
{didTimeout => {
return (
<Fragment>
<span hidden={didTimeout}>{children}</span>
{didTimeout ? fallbackUI : null}
import React from "react";
import ReactDOM from "react-dom";
export class AsyncValue extends React.Component {
state = { asyncValue: this.props.defaultValue };
deferSetState(state) {
ReactDOM.unstable_deferredUpdates(() => {
this.setState(state);
});
}
@peggyrayzis
peggyrayzis / AsyncValue.js
Created March 1, 2018 16:43
Async React low priority update component
import React from "react";
import ReactDOM from "react-dom";
export class AsyncValue extends React.Component {
state = { asyncValue: this.props.defaultValue };
deferSetState(state) {
ReactDOM.unstable_deferredUpdates(() => {
this.setState(state);
});
}
@peggyrayzis
peggyrayzis / AsyncValue.js
Last active March 1, 2018 16:42
Async React Low Priority
import React from "react";
import ReactDOM from "react-dom";
export class AsyncValue extends React.Component {
state = { asyncValue: this.props.defaultValue };
deferSetState(state) {
ReactDOM.unstable_deferredUpdates(() => {
this.setState(state);
});
}