Theo's Typesafe Cult•17mo ago

file structure in react query

hello i wanted to know opinionated file structures for RQ im a rtk query users wanted to jump in RQ but i want to know before a good structuring that can scale if you have repos,blogs, or just your opinions about it i would love that

9 Replies

isaac_way•17mo ago

Are you using trpc/react-query? If so, there is no file structure, you just call the queries in your components

H•17mo ago

no im not

barry•17mo ago

theres no file structure in react-query? if i want to abstract it i just do it in the file using it, if its used more than 1 place then it gets it own file im not gonna "pre optimize" my folder structure waste of concern and time

isaac_way•17mo ago

Ah ok, in that case one good approach for reusable queries is to have custom hooks for each query in their own file which handles setting up the query key with the async function and the options etc, also can include any operations you might want to perform on the cache in that same file (invalidation, setting query data etc)

// src/queries/usePostsForUser.ts
const KEY = "posts-for-user"

export function usePostsForUserQuery({userId}:{userId: string}) {
  return useQuery({
    queryKey: [KEY, userId],
    queryFn: async () => {
      return await axios.get('https://myapi.com/posts/' + userId);
    },
  })
}

export function useInvalidatePostsForUser() {
  const client = useQueryClient();
  return (id: string) => {
    client.invalidateQueries([KEY, id]);
  }
}

// src/queries/usePostsForUser.ts
const KEY = "posts-for-user"

export function usePostsForUserQuery({userId}:{userId: string}) {
  return useQuery({
    queryKey: [KEY, userId],
    queryFn: async () => {
      return await axios.get('https://myapi.com/posts/' + userId);
    },
  })
}

export function useInvalidatePostsForUser() {
  const client = useQueryClient();
  return (id: string) => {
    client.invalidateQueries([KEY, id]);
  }
}

Then in your component it's really simple to get the data and perform operations:

function PostsForUserPage() {
  const userId = useParams().id;
  const postsQuery = usePostsForUserQuery({userId});

function PostsForUserPage() {
  const userId = useParams().id;
  const postsQuery = usePostsForUserQuery({userId});

I've worked on projects where every query was done this way and it worked great. It's nice to have an abstraction layer on top of query keys and the fetching logic. Though like @barry said IDK if it's worth it if your query isn't being used in multiple places, u can just put it in the same file

H•17mo ago

yea this aproach seems pretty good writing everything in components is a bit rough to me i was a one file guy but abstracting queries works better not for me but for my team im working with to move fast especially when refactoring things also @barry abstracting only few of them is imo an anti pattern

barry•17mo ago

ive given up on caring about fucking anti patterns tbh, if it makes sense it makes sense and a good pattern is simply an anti pattern which is recognized lol also reading that back to myself that felt really aggressive 🤣 it was not intended to be

isaac_way•17mo ago

yeah personally I think I'd default to the file-per-query approach in the future if I went back to vanilla. It's a nice flow to just create the query in a file -> use it wherever you need it. fetching logic and query keys and stuff are a lot of irrelevant information to have in a component file, and it barely (never?) changes so there's no real value in colocating it in the component in my experience. PLUS if you have a lot of queries, then do some queries in files and some queries in components you may have to burn a lot of energy finding stuff cuz you won't necessarily be able to remember where it is easily (did I abstract this one or did I put it in the component I can't remember??)

barry•17mo ago

also on that, i think i would just have 1 queries file, idk why id need 10 to 20 files being 30 lines long at most

isaac_way•17mo ago

I'm not against big files, but i think multiple is easier to navigate just search by file name usePostsForUser. Seems faster probs. Also when having the operations in the file as well it's easier to keep it organized (if you did the one file you'd have to make sure you kept the related stuff close together which isn't a problem with multiple files) also these individually files can potentially get big if the cache updates get complex or u wanna derive data etc

Gaming

Programming

file structure in react query