joeynimu

/* 
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

const { ApolloServer } = require('apollo-server');
const { generate } = require('shortid');

let data = [];

const typeDefs = `
  type Query {
    posts: [post]
    post(id: String!): post
  }

joeynimu

// a function that composes any number of functions

const compose = (..fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);

joeynimu

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

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.

---

joeynimu

//constants.js
export const APP_PORT = 5000
export const BASE_URL = 'https://swapi.co/api' // star wars API base URL

joeynimu

import express from 'express';
import bodyParser from 'body-parser';
import Dataloader from 'DataLoader';
import {
	graphqlExpress,
	graphiqlExpress
} from 'apollo-server-express';
import {
	makeRemoteExecutableSchema,
	mergeSchemas,

joeynimu

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

 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

// 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

var MousyModule = function () {
    function MousyModule(opt) {
        classCallCheck(this, MousyModule);

        opt = opt || {};

        this.name = 'mousy';
        this.rotation = opt.rotation || 10.0;
        this.parallax = {
            enabled: true,