Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Resources Invalidation Strategy #882

Merged
merged 4 commits into from
Feb 28, 2021
Merged

Fix Resources Invalidation Strategy #882

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c333af0
failing unit test after adding a new item
agubler Feb 19, 2021
8c2f449
decouple the request and order part of the synth id to be able to tra…
agubler Feb 21, 2021
30dcdf6
remove comment
agubler Feb 21, 2021
a79bb38
add extra assertion
agubler Feb 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 57 additions & 35 deletions src/core/middleware/resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,51 +97,66 @@ type RawCacheItem = {

type IdMapData =
| { id: string; status: 'resolved'; stale?: boolean }
| { id: null; status: 'orphaned' | 'pending'; stale?: boolean };
| { id: string | null; status: 'orphaned' | 'pending'; stale?: boolean };

interface CacheSubscriberItem {
refs: Set<string>;
invalidator: () => void;
syntheticIds: SyntheticId[];
}

type SyntheticId = { requestId: string; orderId: string };

function generateSynthIdString({ requestId, orderId }: SyntheticId) {
return `${requestId}/${orderId}`;
}

class RawCache {
_subscriberCounter = 1;
_rawCache = new Map<string, RawCacheItem>();
_syntheticIdToIdMap = new Map<string, IdMapData>();
_idToSyntheticIdMap = new Map<string, Set<string>>();
_idToSyntheticIdMap = new Map<string, Map<string, SyntheticId>>();
_syntheticIdToSubscriberMap = new Map<string, Set<any>>();
_subscriberMap = new Map<string, any>();
subscribe(syntheticIds: string[], invalidator: any) {
_subscriberMap = new Map<string, CacheSubscriberItem>();
subscribe(syntheticIds: SyntheticId[], invalidator: any) {
const subscriberId = `${this._subscriberCounter++}`;
syntheticIds.forEach((syntheticId) => {
let subscribers = this._syntheticIdToSubscriberMap.get(syntheticId);
const synthId = generateSynthIdString(syntheticId);
let subscribers = this._syntheticIdToSubscriberMap.get(synthId);
if (!subscribers) {
subscribers = new Set();
}
subscribers.add(subscriberId);
this._syntheticIdToSubscriberMap.set(syntheticId, subscribers);
this._syntheticIdToSubscriberMap.set(synthId, subscribers);
});
this._subscriberMap.set(subscriberId, {
syntheticIds,
invalidator,
refs: new Set(syntheticIds)
refs: new Set(syntheticIds.map(generateSynthIdString))
});
}
notify(syntheticId: string) {
const subscriberIds = this._syntheticIdToSubscriberMap.get(syntheticId);
notify(syntheticId: SyntheticId) {
const synthId = generateSynthIdString(syntheticId);
const subscriberIds = this._syntheticIdToSubscriberMap.get(synthId);
if (subscriberIds) {
[...subscriberIds].forEach((subscriberId) => {
const subscriber = this._subscriberMap.get(subscriberId);
if (subscriber) {
subscriber.refs.delete(syntheticId);
subscriber.refs.delete(synthId);
if (subscriber.refs.size === 0) {
subscriber.invalidator();
this._subscriberMap.delete(subscriberId);
}
const subscribers = this._syntheticIdToSubscriberMap.get(syntheticId)!;
const subscribers = this._syntheticIdToSubscriberMap.get(synthId)!;
subscribers.delete(subscriber);
this._syntheticIdToSubscriberMap.set(syntheticId, subscribers);
this._syntheticIdToSubscriberMap.set(synthId, subscribers);
}
});
}
}
get(syntheticId: string): undefined | RawCacheItem {
const idDetails = this._syntheticIdToIdMap.get(syntheticId);
get(syntheticId: SyntheticId): undefined | RawCacheItem {
const synthId = generateSynthIdString(syntheticId);
const idDetails = this._syntheticIdToIdMap.get(synthId);
if (idDetails) {
if (idDetails.status === 'resolved') {
return this._rawCache.get(idDetails.id);
Expand All @@ -166,25 +181,27 @@ class RawCache {
this._syntheticIdToIdMap.set(key, { ...value, stale: true });
});
}
addSyntheticId(syntheticId: string) {
this._syntheticIdToIdMap.set(syntheticId, { id: null, status: 'pending' });
addSyntheticId(syntheticId: SyntheticId, status: 'orphaned' | 'pending' = 'pending') {
this._syntheticIdToIdMap.set(generateSynthIdString(syntheticId), { id: null, status });
}
getSyntheticIds(id: string) {
const ids = this._idToSyntheticIdMap.get(id);
if (ids) {
return [...ids];
return [...ids.values()];
}
return [];
}
orphan(syntheticId: string) {
orphan(syntheticId: SyntheticId) {
const synthId = generateSynthIdString(syntheticId);
this.notify(syntheticId);
this._syntheticIdToIdMap.set(syntheticId, { id: null, status: 'orphaned' });
this._syntheticIdToIdMap.set(synthId, { id: null, status: 'orphaned' });
}
set(syntheticId: string, item: RawCacheItem, idKey: string) {
set(syntheticId: SyntheticId, item: RawCacheItem, idKey: string) {
const synthId = generateSynthIdString(syntheticId);
const id = item.value[idKey];
this._syntheticIdToIdMap.set(syntheticId, { id, status: 'resolved' });
const syntheticIds = this._idToSyntheticIdMap.get(id) || new Set<string>();
syntheticIds.add(syntheticId);
this._syntheticIdToIdMap.set(synthId, { id, status: 'resolved' });
const syntheticIds = this._idToSyntheticIdMap.get(id) || new Map<string, SyntheticId>();
syntheticIds.set(syntheticId.requestId, syntheticId);
this._idToSyntheticIdMap.set(id, syntheticIds);
this._rawCache.set(id, { ...item, stale: false });
this.notify(syntheticId);
Expand Down Expand Up @@ -722,9 +739,7 @@ const middleware = factory(
response.forEach((item) => {
const id = item[instance.idKey as string];
const synthIds = cache.getSyntheticIds(id);
if (synthIds.length === 0) {
cache.invalidate();
}
cache.invalidate();
synthIds.forEach((id) => {
cache.set(
id,
Expand All @@ -741,13 +756,15 @@ const middleware = factory(
} else {
const { offset, query: requestQuery, size } = request;
const query = transform ? transformQuery(requestQuery, transform) : requestQuery;
const syntheticIds: string[] = [];
const syntheticIds: SyntheticId[] = [];
for (let i = 0; i < offset + size - offset; i++) {
syntheticIds.push(`${JSON.stringify(query)}/${offset + i}`);
syntheticIds.push({ requestId: JSON.stringify(query), orderId: `${offset + i}` });
}
response.data.forEach((item, idx) => {
const syntheticId =
syntheticIds.shift() || `${JSON.stringify(query)}/${offset + idx}`;
const syntheticId = syntheticIds.shift() || {
requestId: JSON.stringify(query),
orderId: `${offset + idx}`
};
cache.set(
syntheticId,
{
Expand Down Expand Up @@ -822,16 +839,16 @@ const middleware = factory(
if (!settings.meta && inflight) {
return undefined;
}
const syntheticIds: string[] = [];
const orphanedIds: string[] = [];
let incompleteIds: string[] = [];
const syntheticIds: SyntheticId[] = [];
const orphanedIds: SyntheticId[] = [];
let incompleteIds: SyntheticId[] = [];
let shouldRead = false;
let resetOrphans = false;
if (!read) {
let items: (undefined | any)[] = [];
let requestStatus: ReadStatus = 'read';
for (let i = 0; i < end - offset; i++) {
const item = cache.get(`${stringifiedQuery}/${offset + i}`);
const item = cache.get({ requestId: stringifiedQuery, orderId: `${offset + i}` });
if (meta) {
if (item) {
const status = item.status === 'resolved' ? 'read' : 'reading';
Expand Down Expand Up @@ -859,12 +876,17 @@ const middleware = factory(
let items: RawCacheItem[] = [];

for (let i = 0; i < end - offset; i++) {
const syntheticId = `${stringifiedQuery}/${offset + i}`;
const syntheticId = { requestId: stringifiedQuery, orderId: `${offset + i}` };
const item = cache.get(syntheticId);
syntheticIds.push(syntheticId);
if (item) {
if (item.stale) {
incompleteIds.push(syntheticId);
if (item.value && item.status === 'resolved') {
cache.set(syntheticId, { ...item, stale: false }, instance.idKey as string);
} else if (item.status === 'orphaned') {
cache.addSyntheticId(syntheticId, item.status);
}
shouldRead = true;
if (orphanedIds.length) {
resetOrphans = true;
Expand Down
127 changes: 122 additions & 5 deletions tests/core/unit/middleware/resources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
} from '../../../../src/core/middleware/resources';
import icache from '../../../../src/core/middleware/icache';
import { spy } from 'sinon';
import { findIndex } from '../../../../src/shim/array';

const resolvers = createResolvers();

Expand Down Expand Up @@ -2062,6 +2063,10 @@ jsdomDescribe('Resources Middleware', () => {
>({
idKey: 'value',
save: (request, controls) => {
const index = findIndex(customTestData, (item) => request.value == item.value);
if (index !== -1) {
customTestData[index] = request;
}
controls.put([request]);
},
read: (request, controls) => {
Expand Down Expand Up @@ -2117,6 +2122,9 @@ jsdomDescribe('Resources Middleware', () => {
}
const customTestData: CustomTestData[] = [];
for (let i = 0; i < 4; i++) {
if (i === 2) {
continue;
}
customTestData.push({ value: `${i}`, label: `Original Label ${i}` });
}

Expand All @@ -2127,6 +2135,7 @@ jsdomDescribe('Resources Middleware', () => {
idKey: 'value',
save: (request, controls) => {
customTestData.push(request);
customTestData.sort((a, b) => parseInt(a.value) - parseInt(b.value));
controls.put([request]);
},
read: (request, controls) => {
Expand All @@ -2148,15 +2157,15 @@ jsdomDescribe('Resources Middleware', () => {
template: { read, save }
} = resource.template(template);
const options = createOptions(testOptionsSetter);
const data = get(options(), { read });
const data = get(options(), { read }) || [];
return (
<div>
<button
onclick={() => {
save({ value: '4', label: 'New Label 4' });
save({ value: '2', label: 'New Label 2' });
}}
/>
<div>{JSON.stringify(data)}</div>
<div>{data.map((item) => <div>{JSON.stringify([get([item.value])])}</div>)}</div>
</div>
);
});
Expand All @@ -2165,14 +2174,122 @@ jsdomDescribe('Resources Middleware', () => {
r.mount({ domNode });
assert.strictEqual(
domNode.innerHTML,
'<div><button></button><div>[{"value":"0","label":"Original Label 0"},{"value":"1","label":"Original Label 1"},{"value":"2","label":"Original Label 2"},{"value":"3","label":"Original Label 3"}]</div></div>'
'<div><button></button><div><div>[[{"value":"0","label":"Original Label 0"}]]</div><div>[[{"value":"1","label":"Original Label 1"}]]</div><div>[[{"value":"3","label":"Original Label 3"}]]</div></div></div>'
);
(domNode.children[0].children[0] as any).click();
resolvers.resolveRAF();
assert.strictEqual(
domNode.innerHTML,
'<div><button></button><div>[{"value":"0","label":"Original Label 0"},{"value":"1","label":"Original Label 1"},{"value":"2","label":"Original Label 2"},{"value":"3","label":"Original Label 3"},{"value":"4","label":"New Label 4"}]</div></div>'
'<div><button></button><div><div>[[{"value":"0","label":"Original Label 0"}]]</div><div>[[{"value":"1","label":"Original Label 1"}]]</div><div>[[{"value":"2","label":"New Label 2"}]]</div><div>[[{"value":"3","label":"Original Label 3"}]]</div></div></div>'
);
});

it('should be able to use custom template apis to create new resources with an async template', async () => {
interface CustomTestData extends TestData {
label: string;
}
const customTestData: CustomTestData[] = [];
for (let i = 0; i < 4; i++) {
if (i === 2) {
continue;
}
customTestData.push({ value: `${i}`, label: `Original Label ${i}` });
}

const promises: [Promise<any>, () => void][] = [];
let readCounter = 0;

const template = createResourceTemplate<
CustomTestData,
{ save: (item: CustomTestData) => void } & DefaultApi
>({
idKey: 'value',
save: async (request, controls) => {
customTestData.push(request);
customTestData.sort((a, b) => parseInt(a.value) - parseInt(b.value));
controls.put([request]);
},
read: (request, controls) => {
readCounter++;
let resolver: any;
const promise = new Promise((res) => {
resolver = res;
});
promises.push([promise, resolver]);
return promise.then(() => {
const { size, offset } = request;
let filteredData = [...customTestData];
controls.put(
{ data: filteredData.slice(offset, offset + size), total: filteredData.length },
request
);
});
}
});
const resource = createResourceMiddleware();
const factory = create({ resource, invalidator });

const App = factory(function App({ middleware: { resource, invalidator } }) {
const {
get,
createOptions,
template: { read, save }
} = resource.template(template);
const options = createOptions(testOptionsSetter);
const data = get(options(), { read }) || [];
return (
<div>
<button
onclick={() => {
save({ value: '2', label: 'New Label 2' });
}}
/>
<button
onclick={() => {
invalidator();
}}
/>
<div>{data.map((item) => <div>{JSON.stringify([get([item.value])])}</div>)}</div>
</div>
);
});
const domNode = document.createElement('div');
const r = renderer(() => <App />);
r.mount({ domNode });
assert.strictEqual(domNode.innerHTML, '<div><button></button><button></button><div></div></div>');
assert.strictEqual(readCounter, 1);
let [promise, resolve] = promises.shift()!;
resolve();
await promise;
resolvers.resolveRAF();
assert.strictEqual(
domNode.innerHTML,
'<div><button></button><button></button><div><div>[[{"value":"0","label":"Original Label 0"}]]</div><div>[[{"value":"1","label":"Original Label 1"}]]</div><div>[[{"value":"3","label":"Original Label 3"}]]</div></div></div>'
);
assert.strictEqual(readCounter, 1);
(domNode.children[0].children[0] as any).click();
resolvers.resolveRAF();
assert.strictEqual(
domNode.innerHTML,
'<div><button></button><button></button><div><div>[[{"value":"0","label":"Original Label 0"}]]</div><div>[[{"value":"1","label":"Original Label 1"}]]</div><div>[[{"value":"3","label":"Original Label 3"}]]</div></div></div>'
);
assert.strictEqual(readCounter, 2);
(domNode.children[0].children[1] as any).click();
resolvers.resolveRAF();
assert.strictEqual(
domNode.innerHTML,
'<div><button></button><button></button><div><div>[[{"value":"0","label":"Original Label 0"}]]</div><div>[[{"value":"1","label":"Original Label 1"}]]</div><div>[[{"value":"3","label":"Original Label 3"}]]</div></div></div>'
);
assert.strictEqual(readCounter, 2);
[promise, resolve] = promises.shift()!;
resolve();
await promise;
resolvers.resolveRAF();
assert.strictEqual(
domNode.innerHTML,
'<div><button></button><button></button><div><div>[[{"value":"0","label":"Original Label 0"}]]</div><div>[[{"value":"1","label":"Original Label 1"}]]</div><div>[[{"value":"2","label":"New Label 2"}]]</div><div>[[{"value":"3","label":"Original Label 3"}]]</div></div></div>'
);
assert.strictEqual(readCounter, 2);
});
});
});