POST request inside GET request possible?

[ninjaswithglocks]

Hello! Is there any way to chain a query where you can do a POST request (or any request really) immediately after a GET request? I know about dependent queries but that doesn't let you do a request in the response of another request I think.

My backend is powered by Laravel Sanctum's cookie-based authentication, so it needs to do a GET request to gain the csrf cookie and then immediately login. It looks like this:

axios.get('http://localhost/sanctum/csrf-cookie').then((response) => {
  axios.post('http://localhost/login', {
     email: data.email,
     password: data.password,
  })
  .catch((error) => {
     console.log(error.response);
  });
});

Is it possible to simulate something like this with the React-Query library?

It's only needed for the /login POST part of my application so if it's not possible to do this approach with React-Query I can very well keep using axios in this one specific use case.

[donysukardi]

You can use useMutation for your use case if you want to still keep track of submitting state, to display loader.

[ninjaswithglocks]

You can use useMutation for your use case if you want to still keep track of submitting state, to display loader.

I've got it working with the following structure:

// Let axios send the cookie tokens through its headers
axios.defaults.withCredentials = true;

// Fire off query to initialize cookies,
useQuery('loginCookies', () => {
  axios.get('http://localhost/sanctum/csrf-cookie');
});

// Now that the cookies are set, create a mutation that does a POST request once the form has been filled in
const loginRequest = useMutation((data) =>
  axios.post('http://localhost/login', data)
);

// If the login request with the given cookie headers are a succesful request, query the init userState
useQuery('userInitData', () => axios.get('http://localhost/api/user'), {
  enabled: loginRequest.isSuccess,
  onSuccess: (result) => {
    // If that is also a succes, log the user in on the front-end as well 
    // (set userContext data so that it can access private routes etc)
    auth.login(result.data);
  },
});