Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Joe Ng'ethe joeynimu

🏠
Working from home
View GitHub Profile
View useInfiniteQuery.js
/*
I am having trouble using useInfiniteQuery with a paginated graphql API.
The query expects a `page` variable that is used to get a specific page dataset.
I am currently updating the `page` variable on click the `load more button` and calling the fetchNextPage function.
While this works in terms of getting the next set of data, react-query seems to be returning only on page
instead of returning the previous page + the current page's results. Hence, the results are from the initial page or last page results.
How do I get back results from all the pages?
@joeynimu
joeynimu / app.js
Last active May 3, 2019
Sample code for a graphql server
View app.js
const { ApolloServer } = require('apollo-server');
const { generate } = require('shortid');
let data = [];
const typeDefs = `
type Query {
posts: [post]
post(id: String!): post
}
@joeynimu
joeynimu / app.js
Created Apr 23, 2019
JS Utility Functions
View app.js
// a function that composes any number of functions
const compose = (..fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
@joeynimu
joeynimu / introrx.md
Created Aug 1, 2018 — forked from staltz/introrx.md
The introduction to Reactive Programming you've been missing
View introrx.md
@joeynimu
joeynimu / constants.js
Last active May 28, 2018
Swapi API GraphQL Wrapper
View constants.js
//constants.js
export const APP_PORT = 5000
export const BASE_URL = 'https://swapi.co/api' // star wars API base URL
@joeynimu
joeynimu / server.js
Last active May 23, 2018
Sample GraphQL Server with Schema Stitching
View server.js
import express from 'express';
import bodyParser from 'body-parser';
import Dataloader from 'DataLoader';
import {
graphqlExpress,
graphiqlExpress
} from 'apollo-server-express';
import {
makeRemoteExecutableSchema,
mergeSchemas,
View ComponentFile.js
import React from 'react'
const Filters = () => {
// this throws the error yet on inspecting with react tools I can see teh data `prop` with `regions` on there
const regions = this.props.data.regions
return (<div>
<h3>Some data</h3>
<ul>{
regions && regions.map((d, i) => {
return <li key={d.region_id}>{d.region_name}</li>
@joeynimu
joeynimu / lazyLoader.js
Last active Apr 24, 2018
LazyLoadImages
View lazyLoader.js
const lazyLoad = () => () => {
// create an array from <img /> tags with a .lazy class
const lazyImages = Array.from(document.querySelectorAll('img.lazy'))
if ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
let lazyImageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
let lazyImage = entry.target
lazyImage.src = lazyImage.dataset.src
lazyImage.srcset = lazyImage.dataset.srcset
@joeynimu
joeynimu / bitCoin.js
Last active Sep 11, 2017
Really simple demonstration of how block chain works.
View bitCoin.js
// you need to first run `npm i --save crypto-js`
const SHA256 = require('crypto-js/sha256');
class Block{
constructor(index, data, previsousHash='', date = new Date()){
// takes in the following params; index: number, timestamp: string/object, data: object and previousHash: string
this.index = index,
this.timestamp = this.formatTimeStamp(),
this.data = data,
@joeynimu
joeynimu / mousy.js
Created Mar 13, 2017
A Mousy module; moves element on mouse move.
View mousy.js
var MousyModule = function () {
function MousyModule(opt) {
classCallCheck(this, MousyModule);
opt = opt || {};
this.name = 'mousy';
this.rotation = opt.rotation || 10.0;
this.parallax = {
enabled: true,