Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

Provide shouldInvalidatePreviousData prop #2889

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
18 changes: 16 additions & 2 deletions src/Query.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { getClient } from './component-utils';
import { RenderPromises } from './getDataFromTree';

import isEqual from 'lodash.isequal';
import shallowEqual from './utils/shallowEqual';
import shallowEqual, { shallowEqualSansFirst } from './utils/shallowEqual';
import { invariant } from 'ts-invariant';

export type ObservableQueryFields<TData, TVariables> = Pick<
Expand Down Expand Up @@ -74,6 +74,10 @@ export interface QueryProps<TData = any, TVariables = OperationVariables> extend
skip?: boolean;
onCompleted?: (data: TData) => void;
onError?: (error: ApolloError) => void;
shouldInvalidatePreviousData: (
nextVariables: TVariables | undefined,
lastVariables: TVariables | undefined,
) => boolean;
}

export interface QueryContext {
Expand All @@ -94,6 +98,7 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
static propTypes = {
client: PropTypes.object,
children: PropTypes.func.isRequired,
shouldInvalidatePreviousData: PropTypes.func,
fetchPolicy: PropTypes.string,
notifyOnNetworkStatusChange: PropTypes.bool,
onCompleted: PropTypes.func,
Expand All @@ -105,6 +110,13 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
partialRefetch: PropTypes.bool,
};

static defaultProps = {
shouldInvalidatePreviousData: (
nextVariables: OperationVariables | undefined,
lastVariables: OperationVariables | undefined,
) => !shallowEqualSansFirst(nextVariables, lastVariables),
};

context: QueryContext | undefined;

private client: ApolloClient<Object>;
Expand Down Expand Up @@ -202,6 +214,8 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
this.queryObservable = null;
this.previousData = {};
this.updateQuery(nextProps);
} else if (nextProps.shouldInvalidatePreviousData(nextProps.variables, this.props.variables)) {
this.previousData = {};
}

if (this.props.query !== nextProps.query) {
Expand Down Expand Up @@ -254,7 +268,7 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
...props,
displayName,
context: props.context || {},
metadata: { reactComponent: { displayName }},
metadata: { reactComponent: { displayName } },
};
}

Expand Down
33 changes: 26 additions & 7 deletions src/utils/shallowEqual.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
type AnyObject = { [key: string]: any };
const { hasOwnProperty } = Object.prototype;

function is(x: any, y: any) {
Expand All @@ -7,11 +8,21 @@ function is(x: any, y: any) {
return x !== x && y !== y;
}

function isObject(obj: any): obj is { [key: string]: any } {
function isObject(obj: any): obj is AnyObject {
return obj !== null && typeof obj === "object";
}

export default function shallowEqual(objA: any, objB: any) {
function shallowObjectEqual(objA: AnyObject, objB: AnyObject) {
const keys = Object.keys(objA);

if (keys.length !== Object.keys(objB).length) {
return false;
}

return keys.every(key => hasOwnProperty.call(objB, key) && is(objA[key], objB[key]));
}

export function shallowEqualSansFirst(objA: any, objB: any) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jcready Can you explain why this is necessary?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't want to re-write all the tests that depend on this functionality and it does seem like first is typically only used for pagination which means you generally wouldn't want to invalidate the previous data if it changed.

if (is(objA, objB)) {
return true;
}
Expand All @@ -20,13 +31,21 @@ export default function shallowEqual(objA: any, objB: any) {
return false;
}

const keys = Object.keys(objA);
// Ignore `first` key
const { first: _, ...objectA } = objA;
const { first: __, ...objectB } = objB;

if (keys.length !== Object.keys(objB).length) {
return shallowObjectEqual(objectA, objectB);
}

export default function shallowEqual(objA: any, objB: any) {
if (is(objA, objB)) {
return true;
}

if (!isObject(objA) || !isObject(objB)) {
return false;
}

return keys.every(
key => hasOwnProperty.call(objB, key) && is(objA[key], objB[key]),
);
return shallowObjectEqual(objA, objB);
}