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

Adding 'skip' prop to query and mutation components and hooks. #229

Closed
wants to merge 1 commit into from
Closed

Adding 'skip' prop to query and mutation components and hooks. #229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
7 changes: 5 additions & 2 deletions src/components/Mutation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ interface MutationHandlerState {

interface MutationChildProps extends MutationHandlerState {
executeMutation: <T = any, V = object>(
variables?: V
variables?: V,
skip?: boolean
Copy link
Member

Choose a reason for hiding this comment

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

it doesn't really make sense to add skip to mutations as they're always methods that are called imperatively

) => Promise<OperationResult<T>>;
}

Expand All @@ -41,7 +42,9 @@ class MutationHandler extends Component<
});
}

executeMutation: MutationChildProps['executeMutation'] = variables => {
executeMutation: MutationChildProps['executeMutation'] = (variables, skip) => {
if (skip) return;

this.setState({
fetching: true,
error: undefined,
Expand Down
3 changes: 3 additions & 0 deletions src/components/Query.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { CombinedError, createRequest, noop } from '../utils';
interface QueryHandlerProps {
query: string | DocumentNode;
variables?: object;
skip?: boolean;
client: Client;
requestPolicy?: RequestPolicy;
children: (arg: QueryHandlerState) => ReactNode;
Expand All @@ -26,6 +27,8 @@ class QueryHandler extends Component<QueryHandlerProps, QueryHandlerState> {
private request = createRequest(this.props.query, this.props.variables);

executeQuery = (opts?: Partial<OperationContext>) => {
if (this.props.skip) return;
Copy link
Member

Choose a reason for hiding this comment

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

When the props change we do call executeQuery again at which point we have to tear down the previous query.

This means that unsubscribe should still be called when skip is true

The update life cycle method will also have to trigger when skip changes (componentDidUpdate)


this.unsubscribe();

this.setState({ fetching: true });
Expand Down
4 changes: 3 additions & 1 deletion src/hooks/useMutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ export const useMutation = <T = any, V = object>(
data: undefined,
});

const executeMutation = (variables?: V) => {
const executeMutation = (variables?: V, skip?: boolean) => {
if (skip) return;
Copy link
Member

Choose a reason for hiding this comment

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

Same as the component; it's imperative so the addition doesn't really make sense 😀


setState({ fetching: true, error: undefined, data: undefined });

const request = createRequest(query, variables as any);
Expand Down
3 changes: 3 additions & 0 deletions src/hooks/useQuery.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { CombinedError, createRequest, noop } from '../utils';
interface UseQueryArgs<V> {
query: string | DocumentNode;
variables?: V;
skip?: boolean;
requestPolicy?: RequestPolicy;
}

Expand Down Expand Up @@ -38,6 +39,8 @@ export const useQuery = <T = any, V = object>(

const executeQuery = useCallback(
(opts?: Partial<OperationContext>) => {
if (args.skip) return;
Copy link
Member

Choose a reason for hiding this comment

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

Same as the component, we'll still have to call unsubscribe. It might also make sense to set fetching to false when this happens


unsubscribe();
setState(s => ({ ...s, fetching: true }));

Expand Down