preloading.js

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 }),
    });
  },
};

TaskDetail.js

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>
  );
}

TaskRow.jsx

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>
  );
}

useEagerNavigation.js

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 };
}