Skip to content

Latest commit

 

History

History

solidstart-tanstackquery-tailwind-modules

README.md

SolidStart-TanStackQuery-Tailwind-Modules

This starter kit features SolidStart, combined with TanStack Query, Tailwind CSS, and CSS Modules.

Table of Contents

Overview

This project was developed using the starter.dev kit, and it features SolidStart, combined with TanStack Query, Tailwind CSS, and CSS Modules. It is a great starting point for building a Solid application with a GraphQL API.

SolidStart is a meta-framework for SolidJS that is built on top of the React API and offers a leaner and more performant alternative to React. TanStack Query makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Tailwind CSS is a utility-first CSS framework that offers a lot of flexibility and is easy to use. It is also very performant and offers a lot of customization options. CSS Modules help us to easily group our tailwind/custom classes.

Tech Stack

Included Tooling

Note*

We encountered an issue using Storybook in this showcase involving routes Route layout not defined. SolidStart Link needs to be aware of the routes that are generated by the compiler, but Storybook does not include the vite plugins to do this. You can follow the Discord discussion here

Installation

This README is written with npm in mind but you can use other manager runners (yarn, pnpm, etc.)

CLI (Recommended)

npm create @this-dot/starter --kit solidstart-tanstackquery-tailwind-modules
  • Follow the prompts to select the solidstart-tanstackquery-tailwind-modules starter kit and name your new project.
  • cd into your project directory and run npm install.
  • Run npm run dev to start the development server.
  • Open your browser to http://localhost:5173 to see the included example code running.

Manual

git clone https://github.com/thisdot/starter.dev.git
  • Copy and rename the starters/solidstart-tanstackquery-tailwind-modules directory to the name of your new project.
  • cd into your project directory and run npm install.
  • Run npm run dev to start the development server.
  • Open your browser to http://localhost:5173 to see the included example code running.

Commands

  • dev - Starts a development server backed by Vite on localhost port 5173 with HMR
  • build - Builds a production version of the app to deploy
  • start - Starts the production build with a local version of the adapter
  • test - Runs the test suite
  • storybook - To showcase the component library
  • lint - Uses ESLint to find potential issues in the codebase
  • lint-fix - Tries to auto-fix potential issues
  • format - Fixes formatting issues in the codebase

Demo Implementation

Repository

Live demo

The demo application re-implements some of GitHub's pages and functionality. It uses the OAuth credentials in GitHub to authenticate users with their GitHub accounts and uses window.fetch() to fetch data from the GitHub API. Check out the link above to learn more or check out the demo!

Challenges of Implementing SSR

While we were developing this showcase, we ran into the challenge of running the TanStack query with SolidStart SSR. What is not so apparent from the documentation are the changes under the hood. React triggers rerenders when state changes are pushed. These rerender will compare the new variables against dependencies to determine what to run. This does not require special treatment of the state. Whatever data is passed to React will be used directly as it is. Solid, on the other hand, requires Signals to function. To save you the hassle, TanStack will create stores from the returned data for you. With the dependency tuple as a function and the return value as the store, TanStack Query closes the reactivity loop. Whenever a signal changes, the query will be triggered and load new data. The new data get written to the store, signaling all observers.

For more information, check out the The article name.