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 in the world is so exciting about React Native?

[DMWN #40] Learn React Context in 1 Minute ✨

Moving from Angular to Vue.js

How to Easily Develop With React Your Own Custom Fields Within Gutenberg WordPress Editor

How to Capture Leads From Live Chat In HubSpot — The Stream Blog

Why Developers Love Node.js & what’s their main issue with it?

Source: the author

Set up Tailwindcss on Nextjs project

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

Build a React app with webpack (Without Create React App)

Doing React Twice at Flatiron School

Improve the performance of your React and React Native applications: Caching and managing your API…

How to build a React app using Remix