Skip to content

Instantly share code, notes, and snippets.

@hwillson
hwillson / ra3-typescript.ts
Last active August 6, 2019 14:12
React Apollo 3 - Typescript
import { RocketData, RocketVars } from './types';
const GET_ROCKET_INVENTORY = gql`
query getRocketInventory($year: Int!) {
rocketInventory(year: $year) {
id
year
}
}
`;
@hwillson
hwillson / ra3-multiple-mutations.js
Last active August 5, 2019 10:22
React Apollo 3 - Multiple Mutations
function Message() {
const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE);
const [deleteMessage] = useMutation(DELETE_MESSAGE);
const { data } = useQuery(GET_MESSAGE);
return (
<div>
<p>
{loading
? 'Loading ...'
@hwillson
hwillson / ra3-useQuery.js
Last active August 6, 2019 10:55
React Apollo 3 - useQuery
const LAST_LAUNCH = gql`
query lastLaunch {
launch {
id
timestamp
}
}
`;
export function LastLaunch() {
@hwillson
hwillson / apollo-client-250-resolver.js
Created February 26, 2019 15:45
Apollo Client - 2.5.0 - Resolver
const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: 'http://localhost:4000/graphql',
}),
resolvers: {
Launch: {
isInCart: (launch, _args, { cache }) => {
const { cartItems } = cache.readQuery({
query: GET_CART_ITEMS
@hwillson
hwillson / apollo-client-250-query.js
Created February 26, 2019 15:44
Apollo Client - 2.5.0 - Query
const GET_LAUNCH_DETAILS = gql`
query LaunchDetails($launchId: ID!) {
launch(id: $launchId) {
isInCart @client
site
rocket {
type
}
}
}
@hwillson
hwillson / apollo-client-250-schema.js
Created February 26, 2019 15:43
Apollo Client - 2.5.0 - Schema
const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: 'http://localhost:4000/graphql',
}),
typeDefs: gql`
extend type Launch {
isInCart: Boolean!
}
`,
@hwillson
hwillson / apollo-client-250-resolve-api.js
Last active February 20, 2019 01:16
Apollo Client - 2.5.0 Announcement Post - Resolve from API
const client = new ApolloClient({
// ...
resolvers: {
RentalCar: {
numberAvailable(car) => {
// Call into a separate car inventory tracking system,
// to get up to date car availibility.
return CarTracker.isCarAvailable(car.id);
},
},
@hwillson
hwillson / apollo-client-250-manipulate.js
Created February 19, 2019 17:44
Apollo Client - 2.5.0 Announcement Post - Manipulate Data
// Example ApolloClient config including a fullName resolver to
// combine first and last names.
const client = new ApolloClient({
// ...
resolvers: {
Customer: {
fullName(customer) => {
return `${customer.firstName} ${customer.lastName}`;
},
},
@hwillson
hwillson / apollo-client-250-mutation.js
Last active February 19, 2019 14:08
Apollo Client - 2.5.0 Announcement Post - Mutation
// Example ApolloClient config showing a Mutation resolver.
const client = new ApolloClient({
cache: new InMemoryCache(),
resolvers: {
Mutation: {
toggleTodo: (_root, variables, { cache, getCacheKey }) => {
const id = getCacheKey({ __typename: 'TodoItem', id: variables.id })
const fragment = gql`
fragment completeTodo on TodoItem {
completed
@hwillson
hwillson / apollo-client-250-code-split-loadable.js
Created February 16, 2019 21:43
Apollo Client - 2.5.0 Announcement Post - Code Splitting - Loadable
import Loadable from 'react-loadable';
import Loading from './components/Loading';
export const Stats = Loadable({
loader: () => import('./components/stats/Stats'),
loading: Loading,
});