Problem with first try simple Relay/React example

user_14074974 0
Viewed 559

I read relay official docs and followed example.

Now, I slightly change it for practice. I replaced load query with useQueryLoader

but result is, Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

I think it is related to loadRepoQuery() part, but without it, TypeError: null is not an object (evaluating 'preloadedQuery.fetchKey') occurs.

I think it's due to my misunderstanding. Please help me.

// App.js
import './App.css';
import graphql from 'babel-plugin-relay/macro';
import {
  usePreloadedQuery,
  useQueryLoader,
} from 'react-relay/hooks';

// Define a query
const RepositoryNameQuery = graphql`
  query AppRepositoryNameQuery {
    repository(owner: "facebook", name: "react") {
      name
    }
  }
`;

function RepoRenderer() {
  const [repoQueryRef, loadRepoQuery] = useQueryLoader(RepositoryNameQuery);

  loadRepoQuery();

  return (
    <Repo preloadedQuery={repoQueryRef}/>
  )
}

function Repo(props) {
  const data = usePreloadedQuery(RepositoryNameQuery, props.preloadedQuery);

  return (
    <div className="App">
      <header className="App-header">
        <p>{data.repository.name}</p>
      </header>
    </div>
  );
}

export default function App() {
  return (
    <RepoRenderer/>
  );
}

// 
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { RelayEnvironmentProvider } from 'react-relay';

import relayEnvironment from './relayEnvironment';
import App from './App';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <RelayEnvironmentProvider environment={relayEnvironment}>
      <Suspense fallback={'Loading...'}>
        <App/>
      </Suspense>
    </RelayEnvironmentProvider>
  </React.StrictMode>,
  document.getElementById('root')
);
relay relayjs
1 Answers

I kind of solve this problem. Here's code snippet for newbie like me.

See this too.

// index.js
ReactDOM.render(
  <RelayEnvironmentProvider environment={relayEnvironment}>
    <Suspense fallback={'Loading...'}>
      <App />
    </Suspense>
  </RelayEnvironmentProvider>,
  document.getElementById('root')
);

//app.js
import React ,{  useCallback } from 'react';
import './App.css';
import graphql from 'babel-plugin-relay/macro';
import {
  usePreloadedQuery,
  useQueryLoader,
} from 'react-relay/hooks';


// Define a query
const RepositoryNameQuery = graphql`
  query AppRepositoryNameQuery {
    repository(owner: "yujong-lee", name: "taggy") {
      name
    }
  }
`;

function Repo({queryRef, refetch}) {
  const data = usePreloadedQuery(RepositoryNameQuery, queryRef);

  return (
    <div className="App">
      <header className="App-header">
        <p>{data.repository.name}</p>
      </header>
    </div>
  );
}

function App() {
  const [repoQueryRef, loadRepoQuery] = useQueryLoader(RepositoryNameQuery);

  const refetch = useCallback(() => {
    loadRepoQuery();
  }, [loadRepoQuery])

  if(repoQueryRef !== null) {
    return <Repo queryRef={repoQueryRef} refetch={refetch}/>
  }

  return <button type='button' onClick={() => refetch()}>Fetch</button>
}

export default App;
user_140749740
Related