Open2023/03/01にコメント追加9

Remixまわり備忘

Remix

bisquit_dev

404エラーが発生したときに疑うこと

基本的にはRouteが見つからないケース。

URLのパスがroutesに存在しているか？
fetcher.loadのパスがroutesに存在しているか？

デフォルトのErrorBoundary / CatchBoundary

bisquit_dev

fetcher.loadとfetcher.submitの違いは？

fetcher.load → loaderが呼ばれる
fetcher.submit → method = getならloaderが呼ばれる。get以外ならactionが呼ばれる

Any form submissions that are "post" will call your data "action". Any "get" submissions (<Form method="get">) will be handled by your "loader".

https://remix.run/docs/en/v1/guides/data-writes#:~:text=Any form submissions that are "post" will call your data "action". Any "get" submissions (<Form method%3D"get">) will be handled by your "loader".

If a non-GET request is made to your route (POST, PUT, PATCH, DELETE) then the action is called before the loaders.

https://remix.run/docs/en/v1/route/action#:~:text=If a non-GET request is made to your route (POST%2C PUT%2C PATCH%2C DELETE) then the action is called before the loaders.

じゃあfetcher.loadとfetcher.submit（method = get）の違いは？

bisquit_dev

sergiodxa — 2022/11/04 01:07
fetcher.load to send a GET request to a URL
fetcher.submit to send both GET or POST to a URL but attaching user data

bisquit_dev

実験

fetcher.load('/data/some')
-> revalidationは起きない

fetcher.submit(null, { action: '/data/some' }
fetcher.submit(null, { action: '/data/some', method: 'get' }
-> revalidationは起きない

fetcher.submit(null, { action: '/data/some', method: 'post' }
fetcher.submit(null, { action: '/data/some', method: 'put' }
fetcher.submit(null, { action: '/data/some', method: 'patch' }
fetcher.submit(null, { action: '/data/some', method: 'delete' }
-> revalidationは起きる

bisquit_dev

実験

fetcher.load('/data/null?foo=bar');

export async function loader({ request, params }: LoaderArgs) {
  console.log('loader', request.url);
  // http://localhost:3100/data/null?foo=bar
  return null;
}

fetcher.submit({ foo: 'bar' }, { action: '/data/null', method: 'get' })

export async function loader({ request, params }: LoaderArgs) {
  console.log('loader', request.url);
  // http://localhost:3100/data/null?foo=bar
  return null;
}