(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
/* | |
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? |
const { ApolloServer } = require('apollo-server'); | |
const { generate } = require('shortid'); | |
let data = []; | |
const typeDefs = ` | |
type Query { | |
posts: [post] | |
post(id: String!): post | |
} |
// a function that composes any number of functions | |
const compose = (..fns) => x => fns.reduceRight((acc, fn) => fn(acc), x); |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
//constants.js | |
export const APP_PORT = 5000 | |
export const BASE_URL = 'https://swapi.co/api' // star wars API base URL |
import express from 'express'; | |
import bodyParser from 'body-parser'; | |
import Dataloader from 'DataLoader'; | |
import { | |
graphqlExpress, | |
graphiqlExpress | |
} from 'apollo-server-express'; | |
import { | |
makeRemoteExecutableSchema, | |
mergeSchemas, |
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> |
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 |
// 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, |
var MousyModule = function () { | |
function MousyModule(opt) { | |
classCallCheck(this, MousyModule); | |
opt = opt || {}; | |
this.name = 'mousy'; | |
this.rotation = opt.rotation || 10.0; | |
this.parallax = { | |
enabled: true, |