Relay: [modern] calling preloadQuery causes "Object(...) is not a function" error

[Choongkyu]

Hello. When running preloadQuery, I'm running into an issue where I get this message:

×
TypeError: Object(...) is not a function
App
src/App.tsx:19
  16 |   }
  17 | `;
  18 | function App() {
> 19 |   const rootQuery = preloadQuery(
  20 |     environment,
  21 |     AppQuery,
  22 |     { userId: "2" },
View compiled
▼ 16 stack frames were expanded.
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js:14803
mountIndeterminateComponent
node_modules/react-dom/cjs/react-dom.development.js:17482
beginWork
node_modules/react-dom/cjs/react-dom.development.js:18596
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:188
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:237
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:292
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js:23203
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:22157
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js:22130
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:21756
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js:21188
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:24373
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:24758
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:21903
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:24757
render
node_modules/react-dom/cjs/react-dom.development.js:24840
▲ 16 stack frames were expanded.
Module../src/index.tsx
src/index.tsx:9
   6 | import { RelayEnvironmentProvider } from "react-relay/hooks";
   7 | import { environment } from "./RelayEnvironment";
   8 | 
>  9 | ReactDOM.render(
  10 |   <React.StrictMode>
  11 |     <RelayEnvironmentProvider environment={environment}>
  12 |       <React.Suspense fallback="loading...">
View compiled
__webpack_require__
/Users/user/code/microservices-nodejs/front-end-service/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/user/code/microservices-nodejs/front-end-service/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:670:18
__webpack_require__
/Users/user/code/microservices-nodejs/front-end-service/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
checkDeferredModules
/Users/user/code/microservices-nodejs/front-end-service/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
/Users/user/code/microservices-nodejs/front-end-service/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:87
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

RelayEnvironment is taken straight from here and App.tsx, which is where the call to preloadQuery is happening is here:

import React from "react";
import { CreatePost } from "./CreatePost";
import "./App.css";
import { usePreloadedQuery, preloadQuery } from "react-relay/hooks";
import graphql from "babel-plugin-relay/macro";
import AppQuery from "./__generated__/AppQuery.graphql";
import { environment } from "./RelayEnvironment";

export const query = graphql`
  query AppQuery($userId: String!) {
    posts(userId: $userId) {
      userId
      title
      postId
    }
  }
`;
function App() {
  const rootQuery = preloadQuery(
    environment,
    AppQuery,
    { userId: "2" },
    { fetchPolicy: "store-or-network" }
  );
  // const data = usePreloadedQuery(query, rootQuery);
  // console.log("dat>>>", data);
  return (
    <div className="App">
      <CreatePost />
    </div>
  );
}

export default App;

this is on the following versions:

    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-relay": "^10.0.0", // also tried "0.0.0-experimental-7f19cb58"

[zth]

You probably need to use the experimental version, but you did mention you already tried that. Could you try again with the experimental version, but pinned to that specific version? So without a leading ^.

[zth]

Oh, sorry, actually this is probably another issue with the TypeScript types like the other issue you opened. preloadQuery has been deprecated in the last version and now renamed to preloadQuery_DEPRECATED, but the TypeScript types you're using probably still reflects the old export. You could try changing the import to the new name and see if that works?

[Choongkyu]

thanks for the response. I tried pinning it to "0.0.0-experimental-7f19cb58" to the same result. I also just tried to fiddle with the types to export preloadQuery_DEPRECATED so that I can import it as such. I'd also be open to switching over to flow if the types there are current with the relay hooks API and was wondering if that's the case. I was wondering if there's an example of how to use hooks if preloadQuery is deprecated, since I was working off of the example in the documentation and the issue-tracker. I also noticed that there's a relay-hooks project that's still maintained. I was wondering if the efforts there are completely unrelated to those here.

[sibelius]

I think a good reproduction would be to upgrade issue-tracker or https://github.com/sibelius/relay-workshop to understand what is breaking and so we can fix together

[JacekKosciesza]

I've got the same error with preloadQuery: TypeError: Object(...) is not a function

[Choongkyu]

@sibelius thanks for the advice. I'll proceed with a repro on the issue tracker and/or the relay-hooks project.

[zth]

@zebralight In the latest Relay release there's a useQueryLoader hook that you can use instead of preloadQuery. There's also the lower level API loadQuery instead of preloadQuery, which take the same arguments IIRC, if you need to start loading a query in a place where you can't use a hook to get the loadQuery method like with useQueryLoader.

Check out the docs here for more info: https://relay.dev/docs/en/experimental/api-reference#usequeryloader

[zth]

The Flow types shipped with Relay are always up to date, but I'm unsure whether Flow types are shipped for the experimental module as of now. Also, because Flow can't emit declaration files as of now like TypeScript can, using Flow with Relay requires some more buy-in in the form of needing to replicate a lot of the Relay .flowconfig for Relay to be happy.

In my opinion, coordinating around updating the TypeScript type declarations quicker is a better approach.

[goldhand]

The experimental/step-by-step docs should be updated or include the specific versions that work. As a new user exploring this tech I'm really discouraged when the simple tutorial apps don't work.

@zebralight you can use npm install -S [email protected] [email protected] to get this working.

[sibelius]

@goldhand can you send a pull request fixing it?

[Choongkyu]

@zth sorry for the delayed response. Got super busy. I tried using useQueryLoader after updating react-relay to 10.0.1, @experimental as well as @0.0.0-experimental-a1a40b68 but am getting an error saying that useQueryLoader isn't exported.

[damikun]

I have equal problem in case i wanna use loadQuery or preloadQuery_DEPRECATED did not found solution yet..

Solved:
After i asked @sibelius i get info that it was wrong export to workeround use loadQuery.loadQuery info available under https://github.com/facebook/relay/pull/3191

[hegelstad]

@goldhand can you send a pull request fixing it?

I would like to contribute but there are some barriers, if I try to press "Edit" on the step-by-step page https://relay.dev/docs/en/experimental/step-by-step I am getting a 404:

[damikun]

You can access over git-hub the link from docs looks as broken...

https://github.com/facebook/relay/tree/master/website/versioned_docs/version-experimental

[earvinLi]

The experimental/step-by-step docs should be updated or include the specific versions that work. As a new user exploring this tech I'm really discouraged when the simple tutorial apps don't work.

@zebralight you can use npm install -S [email protected] [email protected] to get this working.

hi @goldhand, thanks so much for the solution that solves the problem for me, but still wanna say according to the official 'Step by Step' doc seems like the app wouldn't work according to which I got "react-relay": "^0.0.0-experimental-183bdd28" and "relay-runtime": "^10.0.1"

discouraging is just one thing but when facing this issue i could not help wondering two things: 1 is a1a40b68 newer than 183bdd28? and 2 7.0.0 is kind of very far from 10.0.1 am i forced to use a very old version of this new tech?, which could cause me to think i might ran into more problems in the future

but maybe it's all because people are still doing all kinds of experiments, which makes things confusing during the progress but finally clear :)

[dantxal]

Just a tip for anyone having this issue.

If you simply:

• change the version of "react-relay" in "package.json" from "^0.0.0-experimental-183bdd28" to "0.0.0-experimental-a1a40b68";
• make the change to [email protected] as suggested by @goldhand
• delete "node_modules" folder;
• run "yarn" to install packages

It may not work for you, as it didnt for me.

What worked for me was running yarn remove react-relay and then yarn add [email protected].

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jstejada]

this should work with loadQuery in the new 11 rc release. let us know if you are still having issues

[ucorina]

Bumped into this issue as the docs still use preloadQuery. Fix is to simply replace preloadQuery with loadQuery 👍

Noticed there's a PR open to update the docs as well here: https://github.com/facebook/relay/pull/3412