Last active
January 24, 2021 17:51
-
-
Save andyrichardson/4f56483e25386795c6e6ae925638036b to your computer and use it in GitHub Desktop.
Template for triggering network and data states in fixtures that consume Apollo Client
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ApolloProvider } from '@apollo/react-hooks'; | |
import { ApolloClient, RequestHandler, InMemoryCache, ApolloLink, Observable } from 'apollo-boost'; | |
import { GraphQLError } from 'graphql'; | |
import React from 'react'; | |
import { Users } from './Users'; | |
export default { | |
title: 'Pages/Users', | |
}; | |
const createMockClient = (handler: RequestHandler) => | |
new ApolloClient({ | |
cache: new InMemoryCache({ addTypename: false }), | |
link: new ApolloLink(handler), | |
}); | |
export const Fetching = () => ( | |
<ApolloProvider | |
client={createMockClient(() => { | |
return new Observable(() => { | |
return; | |
}); | |
})} | |
> | |
<Users data-snapshot /> | |
</ApolloProvider> | |
); | |
export const Empty = () => ( | |
<ApolloProvider | |
client={createMockClient((operation) => { | |
return new Observable((observer) => { | |
if (operation.operationName === 'GeUsers') { | |
return observer.next({ | |
data: { | |
users: [], | |
}, | |
}); | |
} | |
}); | |
})} | |
> | |
<Users data-snapshot /> | |
</ApolloProvider> | |
); | |
export const Error = () => ( | |
<ApolloProvider | |
client={createMockClient((operation) => { | |
return new Observable((observer) => { | |
if (operation.operationName === 'GetUsers') { | |
return observer.next({ | |
errors: [new GraphQLError('Error')], | |
}); | |
} | |
}); | |
})} | |
> | |
<Users data-snapshot /> | |
</ApolloProvider> | |
); | |
export const Response = () => ( | |
<ApolloProvider | |
client={createMockClient((operation) => { | |
return new Observable((observer) => { | |
if (operation.operationName === 'GetUsers') { | |
return observer.next({ | |
data: { | |
users: [ | |
{ | |
id: 1, | |
}, | |
{ | |
id: 2, | |
}, | |
], | |
}, | |
}); | |
} | |
}); | |
})} | |
> | |
<Users data-snapshot /> | |
</ApolloProvider> | |
); | |
export const Updating = () => ( | |
<ApolloProvider | |
client={createMockClient((operation) => { | |
console.log(operation); | |
return new Observable((observer) => { | |
if (operation.operationName === 'GetUsers') { | |
let users: any[] = []; | |
setInterval(() => { | |
users = [ | |
{ id: users.length }, | |
...users, | |
]; | |
observer.next({ | |
data: { | |
users, | |
}, | |
}); | |
}, 1000); | |
} | |
}); | |
})} | |
> | |
<Users /> | |
</ApolloProvider> | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment