git clone https://github.com/nafeu/react-query-table-sandbox.git
cd react-query-table-sandbox
npm install
npm start

React Query — Key Ideas

const {
data: apiResponse,
isLoading
} = useQuery('discussionGroups', fetchData);

React Table — Key Ideas

Understanding Our Mock Data

const fetchData = () => axios.get(`http://localhost:8000/api`);

A Proposal For Structuring React Query with React Table

TableQuery
-> handles query logic (React Query)
-> prepares table data as a prop
-> returns TableInstance

TableInstance
-> memoizes data
-> initiates table instance (React Table)
-> prepares table instance props
-> returns TableLayout

TableLayout
-> utilizes table instance helpers (passed as props)
-> injects props into elements
-> renders table

The TableQuery Component

useEffect(() => {
setTableData(apiResponse?.data);
}, [apiResponse])

The TableInstance Component

const tableInstance = useTable({ columns, data });

The Result

--

--

--

is a musician and full-stack web developer from Toronto, Canada who studied Computer Science and Linguistics at the University of Toronto.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is Server-side rendering and Client-side rendering

How not to go wrong when choosing a static website generator? Gatsby vs Jekyll

Gatsby.js vs Jekyll

Building native apps with JavaScript: Titanium

Let's navigate with React Navigation

7 Obvious Reasons to Use TypeScript

Using Recoil: A New State Management Library

AstraDEX x Jupiter Exchange

React Unit Testing: The Basic

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nafeu Nasir

Nafeu Nasir

is a musician and full-stack web developer from Toronto, Canada who studied Computer Science and Linguistics at the University of Toronto.

More from Medium

The React Project

Testing React Router Children with react testing Library

Build React components with Fluent UI

React v18: Why useEffect suddenly go crazy?

double mount in react useEffect() hook