react-hooks - 如何使用 Apollo 和 NextJS 将数据转发到下一页

Question

我正在使用 NextJS、Apollo 和 React(钩子(Hook))开发一个 Web 应用程序。

我有一个表格，要求访客姓名作为注册过程的第一步。
提交表单时，名称将保存在 Apollo 缓存中，访问者将被重定向到下一页。

import React, { useState } from 'react';
import Router , {useRouter}  from 'next/router';
import { useApolloClient } from '@apollo/react-hooks';


const NameForm = props => {
    const [name, setName] = useState("");
    const client = useApolloClient();
    const router = useRouter();

    const handleSubmit = e => {
        e.preventDefault();

        if(!name) return;

        client.writeData({ data: { name } });
        router.push('/user/register');
    }

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label htmlFor="name">Naam</label>
                <div>
                    <input type="text" id="name" name="name" value={name} onChange={e => setName(e.target.value)} />
                    <button type="submit" onClick={handleSubmit}>Get started</button>
                </div>
            </div>
        </form>
    )
}

export default NameForm;

下一页包含更广泛的表格。当访问者来自主页时，该名称是已知的，我想从缓存中取回它。我想

import { gql } from 'apollo-boost';
import { useApolloClient } from '@apollo/react-hooks';
import AddUserForm from '../../components/forms/AddUserForm';

const GET_NAME = gql` 
 query GetName {
    name @client  
}`;

const AddUser = ({ name }) => (
    <React.Fragment>
        <AddUserForm name={name} />
    </React.Fragment>
)

AddUser.getInitialProps = async ctx => {
    const client = useApolloClient();
    const name = await client.cache.readQuery({ query: GET_NAME });

    return { name: name || '' };
}

export default AddUser;

我想我可以在 getInititialProps 中做到这一点， Hook 只允许在功能组件的主体中。

由于 next、react hooks 和 apollo 的不断发展，我缺少有关此的教程/类(class)，我发现很难找到正确的方法来做到这一点。

我希望这里有人可以进一步帮助我。

Answer 1

使用 apollo-client 缓存可能会导致您遇到一些真正取决于 apollo-client 的问题。的实现和nextjs执行。
如果您通过在浏览器地址栏中输入 url 来打开您的应用程序，Next.js将从服务器端发出请求(假设 View 需要获取数据)，然后将呈现的 HTML 发送到客户端。

因为apollo-client fetch 然后缓存服务器端的数据，那么问题是 “Next.js 是否将带有缓存的 apollo-client 发送到客户端以进行下一个请求？”

除非您清楚地了解 Next.js，否则您无法确定这一点。和 apollo-client cache (关于它的实现或内部如何工作，如果 apollo 在服务器端将数据缓存在内存中，如果这样做会失败)

答案是不确定因为它同时依赖于两个东西。 future 可能会改变!

所以要处理这个问题，只需使用 Next.js方式，它为数据设计了一个隧道，它是 query在网址上。

const NameForm = props => {
    const [name, setName] = useState("");
    const client = useApolloClient();
    const router = useRouter();

    const handleSubmit = e => {
        e.preventDefault();
        if(!name) return;
        router.push(`/user/register?name=${name}`);
    }
    //render ...
}

import { useRouter } from 'next/router';
import AddUserForm from '../../components/forms/AddUserForm';
const AddUser = () => {
    const router = useRouter();
    return (
        <React.Fragment>
            <AddUserForm name={router.query.name} />
        </React.Fragment>
    )
}
export default AddUser;

如果你想发送一个对象而不是一个字符串？

const data = { name: "FoxeyeRinx", email: "foxeye.rinx@gmail.com" };
const base64 = btoa(JSON.stringify(data));
router.push(`/user/register?data=${base64}`);

const AddUser = () => {
    const router = useRouter();
    const base64 = router.query.data;
    //decode base64 then parse it to js object
    const data = JSON.parse(atob(base64)); 
    return (
        <React.Fragment>
            <AddUserForm data={data}/>
        </React.Fragment>
    )
}

如果您认为查询丑陋并想隐藏查询 ，请使用本指南: https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing