0916dhkim

export default function NewPost() {
  const navigate = useNavigate();
  const invalidateCache = useCacheInvalidate();
  // ...
  /** @type React.FormEventHandler */
  const handleSubmit = async (e) => {
    e.preventDefault();
    await createPost({title, content});
    invalidateCache('/posts');
    navigate('/posts');

0916dhkim

router.post(
  '/',
  handleErrors(async (req, res) => {
    const post = await prisma.post.create({
      data: {
        title: req.body.title,
        content: req.body.content,
      },
    });

0916dhkim

export function useCacheInvalidate() {
  const cache = unstable_getCacheForType(createResponseCache);
  return (key) => {
    cache.delete(key);
  };
}

0916dhkim

// Original 
export function useServerResponse(location) {
  const key = JSON.stringify(location);
  const cache = unstable_getCacheForType(createResponseCache);
  let response = cache.get(key);
  if (response) {
    return response;
  }
  response = createFromFetch(
    fetch('/react?location=' + encodeURIComponent(key))

0916dhkim

function sendResponse(req, res, component, props = null) {
  props = props ?? {};
  renderReactTree(res, component, props);
}

router.get('/', function(req, res) {
  sendResponse(req, res, Home);
});

router.get('/posts', (req, res) => {

0916dhkim

// Original demo.
async function renderReactTree(res, props) {
  await waitForWebpack();
  const manifest = readFileSync(
    path.resolve(__dirname, '../build/react-client-manifest.json'),
    'utf8'
  );
  const moduleMap = JSON.parse(manifest);
  pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);
}

0916dhkim

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const makeStyles = (theme: Theme) =>
  StyleSheet.create({
    url: {
      color: theme.link,
      textDecorationLine: 'underline',
    },
  });

0916dhkim

const contentMutation = graphql`
  mutation MyComponentContentMutation(
    $postId: ID!
  ) {
    deletePostContent(postId: $postId) {
      id
      content
    }
  }
`;

0916dhkim

type Mutation {
  deletePostContent(postId: ID!): Boolean
}

0916dhkim

const titleMutation = graphql`
  mutation MyComponentTitleMutation(
    $postId: ID!
    $title: String!
  ) {
    changePostTitle(postId: $postId, title: $title) {
      id
      title
    }
  }