在页面重新加载后进行突变时响应未更新但最初正在更新我可以在.network选项卡中看到

Question

Here, i am trying to add "view" on mutation. the first view created after a reload runs into this issue. If you get the 404 page and hit the back button, it seems to work right the second time.

Here's what happens, big picture (it happens too fast to see without pausing with debugger): 1.send mutation 2.get result 3.setViewId is called, which updates the URL query string 4.page is rendered, hits a check for the view based on ID. If it's not in the show's list of views, redirect to /not-found (404 page).

The last one is where it gets weird. When debugging, the shows include the new view in the.network tab …but finding the view by ID returns undefined because the response i am getting from the useQuery does not update the record after page reload. I have no idea why at this point.

creating viewId and setViewId

  const viewId = Number(searchParams.get('viewId')) || undefined;
  const setViewId = useCallback<(viewId: number, replace?: boolean) => void>(
    (id: number, replace = false) => {
      navigate(route(`?viewId=${id}`), { replace });
      setViewZoneId(undefined);
    },
    [navigate, route],
  );

  // If view id is not set, set it
  useEffect(() => {
    if (viewId == null) setViewId(show.defaultViewId, true);
  }, [setViewId, show.defaultViewId, viewId]);

  // If there's a view but view zone id isn't set, set it
  useEffect(() => {
    if (viewId == null || viewZoneId != null) return;
    const view = show.views.find(({ id }) => id === viewId);
    if (view == null) return;
    setViewZoneId(view.viewZones[0].id);
  }, [show.views, viewId, viewZoneId]);
  // end hooks

  if (viewId == null) return null;

  const view = show.views.find(({ id }) => id === viewId);
  if (view == null) return <Navigate to={route('/not-found')} replace />;

  if (viewZoneId == null) return null;

passing setViewId into Component

 <CreateViewWizard {...wizard.props} show={show} setViewId={setViewId} />

here doing mutation and setting viewId in CreateViewWizard

 <Button
    color="primary"
    disabled={(step === 0 && name.trim() === '') || step > 2}
    onClick={async () => {
    setStep((prevStep) => prevStep + 1);
     if (step < 2) return;

     close();
     assert(typeof layoutId === 'number', 'Layout not set');

     const { data } = await createView({ variables: { layoutId, name, showId: show.id } });
     if (data?.createView?.view != null) setViewId(data.createView.view.id);
       }}
      variant="contained"
     >
    {step === 2 ? 'Create' : 'Next'}
  </Button>

Answer 1

If viewId is a string type and id is a number type, well, these can never be strictly equal ( === ), eg "5" === 5 is always false. Try a type-safe comparison, eg "5" === String(5) .

Example:

 console.log('5 === "5"', 5 === "5"); // false console.log('String(5) === "5"', String(5) === "5"); // true

Your code:

const view = show.views.find(({ id }) => String(id) === viewId);

Keep in mind that Array.prototype.find also potentially returns undefined when it doesn't find a matching element. You probably should check for any truthy view return value, and redirect when view is falsey.

if (!view) {
  return <Navigate to={route('/not-found')} replace />;
}