Query.use() triggers a "TypeError: Invalid value used as weak map key"

[MoOx]

I am facing this issue with a setup I am creating: Next + Relay + ReScript (so relay-nextjs + rescript-relay + ).

This is the first query I am actually writing

(note that I used rescript-relay without any issue for multiples mutations.)

I have literally no clue why I am facing this and any search engine is clearly not helping.

Any help appreciated :)

[zth]

Interesting, never seen this before either. Relay uses a bunch of WeakMap internally, I would assume it has to do with them (rescript-relay itself does nothing special here). I guess we can start with the basics - what versions are you on?

[MoOx]

  "dependencies": {
    "@rescript-react-native/safe-area-context": "^4.0.0",
    "@rescript-react-native/svg": "^12.1.9",
    "@rescript/react": "^0.10.3",
    "@ryyppy/rescript-promise": "^2.1.0",
    "@sentry/nextjs": "^6.19.7",
    "@socialgouv/matomo-next": "^1.3.0",
    "bs-fetch": "^0.6.2",
    "get-graphql-schema": "^2.1.2",
    "graphql": "^16.3.0",
    "graphql-relay": "^0.10.0",
    "next": "^12.1.5",
    "next-auth": "^4.3.3",
    "next-i18next": "^11.0.0",
    "next-transpile-modules": "^9.0.0",
    "react": "18.0.0",
    "react-dom": "^18.0.0",
    "react-from-svg": "^5.1.2",
    "react-multiversal": "https://github.com/MoOx/react-multiversal#a22322c",
    "react-native-safe-area-context": "^4.2.4",
    "react-native-svg": "^12.3.0",
    "react-native-web": "^0.17.7",
    "react-relay": "^13.2.0",
    "relay-compiler": "^13.2.0",
    "relay-nextjs": "^0.8.0",
    "relay-runtime": "^13.2.0",
    "rescript": "^9.1.4",
    "rescript-js": "^0.7.0",
    "rescript-next": "^12.0.1",
    "rescript-react-native": "^0.68.0",
    "rescript-relay": "^1.0.0-beta.20",
    "rescript-tinycolor": "^4.0.0",
    "rescript-webapi": "^0.6.1"
  }

I tried to get latest 22, but faced this #355

[MoOx]

I tried 21 but same error. I don't have a clue how to fix this

TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at getQueryResourceForEnvironment (~/node_modules/react-relay/lib/relay-hooks/QueryResource.js:447:17)
    at useLazyLoadQueryNode (~/node_modules/react-relay/lib/relay-hooks/useLazyLoadQueryNode.js:42:23)
    at Object.useLazyLoadQuery (~/node_modules/react-relay/lib/relay-hooks/useLazyLoadQuery.js:34:14)
    at use (webpack-internal:///./src/pages/PageAccountEditAuthenticated.bs.js:35:63)
    at PageAccountEditAuthenticated (webpack-internal:///./src/pages/PageAccountEditAuthenticated.bs.js:112:21)
    at renderWithHooks (~/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5448:16)
    at renderIndeterminateComponent (~/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5521:15)
    at renderElement (~/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5736:7)
    at renderNodeDestructive (~/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5875:11)

My PageAccountEditAuthenticated module looks like this

// open ReactNative
// open ReactNative.Style
// open ReactMultiversal

module GetUserQuery = %relay(`
  query PageAccountEditAuthenticated_getUser_Query($uuid: ID!) {
    usersPermissionsUser(id: $uuid) {
      data {
        id
        attributes {
          username
          email
          # provider
          # confirmed
          # blocked
          # role
          # profilePicture
          fullname
          bio
          # link_website
          # link_instagram
          # link_tiktok
          # link_facebook
          # link_youtube
          # email_public
          # link_twitter
          # createdAt
          # updatedAt
        }
      }
    }
  }
`)

@react.component
let make = (~userId) => {
  open ReScriptJs
  Js.Console.log(("userId", userId))

  let queryData = GetUserQuery.use(
    ~variables={
      uuid: userId,
    },
    (),
  )

  Js.Console.log(("queryData", queryData))
  switch queryData.usersPermissionsUser {
  | None => <WebsiteLoader />
  | Some(user) => {
      Js.Console.log(("user", user))
      user.data
      ->Option.flatMap(data => data.attributes)
      ->Option.map(userDataAttributes =>
        <PageAccountEditAuthenticatedAndLoaded userId userDataAttributes />
      )
      ->Option.getWithDefault(<WebsiteError />)
    }
  }
}

compiled page

// Generated by ReScript, PLEASE EDIT WITH CARE

import * as Curry from "rescript/lib/es6/curry.js";
import * as React from "react";
import * as Belt_Option from "rescript/lib/es6/belt_Option.js";
import * as Caml_option from "rescript/lib/es6/caml_option.js";
import * as WebsiteError from "../components/WebsiteError.bs.js";
import * as RescriptRelay from "rescript-relay/src/RescriptRelay.bs.js";
import * as WebsiteLoader from "../components/WebsiteLoader.bs.js";
import * as RelayRuntime from "relay-runtime";
import * as Hooks from "react-relay/hooks";
import * as RescriptRelay_Internal from "rescript-relay/src/RescriptRelay_Internal.bs.js";
import * as PageAccountEditAuthenticatedAndLoaded from "./PageAccountEditAuthenticatedAndLoaded.bs.js";
import * as PageAccountEditAuthenticated_getUser_Query_graphql from "../__generated__/PageAccountEditAuthenticated_getUser_Query_graphql.bs.js";

function use(variables, fetchPolicy, fetchKey, networkCacheConfig, param) {
  var data = Hooks.useLazyLoadQuery(PageAccountEditAuthenticated_getUser_Query_graphql.node, RescriptRelay_Internal.internal_cleanObjectFromUndefinedRaw(PageAccountEditAuthenticated_getUser_Query_graphql.Internal.convertVariables(variables)), {
        fetchKey: fetchKey,
        fetchPolicy: RescriptRelay.mapFetchPolicy(fetchPolicy),
        networkCacheConfig: networkCacheConfig
      });
  return RescriptRelay_Internal.internal_useConvertedValue(PageAccountEditAuthenticated_getUser_Query_graphql.Internal.convertResponse, data);
}

function useLoader(param) {
  var match = Hooks.useQueryLoader(PageAccountEditAuthenticated_getUser_Query_graphql.node);
  var loadQueryFn = match[1];
  var loadQuery = React.useMemo((function () {
          return function (param, param$1, param$2, param$3) {
            return Curry._2(loadQueryFn, PageAccountEditAuthenticated_getUser_Query_graphql.Internal.convertVariables(param), {
                        fetchPolicy: param$1,
                        networkCacheConfig: param$2
                      });
          };
        }), [loadQueryFn]);
  return [
          Caml_option.nullable_to_opt(match[0]),
          loadQuery,
          match[2]
        ];
}

function $$fetch(environment, variables, onResult, networkCacheConfig, fetchPolicy, param) {
  Hooks.fetchQuery(environment, PageAccountEditAuthenticated_getUser_Query_graphql.node, PageAccountEditAuthenticated_getUser_Query_graphql.Internal.convertVariables(variables), {
          networkCacheConfig: networkCacheConfig,
          fetchPolicy: RescriptRelay.mapFetchQueryFetchPolicy(fetchPolicy)
        }).subscribe({
        next: (function (res) {
            return Curry._1(onResult, {
                        TAG: /* Ok */0,
                        _0: PageAccountEditAuthenticated_getUser_Query_graphql.Internal.convertResponse(res)
                      });
          }),
        error: (function (err) {
            return Curry._1(onResult, {
                        TAG: /* Error */1,
                        _0: err
                      });
          })
      });
  
}

function fetchPromised(environment, variables, networkCacheConfig, fetchPolicy, param) {
  var __x = Hooks.fetchQuery(environment, PageAccountEditAuthenticated_getUser_Query_graphql.node, PageAccountEditAuthenticated_getUser_Query_graphql.Internal.convertVariables(variables), {
          networkCacheConfig: networkCacheConfig,
          fetchPolicy: RescriptRelay.mapFetchQueryFetchPolicy(fetchPolicy)
        }).toPromise();
  return __x.then(function (res) {
              return Promise.resolve(PageAccountEditAuthenticated_getUser_Query_graphql.Internal.convertResponse(res));
            });
}

function usePreloaded(queryRef, param) {
  var data = Hooks.usePreloadedQuery(PageAccountEditAuthenticated_getUser_Query_graphql.node, queryRef);
  return RescriptRelay_Internal.internal_useConvertedValue(PageAccountEditAuthenticated_getUser_Query_graphql.Internal.convertResponse, data);
}

function retain(environment, variables) {
  var operationDescriptor = RelayRuntime.createOperationDescriptor(PageAccountEditAuthenticated_getUser_Query_graphql.node, PageAccountEditAuthenticated_getUser_Query_graphql.Internal.convertVariables(variables));
  return environment.retain(operationDescriptor);
}

var GetUserQuery = {
  Types: undefined,
  use: use,
  useLoader: useLoader,
  $$fetch: $$fetch,
  fetchPromised: fetchPromised,
  usePreloaded: usePreloaded,
  retain: retain
};

function PageAccountEditAuthenticated(Props) {
  var userId = Props.userId;
  console.log([
        "userId",
        userId
      ]);
  var queryData = use({
        uuid: userId
      }, undefined, undefined, undefined, undefined);
  console.log([
        "queryData",
        queryData
      ]);
  var user = queryData.usersPermissionsUser;
  if (user !== undefined) {
    console.log([
          "user",
          user
        ]);
    return Belt_Option.getWithDefault(Belt_Option.map(Belt_Option.flatMap(user.data, (function (data) {
                          return data.attributes;
                        })), (function (userDataAttributes) {
                      return React.createElement(PageAccountEditAuthenticatedAndLoaded.make, {
                                  userId: userId,
                                  userDataAttributes: userDataAttributes
                                });
                    })), React.createElement(WebsiteError.make, {}));
  } else {
    return React.createElement(WebsiteLoader.make, {});
  }
}

var make = PageAccountEditAuthenticated;

export {
  GetUserQuery ,
  make ,
  
}
/* react Not a pure module */

[zth]

Do you have a context provider setup for RescriptRelay, with your environment passed into it?

[MoOx]

Yeah I carefully followed the doc. I can give you access to the repo when I get back to my computer if that can help.

[zth]

Sure! Looking at the error, something seems up with the environment (that's what Relay seems to use for the cache key in the WeakMap).

[zth]

@MoOx ok I had a quick look and your environment is not in context, so there's some piece missing that transfers that. I haven't used relay-nextjs but there's a bunch of code commented out in edit.js which seems to not be commented out in their docs, so I'd start there.

[MoOx]

I am on it. I will let you know what I did wrong when I found out. Thanks for having a look !

[zth]

Sounds good. That does look like a pretty painful setup with Next and Relay, hoping you can find a good way of streamlining it.

[MoOx]

Assuming is more a setup issue with relay-nextjs, so consider this resolved (it's not but I have opened a discussion there, and I think as always I will find the way to make this works myself). Thanks for trying to help, I will let you know how I did fix this (or not) somehow :)

[MoOx]

If you are curious you can follow RevereCRE/relay-nextjs#67

[MoOx]

In short it was an obvious myconfiguration, related to a "huge" mess to sort related directly to Next, Next-Auth (and user session) and Relay. Nothing to do with rescript-relay.

If anyone has a hard time to setup this in short: change the relay env whenever you session changed (since you might be interested by a jwt token to make authenticated request at some point).

My current setup is basically something like this (in my _app.js)

const RelayEnvironmentProvider_SessionAware = ({ Component, pageProps }) => {
  let session = useSession();
  const relayProps = getRelayProps(
    pageProps,
    getInitialPreloadedQuery({
      createClientEnvironment: () => getClientEnvironment(session.data),
    })
  );
  let env =
    relayProps.preloadedQuery?.environment ??
    getClientEnvironment(session.data);

  return (
    <RelayEnvironmentProvider
      environment={env}
    >
      <Component {...pageProps} {...relayProps} />
    </RelayEnvironmentProvider>
  );
};

const App = ({ Component, pageProps: { session, ...pageProps } }) => {
  return (
    <SessionProvider session={session}>
      <RelayEnvironmentProvider_SessionAware
        Component={Component}
        pageProps={pageProps}
      />
    </SessionProvider>
  );
};

getClientEnvironment is basically this

open ReScriptJs

// https://reverecre.github.io/relay-nextjs/docs/configuration#routing-integration
// coupled with next-auth needs

type clientEnvData = {
  session: Js.Nullable.t<Auth.session>,
  relayEnv: option<RescriptRelay.Environment.t>,
}
let clientEnv = ref({
  session: Js.Nullable.undefined,
  relayEnv: None,
})

let getClientEnvironment = (session: Js.Nullable.t<Auth.session>) => {
  if Js.typeof(Js.window) === #undefined {
    // Js.Console.log2(
    //   "RelayEnvClient getClientEnvironment: undefined bye, window is",
    //   Js.typeof(Js.window),
    // )
    None
  } else {
    // consider session change only if jwt changes
    // (otherwise it doesn't matter for graphql calls)
    let sessionChanged =
      session
      ->Js.Nullable.toOption
      ->Option.flatMap(session => session.user)
      ->Option.map(user => user.jwt) !==
        clientEnv.contents.session
        ->Js.Nullable.toOption
        ->Option.flatMap(session => session.user)
        ->Option.map(user => user.jwt)
    if sessionChanged || clientEnv.contents.relayEnv->Option.isNone {
      Js.Console.log2(
        "RelayEnvClient getClientEnvironment: defining env from session change",
        session,
      )
      clientEnv.contents = {
        session: session,
        relayEnv: Some(
          RelayEnv.makeEnvironment(
            session,
            RelayNextJs.getRelaySerializedState()->Option.flatMap(state => state.records),
            false,
          ),
        ),
      }
    }
    clientEnv.contents.relayEnv
  }
}

In short: overtime the session seems to change, relay env is recreated.

Concerning SSR/Client side this should work without trouble.
In my case I am now having access properly to the next auth session data (so my jwt) on the part of the code where I actually make fetch call to the graphql endpoint.

[zth]

@MoOx glad you figured it out! It all still looks quite painful 😆 Hoping you get more smooth sailing from here on!

[MoOx]

If this can help anyone, vercel/next.js#33892 is currently the way to go to setup next + relay properly without headache !