const PageComponent = () => {
  const initialData = useLoaderData()
  const transition = useTransition()

  return (
    <h1>
      {transition.submission
        ? `Submitted ${transition.submission.formData.get('username')}`
        : `Already have ${initialData?.username || 'nothing'}`
       }
    </h1>
   )
 }

const PageComponent = () => {
  const { data, submission, state } = useFetcher()
  const initialData = useLoaderData()
  
  const formData = submission.formData

  const food = fetcher.data
    ? `${data.cuisine} ${data.dish}`
    : initialData.food

  return (
    <h1>
      {state === 'submitting'
        ? `We are eating ${formData.get('dish')} for dinner`
        : `We are eating ${food || 'nothing'} for dinner`
      }
    </h1>
 }

function App({ Component, pageProps }) {
  const [queryClient] = useState(
    () => new QueryClient()
  )

  return (
    <QueryClientProvider client={queryClient}>
      {/*... app stuff goes here */}
    </QueryClientProvider>
  )
 }

function Page({ pageData }) {
  const { data } = useQuery(
    ['data'],
    () => {
      return getData(user)
    },
    {
      initialData: pageData,
    }
  )

  return <Component />
}

const getServerSideProps = async ({
  req,
  res
}) => {
  const user = await getUser()
 
  return {
    props: {
      pageData: await fetchData(user)
    },
  }
}

const useAddTodo = (user) => {
  const queryClient = useQueryClient()

  return useMutation(
    (newTodo: TodoProps) => addTodo(newTodo, userEmail), {
      onMutate: async (newTodo) => {
        await queryClient.cancelQueries(['todos'])

        const previousTodos = queryClient.getQueryData(['todos'])

        queryClient.setQueryData(['todos'], (oldTodos => [
          newTodo,
          ...oldTodos,
        ])

        return { previousTodos }
      },
      onError: (err, _newTodo, context) => {
        queryClient.setQueryData(['todos'], context.previousTodos)
      },
      onSettled: () => {
        queryClient.invalidateQueries(['todos'])
      },
    })
  )
}