Code Monkey home page Code Monkey logo

Comments (4)

morrys avatar morrys commented on May 20, 2024 1

This is already possible:

  • offline-first: store.getListMutation()
  • Apollo: client.getStoreOffline().getListMutation()
  • Relay: environment.getStoreOffline().getListMutation()

You can also use the storeOffline subscription to be notified when the queue is changed.

  • offline-first: store.subscribe(callback)
  • Apollo: client.getStoreOffline().subscribe(callback)
  • Relay: environment.getStoreOffline().subscribe(callback)

In the version 2.0.0 of cache-persist I am considering to change the interface of the callback so I advise you to follow these issues so as to be updated for any breaking changes :)

I will include this information in the documentation.

from wora.

pranavbabu avatar pranavbabu commented on May 20, 2024 1

Thank, a lot, the docs would help ;)

from wora.

pranavbabu avatar pranavbabu commented on May 20, 2024

Can I get a list of queries from the queue somewhere inside the app ?

from wora.

morrys avatar morrys commented on May 20, 2024

offline-first

new offline-first options:

export type OfflineFirstOptions<T> = {
    manualExecution?: boolean;
    execute: (offlineRecord: OfflineRecordCache<T>) => Promise<any>;
    start?: (mutations: Array<OfflineRecordCache<T>>) => Promise<Array<OfflineRecordCache<T>>>;
    finish?: (mutations: ReadonlyArray<OfflineRecordCache<T>>, error?: Error) => Promise<void>;
    onExecute?: (mutation: OfflineRecordCache<T>) => Promise<OfflineRecordCache<T>>;
    onComplete?: (options: { offlineRecord: OfflineRecordCache<T>; response: any }) => Promise<boolean>;
    onDiscard?: (options: { offlineRecord: OfflineRecordCache<T>; error: any }) => Promise<boolean>;
    onPublish?: (offlineRecord: OfflineRecordCache<T>) => Promise<OfflineRecordCache<T>>;
    compare?: (v1: OfflineRecordCache<T>, v2: OfflineRecordCache<T>) => number;
    // onDispatch?: (request: any) => any;
};
  • added setOfflineOptions
  • added start & onExecute options
  • removed offlineOptions in constructor
  • renamed restore function in hydrate
  • changed all return options function in promises
  • changed finish options, before: finish(isSuccess, mutations) after: finish(mutations, error)
  • code optimization

apollo-offline

  • renamed hydrated function in hydrate
  • added setOfflineOptions
  • removed offlineOptions in constructor
  • update dependency offline-first with new options
  • optimization in saving backup data within the offline mutation. Only the modified elements are saved in the backup property.
import { ApolloClient } from "@wora/apollo-offline";
import { HttpLink } from "apollo-link-http";
import ApolloCache from '@wora/apollo-cache';

const httpLink = new HttpLink({
  uri: "http://localhost:4000/graphql"
});

const httpLinkOffline = new HttpLink({
  uri: "http://localhost:4000/graphql"
});

const client = new ApolloClient({
  link: httpLink,
  cache: new ApolloCache({
    dataIdFromObject: o => o.id
  })
});
client.setOfflineOptions({
  manualExecution: false, //optional
  link: httpLinkOffline, //optional
  start: async (mutations) => { //optional
    console.log("start offline", mutations);
    return mutations;
  },
  finish: async (mutations, error) => { //optional
    console.log("finish offline", error, mutations)
  },
  onExecute: async (mutation) => { //optional
    console.log("onExecute offline", mutation)
    return mutation;
  },
  onComplete: async (options ) => { //optional
    console.log("onComplete offline", options)
    return true;
  },
  onDiscard: async ( options ) => { //optional
    console.log("onDiscard offline", options)
    return true;
  },
  onPublish: async (offlinePayload) => { //optional
    console.log("offlinePayload", offlinePayload)
    return offlinePayload
  }
};)


// await before instantiating Query, else queries might run before the cache is persisted, TODO ApolloProviderOffline
await client.hydrate(): Promise<boolean>

relay-offline

  • renamed restore function in hydrate
  • added setOfflineOptions
  • removed offlineOptions in constructor
  • removed isRestored function, now exist only isRehydrated
  • update dependency offline-first with new options
  • removed: automatic rollback management of the single failed mutation in the store (relay v6 & v7 no longer allows such integration)
import { Network } from "relay-runtime";
import { RecordSource, Store, Environment } from "react-relay-offline";

const network = Network.create(fetchQuery);

const networkOffline = Network.create(fetchQueryOffline);
const manualExecution = false;

const recordSource = new RecordSource();
const store = new Store(recordSource);
const environment = new Environment({ network, store });
environment.setOfflineOptions({
  manualExecution, //optional
  network: networkOffline, //optional
  start: async (mutations) => { //optional
    console.log("start offline", mutations);
    return mutations;
  },
  finish: async (mutations, error) => { //optional
    console.log("finish offline", error, mutations)
  },
  onExecute: async (mutation) => { //optional
    console.log("onExecute offline", mutation)
    return mutation;
  },
  onComplete: async (options ) => { //optional
    console.log("onComplete offline", options)
    return true;
  },
  onDiscard: async ( options ) => { //optional
    console.log("onDiscard offline", options)
    return true;
  },
  onPublish: async (offlinePayload) => { //optional
    console.log("offlinePayload", offlinePayload)
    return offlinePayload
  }
});

apollo-cache

  • renamed hydrated function in hydrate

relay-store

  • renamed restore function in hydrate

redux

  • removed ReduxProvider, with the new cache management it is no longer necessary to force the loading to the application
  • optimized the management of the restore and used the native function of cache-persist (mergeState)

from wora.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.