Bad URL Request is being made

Question

I am adding pagination and query search into my Ticket List

This is the Ticket List Page Code

  const [query, setQuery] = useState("");

  function handleSearch(e) {
    console.log(e.target.value);
    setQuery(e.target.value);
  }
  useEffect(() => {
    dispatch(getAllTicketsAsync(page, query));
  }, [page, query]);

This is Ticket Slice, I am using Redux Toolkit

export const getAllTicketsAsync = createAsyncThunk(
  "tickets/getAllTickets",
  async (page, query) => {
    const response = await getTickets(page, query);
    // The value we return becomes the `fulfilled` action payload
    return response;
  }

and finally this is API call

export async function getTickets(page, query) {
  const response = await fetch(
    `http://localhost:8080/tickets?_page=${page}&_limit=4&q=${query}`
  );
  const data = await response.json();
  const totalItems = await response.headers.get("X-Total-Count");
  console.log(data);

  return {
    data,
    totalItems: +totalItems,
  };
}

);

I could not see what am i doing wrong here? Query should be empty string when nothing is typed in it then why this is the requested URL - "http://localhost:8080/tickets?_page=1&_limit=4&q=[object%20Object]"

Answer 1

The createAsyncThunk accepts three parameters: a string action type value, a payloadCreator callback, and an options object(optional). In your implementation, the second parameter payloadCreator was wrong.

The payloadCreator function will be called with two arguments:

• arg: a single value
• thunkAPI

To pass 2 query parameters, you should pass them as one object.

export const getAllTicketsAsync = createAsyncThunk(
  "tickets/getAllTickets",
  async ({ page, query }, thunkAPI) => {
    const response = await getTickets(page, query);
    // The value we return becomes the `fulfilled` action payload
    return response;
  }
)

useEffect(() => {
    dispatch(getAllTicketsAsync({ page, query }));
}, [page, query]);

Please check the documentation here.