wise-white

Best practice for returning response data

All of my api resources (responses) are wrapping in data - regardless of whether it's a collection or not. I'm just wondering where the best place to handle this is? Currently I have a userClient that simply houses all of the API calls so it returns the whole response. Then my userQueries can access that at response.data.data but I'm just wondering if maybe my userClient should simply return what's in the data object?

3 Replies

wise-whiteOP•3y ago

// userQueries.ts
const deactivateUser = (id: string) => {
  const queryClient = useQueryClient();

  const key = ['users', 'view', id];

  return useMutation({
    mutationFn: (data: DeactivatePayload) => userClient.deactivateUser(id, data).then((res) => res.data.data),
    onSuccess: async (data) => {
      const previousUser = queryClient.getQueryData<UserData>(key);

      if (previousUser) {
        queryClient.setQueryData<UserData>(key, data);
      }
    },
  });
};

// userClient.ts
  deactivateUser: (id: string, data: DeactivatePayload) =>
    axios.post<{ data: UserData }>(`/users/${id}/deactivate`, data),

// userQueries.ts
const deactivateUser = (id: string) => {
  const queryClient = useQueryClient();

  const key = ['users', 'view', id];

  return useMutation({
    mutationFn: (data: DeactivatePayload) => userClient.deactivateUser(id, data).then((res) => res.data.data),
    onSuccess: async (data) => {
      const previousUser = queryClient.getQueryData<UserData>(key);

      if (previousUser) {
        queryClient.setQueryData<UserData>(key, data);
      }
    },
  });
};

// userClient.ts
  deactivateUser: (id: string, data: DeactivatePayload) =>
    axios.post<{ data: UserData }>(`/users/${id}/deactivate`, data),

optimistic-gold•3y ago

You can do all sorts of stuff in the queryFn. What you return from it will be stored in cache under given queryKey. So it mostly depends on your use-case if it's better to unwrap it pre-cache or not. You can also use select function. Good article to read - https://tkdodo.eu/blog/react-query-data-transformations Although it's about react-query it applies to vue as well

React Query Data Transformations

Learn the possibilities to perform the quite common and important task of transforming your data with react-query

wise-whiteOP•3y ago

Thanks for that. I think previously I've only ever returned the data attribute of the response but then all of a sudden when you need access to the headers or status... it becomes painful!

Gaming

Programming

Best practice for returning response data

Did you find this page helpful?