Problems with react navigation and relay about foton-mobile

[jean-leonco]

The problem seems to be on client. Using the curl on terminal, the information was returned.

The problem has to do with client, probably in the way that information is provided to children

[jgcmarins]

why?
could be related to data mask
could share piece of code or link?

how is the result from the query?

[jean-leonco]

Here is the root query of App when authenticated:

const isAuth = true;

  const Routes = createRouter(isAuth);

  if (isAuth) {
    const Root = () => {
      const query = useQuery(graphql`
        query AppQuery {
          ...Dashboard_products
        }
      `);

      return <Routes />;
    };

    const RootWrapper = () => {
      return (
        //@ts-ignore
        <ErrorBoundaryWithRetry
          fallback={error => <ErrorScreen error={error.message} />}
        >
          <React.Suspense fallback={<LoadingScreen />}>
            <Root />
          </React.Suspense>
        </ErrorBoundaryWithRetry>
      );
    };

    return <RootWrapper />; 

Relay finds the fragment and send requisition to server.

But the const that receive useFragment, products appears as null.

const products = useFragment(
    graphql`
      fragment Dashboard_products on Query {
        products(first: 10) @connection(key: "Dashboard_products") {
          edges {
            node {
              id
              name
              description
            }
          }
          pageInfo {
            hasNextPage
            startCursor
          }
        }
      }
    `,
    props.products,
  );

[jgcmarins]

try to copy the curl from network tabe
and test it through terminal
if there is no data, the problem is on backend
if there is data, the problem is on client

[jgcmarins]

nice
how can we debug it on client?
which methods of relay-experimental are you using?
do you have any link to the code where this problem is happening?

[jean-leonco]

I am using useQuery. In the relay-examples-hooks repo, I saw the UseLazyLoadingQuery, but it didn't come with relay-experimental. Could that be the issue?
The parts of the code where this problem is coming from are use Fragment and UseQuery.
I think the best way to debug is focusing on the useFragment hook. Sometimes that warning shows and sometimes it doesn't show.

[jgcmarins]

the problem is data masking:
data asked by the fragment won't be available on it's parent

this is a relay feature

components have access to the data they ask for and that's it

[jean-leonco]

But how could we have access to data? Since here the root component won't have the information.

[jgcmarins]

colocation
each component ask for the data they will use
a component should not ask for data that won't be used