Skip to content

Instantly share code, notes, and snippets.

@helielson
Last active June 4, 2022 13:08
Show Gist options
  • Save helielson/672ae385918ca11912c06ea2d3c086d3 to your computer and use it in GitHub Desktop.
Save helielson/672ae385918ca11912c06ea2d3c086d3 to your computer and use it in GitHub Desktop.
import { preloadQuery } from 'react-relay/hooks';
import relayEnvironment from '~/relay/environment';
import { nodeId } from '~/utilities/relay';
export const preloadMapping = {
taskDetail: ({ taskId }: TaskDetailParams) => {
const TaskDetailQuery = require('~/TaskDetail/__generated__/TaskDetailQuery.graphql');
return preloadQuery(relayEnvironment.env, TaskDetailQuery, {
nodeId: nodeId('Task', { taskId }),
});
},
};
import { useNavigationParam } from 'react-navigation-hooks';
import { graphql, usePreloadedQuery } from 'react-relay/hooks';
const query = graphql`
query TaskDetailQuery($nodeId: ID!) {
task: node(id: $nodeId) {
... on Task {
title
}
}
}
`;
export function TaskDetail() {
const preloadedQuery = useNavigationParam('preloadedQuery');
const { task } = usePreloadedQuery(query, preloadedQuery);
return (
<Text>{task.title}</Text>
);
}
import { preloadMapping } from '~/navigation/preloading';
import { useEagerNavigation } from '~/hooks/useEagerNavigation';
import routes from '~/navigation/routes';
export function TaskRow({ item, organization, sendMetrics }: Props) {
const { registerNavigationIntent, preloadedNavigate } = useEagerNavigation();
function eagerLoad() {
registerNavigationIntent(preloadMapping.taskDetail({ taskId }));
}
function navigateToTaskView() {
preloadedNavigate(routes.taskDetail, { taskId });
}
return (
<TouchableItem
block
onPressIn={eagerLoad}
onPress={navigateToTaskView}
>
<Text>View Task</Text>
</TouchableItem>
);
}
import { useState } from 'react';
import { useNavigation } from 'react-navigation-hooks';
export function useEagerNavigation() {
const { navigate } = useNavigation();
const [preloadedQuery, setPreloadedQuery] = useState();
function preloadedNavigate(route: RouteConfig, params: Params) {
navigate({
...route,
params: {
...params,
preloadedQuery,
},
});
setPreloadedQuery(null);
}
function registerNavigationIntent(newPreloadedQuery: any) {
setPreloadedQuery(newPreloadedQuery);
}
return { registerNavigationIntent, preloadedNavigate };
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment