search

facebook / relay

Relay is a JavaScript framework for building data-driven React applications.
https://relay.dev
MIT License
18.27k stars 1.8k forks source link

Unhandled JS Exception: Cannot read property 'providedVariables' of undefined #4654

Closed vestrelatlassian closed 2 months ago

vestrelatlassian commented 3 months ago

Hello, my team is attempting to integrate Relay into a React Native app we are building. Everything's working great until we try using usePaginationFragment...

Loading the preloaded query works perfectly fine. Data is fetched from our Relay-compliant GraphQL server and displayed in the app. The error occurs when calling loadNext...
wtf Screenshot 2024-03-19 at 5 33 13 PM

I have spent an entire day looking through the official Relay docs and examples and googling around for answers. No luck. Any ideas?

Here's the code I'm playing around with. It's not production code so don't judge lol.

export const PopularFeedPaginationQuery = graphql`
  query PopularFeedPaginationQuery {
    ...PopularFeedPaginationFragment
  }
`;

export const PopularFeedPaginationFragment = graphql`
  fragment PopularFeedPaginationFragment on Query
  @argumentDefinitions(first: { type: "Int", defaultValue: 2 }, after: { type: "String" })
  @refetchable(queryName: "PopularFeedPaginationFragment") {
    popularFeed(first: $first, after: $after)
      @connection(key: "PopularFeedPaginationFragment_popularFeed") {
      edges {
        node {
          content {
            id
            title
          }
        }
      }
    }
  }
`;

export function PaginatedPopularFeed({
  queryRef
} : {
  queryRef: PreloadedQuery<PopularFeedPaginationQueryType>;
}): ReactElement {
  const queryData = usePreloadedQuery<PopularFeedPaginationQueryType>(PopularFeedPaginationQuery, queryRef);

  const {
    data, hasNext, loadNext
  } = usePaginationFragment<PopularFeedPaginationQueryType, PopularFeedPaginationFragment$key>(
    PopularFeedPaginationFragment, queryData
  );

  function loadNextPage() {
    loadNext(2);
  }

  const contentList = data.popularFeed.edges
    ?.flatMap(edge => (edge?.node?.content ? [edge.node.content] : [])) ?? [];

  return (
    <View>
      <FlatList
        data={contentList}
        keyExtractor={item => item.id!}
        renderItem={({ item }) => (
          <Text>{item.id}: {item.title}</Text>
        )}
      />
      {hasNext &&
        <Button onPress={loadNextPage)}>
          <Text>Load next page</Text>
        </Button>
      }
    </View>
  );
}
captbaritone commented 3 months ago

Is it possible that the version of relay-runtime you are using does not match the version of relay-compiler that you're using?

If that's not the issue, it would be interesting to see the contents of the file that Relay generates for PopularFeedPaginationQuery.

vestrelatlassian commented 3 months ago

Thanks for the quick response!

Is it possible that the version of relay-runtime you are using does not match the version of relay-compiler that you're using?

I will look into this. Currently, we do not specify the version of relay-runtime in our dependencies. Here's what we have listed in our dependencies that is related to relay;

"react-relay": "^16.1.0",
"@types/react-relay": "^16.0.6",
"@types/relay-test-utils": "^14.1.4",
"babel-plugin-relay": "^16.1.0",
"relay-compiler": "^16.1.0",
"relay-test-utils": "^16.2.0",

If that's not the issue, it would be interesting to see the contents of the file that Relay generates for PopularFeedPaginationQuery.

Sure! I looked over the generated file. I don't see anything that can't be made public. Here it is.

PopularFeedPaginationQuery.graphql.ts.txt

It is a ts file but I added txt because github won't let me upload ts files.

vestrelatlassian commented 3 months ago

Here's what we have listed in our dependencies that is related to relay;

Here's all the occurences of relay-runtime in our yarn.lock file...

It seems like @types/relay-runtime is resolving to version 14 when all others are at 16. Could this be the issue? I'll try making sure that it is set to 16.

"@types/relay-runtime@*":
  version "14.1.23"
  resolved "https://registry.yarnpkg.com/@types/relay-runtime/-/relay-runtime-14.1.23.tgz#fb069900f1815491190ba117cd63fbc7964a79a1"
  integrity sha512-tP2l6YLI2HJ11UzEB7j4IWeADyiPIKTehdeyHsyOzNBu7WvKsyf4kAZDmsB2NPaXp9Lud+KEJbRi/VW+jEDYCA==

"@types/relay-test-utils@^14.1.4":
  version "14.1.4"
  resolved "https://registry.yarnpkg.com/@types/relay-test-utils/-/relay-test-utils-14.1.4.tgz#272ae6b829bd4f83e361df6de0bc40d282b2de1c"
  integrity sha512-F8UuGa4aCH77pO/x8SO2l9Hn+I7xkKfIDysHY4LqEUVFKD71WlVWH5+InY8+IDNS2pX59VPq0jMB3PhRr841Mw==
  dependencies:
    "@types/react" "*"
    "@types/react-relay" "*"
    "@types/relay-runtime" "*"

relay-runtime@16.2.0:
  version "16.2.0"
  resolved "https://registry.yarnpkg.com/relay-runtime/-/relay-runtime-16.2.0.tgz#1126b67749b89f6d4855ebd7e5749033fab5b97f"
  integrity sha512-SrIyYItH1EZUj37NI8nZALasuq7mNyFrrSNgMefhgxNZxTVnr1KCp43LaxUfZqhsWbw4Y00JSGDRQXlcv4STHQ==
  dependencies:
    "@babel/runtime" "^7.0.0"
    fbjs "^3.0.2"
    invariant "^2.2.4"

react-relay@^16.1.0:
  version "16.2.0"
  resolved "https://registry.yarnpkg.com/react-relay/-/react-relay-16.2.0.tgz#ce74e771ee925c03a62491f3cb8268b4d5d82514"
  integrity sha512-f/HtC4whyYmK6/WUeOVakXRoBkV+JEgoSeBHXfIC2U6AuH14NrKXnFicX65LksfzgD1OUfYF6IqGQ4MvO52lTQ==
  dependencies:
    "@babel/runtime" "^7.0.0"
    fbjs "^3.0.2"
    invariant "^2.2.4"
    nullthrows "^1.1.1"
    relay-runtime "16.2.0"

"@types/react-relay@*", "@types/react-relay@^16.0.6":
  version "16.0.6"
  resolved "https://registry.yarnpkg.com/@types/react-relay/-/react-relay-16.0.6.tgz#afc467fab89dc4c96fb1424f84b869750f5c42f2"
  integrity sha512-VTntVQJhlwQYNUlbNgGf8RYy7EtQPRZqsD/w2Si0ygZspJXuNlVdRkklWMFN99EMRhHDpqlNHD8i3wIs7QRz9g==
  dependencies:
    "@types/react" "*"
    "@types/relay-runtime" "*"

relay-test-utils@^16.2.0:
  version "16.2.0"
  resolved "https://registry.yarnpkg.com/relay-test-utils/-/relay-test-utils-16.2.0.tgz#0f94b65a169bca2fc98d3f06b93e0cc006bb7a97"
  integrity sha512-nslgYqW7bIwEvlUbZoISgLz2TGh3/wHZWEQSwQ7oFZ8gpw6mRatG1ortIywGLhfqsRw5q9t6BJXdiqbl4BPu4w==
  dependencies:
    "@babel/runtime" "^7.0.0"
    fbjs "^3.0.2"
    invariant "^2.2.4"
    relay-runtime "16.2.0"
vestrelatlassian commented 3 months ago

It seems like @types/relay-runtime is resolving to version 14 when all others are at 16. Could this be the issue? I'll try making sure that it is set to 16.

Nevermind lol. Seems like version 14 is latest; https://www.npmjs.com/package/@types/relay-runtime

captbaritone commented 3 months ago

I don’t see relay-compiler in your yarn.lock excerpt, but the version of relay-runtime and relay-compiler and react-relay need to match exactly. (Your error looks like a mismatch between what the compiler is emitting and what the runtime is expecting)

If that’s not the issue, can you share the contents of the file that the compiler generated for the query?

Jordan Eldredge

jordaneldredge.com @captbaritone http://twitter.com/captbaritone

On Tue, Mar 19, 2024 at 9:40 PM Vandolf Estrellado @.***> wrote:

It seems like @types/relay-runtime is resolving to version 14 when all others are at 16. Could this be the issue? I'll try making sure that it is set to 16.

Nevermind lol. Seems like version 14 is latest; @.***/relay-runtime

— Reply to this email directly, view it on GitHub https://github.com/facebook/relay/issues/4654#issuecomment-2008651267, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABHXLZPFHXMWX4MUTIYBKTYZEHLPAVCNFSM6AAAAABE6XKIKCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBYGY2TCMRWG4 . You are receiving this because you commented.Message ID: @.***>

vestrelatlassian commented 3 months ago

the version of relay-runtime and relay-compiler and react-relay need to match exactly.

Here's the yarn.lock snippet with those.

relay-runtime@16.2.0:
  version "16.2.0"

relay-compiler@^16.1.0:
  version "16.2.0"

react-relay@^16.1.0:
  version "16.2.0"
vestrelatlassian commented 3 months ago

can you share the contents of the file that the compiler generated for the query?

PopularFeedPaginationQuery.graphql.ts.txt

It is a ts file but I added txt because github won't let me upload ts files.

ma-cote commented 2 months ago

Hi,

I had the same issue and found that the query name must be different than the fragment name. You have this error because the query name (@refetchable(queryName: "PopularFeedPaginationFragment")) is the same as the fragment name (fragment PopularFeedPaginationFragment).

You could rename your refetchable query to PopularFeedPaginationFragmentQuery for example.

vestrelatlassian commented 2 months ago

OMG, if this is the actual issue, then you just saved my life @ma-cote !!! I'll try it out in a few hours and report back here 🔥 🔥🔥🔥🔥🔥🔥🔥

vestrelatlassian commented 2 months ago

@ma-cote, THAT WAS THE ISSUE! I cannot believe I did not try different values for that string, though I could swear that I did 🤦 🤦 🤦 🤦

I'll close this issue now! THANKS SO MUCH! This will probably help other people too 🔥 🔥 🔥 🔥 🔥 🔥 🔥

captbaritone commented 2 months ago

Is this something that the Relay compiler should/could report as an error?

tobias-tengler commented 2 months ago

100%, I'm surprised it doesn't.

captbaritone commented 2 months ago

Let me see if I can get a unit test repro for the compiler

captbaritone commented 2 months ago

4663