Relay React Navigation

App.tsx

import { MainTabsStack } from './Navigator';
import { AppQuery } from './__generated__/AppQuery.graphql';
import { graphql, useMutation, useQuery } from 'relay-hooks';
   

const { props, retry, error, cached } = useQuery<AppQuery>(
        graphql`
            query AppQuery {
                me {
                    ...Comments_me
                    ...Live_me
                    burner
                }
                liveChallenge {
                    ...Comments_liveChallenge
                }
            }
        `
    );
    const { me, liveChallenge } = { ...props };

  return (
        <NavigationContainer>
                <MainTabsStack
                    liveChallenge={liveChallenge}
                    me={me}
                />
        </NavigationContainer>
    );

Comments.tsx

import React from 'react';
=import { graphql, useFragment, useQuery } from 'relay-hooks';

import { CommentsQuery } from './__generated__/CommentsQuery.graphql';
import { CommentList } from './CommentList';
import { CommentsTabProps as Props } from '../../Navigator';
import { CreateCommentComposer } from './CreateCommentComposer';


const query = graphql`
    query CommentsQuery {
        ...CommentList_query
    }
`;

export const Comments = (props: Props): React.ReactElement => {
    const liveChallenge = useFragment(
        graphql`
            fragment Comments_liveChallenge on Challenge {
                id
                creator {
                    id
                    username
                }
                ...CreateCommentComposer_liveChallenge
            }
        `,
        props.route.params.liveChallenge
    );
    const me = useFragment(
        graphql`
            fragment Comments_me on User {
                ...CreateCommentComposer_me
            }
        `,
        props.route.params.me
    );
    return
        <View style={styles.background}>
            <CommentList query={data} />
            <CreateCommentComposer me={me} liveChallenge={liveChallenge} />
        </View>
}
};

Live.tsx

import React, {
    useEffect,
    ReactElement
} from 'react';
import { Button, Text, View } from 'react-native';
import { graphql, useFragment } from 'relay-hooks';

import { LiveTabProps, LiveTabs } from '../../Navigator';
import { Live_me$key, Live_me } from './__generated__/Live_me.graphql';

type Props = LiveTabProps;

export function Live({
    route: {
        params: {
            liveChallenge,
            me
        }
    }
}: Props): ReactElement {
    const [user, setUser] = useState<Live_me>();

    useEffect(() => {
        const user = useFragment<Live_me$key>(
            graphql`
                fragment Live_me on User {
                    addresses
                    username
                    burner
                }
            `,
            me
        );
        setUser(user);
    });
      
      
      
      return (
          <LiveTabs me={me} liveChallenge={liveChallenge} />
      )}

Navigator.tsx

import {
    createMaterialTopTabNavigator,
    MaterialTopTabScreenProps
} from '@react-navigation/material-top-tabs';
import {
    createStackNavigator,
    StackScreenProps
} from '@react-navigation/stack';
import React, { ReactElement } from 'react';

import { AppQueryResponse } from './__generated__/AppQuery.graphql';
import { Comments_liveChallenge$key } from './components/comment/__generated__/Comments_liveChallenge.graphql';
import { Comments_me$key } from './components/comment/__generated__/Comments_me.graphql';
import { Live_me$key } from './components/Live/__generated__/Live_me.graphql';
import { Comments } from './components/comment/Comments';
import { Live } from './components/Live/Live';

export type MainTabsParams = {
    Live: {
        me: Live_me$key;
        liveChallenge: any;
    };
};

export type LiveTabProps = MaterialTopTabScreenProps<MainTabsParams, 'Live'>;

export type LiveTabsParams = {
    Comments: {
        liveChallenge: Comments_liveChallenge$key;
        me: Comments_me$key;
    };
    Election: Record<string, unknown>;
};

export type CommentsTabProps = MaterialTopTabScreenProps<
    LiveTabsParams,
    'Comments'
>;
export type ElectionTabsProps = MaterialTopTabScreenProps<
    LiveTabsParams,
    'Election'
>;

const LiveTabsNavigator = createMaterialTopTabNavigator<LiveTabsParams>();

export function LiveTabs({ liveChallenge, me }: any): ReactElement {
    return (
        <LiveTabsNavigator.Navigator initialRouteName="Comments">
            <LiveTabsNavigator.Screen
                name="Comments"
                component={Comments}
                initialParams={{
                    liveChallenge,
                    me
                }}
            />
            <LiveTabsNavigator.Screen name="Election">
                {() => <></>}
            </LiveTabsNavigator.Screen>
        </LiveTabsNavigator.Navigator>
    );
}

const MainTabNavigator = createMaterialTopTabNavigator<MainTabsParams>();
export function MainTabsStack({
    mainnetProvider,
    localProvider,
    injectedProvider,
    price,
    liveChallenge,
    me
}: any): ReactElement {
    return (
        <MainTabNavigator.Navigator
            initialRouteName="Live"
            tabBarOptions={{ style: { display: 'none' } }}
        >
            <MainTabNavigator.Screen
                name="ProfileStack"
                component={ProfileStack}
            />
            <MainTabNavigator.Screen
                name="Live"
                component={Live}
                initialParams={{
                    mainnetProvider,
                    localProvider,
                    injectedProvider,
                    price,
                    liveChallenge,
                    me
                }}
            />
            <MainTabNavigator.Screen name="Market" component={Market} />
        </MainTabNavigator.Navigator>
    );
}