Derek Comments - Answer Overflow

Derek

•Created by dans2177 on 12/5/2023 in #💻┃support

Token being sent

This is a slightly different use case, but similar idea. The array for the second useEffect parameter is the list of variables that are tracked to determine whether the logic is triggered again on each render. In my case, I'm calling a GraphQL endpoint, but fetch would be similar:

function Sandboxes() {
    const [pageNumber, _setPageNumber] = useState(1);
    const [pageSize, _setPageSize] = useState(100);
    const [status, _setStatus] = useState("all");
    const { getToken } = useKindeAuth();
    const [getSandboxes, { loading, error, data }] = useGetSandboxesByCriteriaLazyQuery();

    useEffect(() => {
        async function fetchSandboxes() {
            const token = await getToken();
            getSandboxes({
                fetchPolicy: 'network-only',
                context: {
                    headers: {
                        "Authorization": `Bearer ${token}`
                    }
                },
                variables: {
                    pageNumber: pageNumber,
                    pageSize: pageSize,
                    status: status,
                }
            })
        }
        fetchSandboxes();
    }, [pageNumber, pageSize, status]);

    return <h2>
        {loading && <p>Loading sandboxes...</p>}
        {error && <p>Error finding sandboxes... {error?.message}</p>}
        {data?.sandboxes &&
            data?.sandboxes.results.map((sandbox, index) => (
                <p key={sandbox?.id ?? index}>
                    {sandbox?.slug ?? "NO SLUG"}
                </p>
            ))}
    </h2>
}

export default Sandboxes

function Sandboxes() {
    const [pageNumber, _setPageNumber] = useState(1);
    const [pageSize, _setPageSize] = useState(100);
    const [status, _setStatus] = useState("all");
    const { getToken } = useKindeAuth();
    const [getSandboxes, { loading, error, data }] = useGetSandboxesByCriteriaLazyQuery();

    useEffect(() => {
        async function fetchSandboxes() {
            const token = await getToken();
            getSandboxes({
                fetchPolicy: 'network-only',
                context: {
                    headers: {
                        "Authorization": `Bearer ${token}`
                    }
                },
                variables: {
                    pageNumber: pageNumber,
                    pageSize: pageSize,
                    status: status,
                }
            })
        }
        fetchSandboxes();
    }, [pageNumber, pageSize, status]);

    return <h2>
        {loading && <p>Loading sandboxes...</p>}
        {error && <p>Error finding sandboxes... {error?.message}</p>}
        {data?.sandboxes &&
            data?.sandboxes.results.map((sandbox, index) => (
                <p key={sandbox?.id ?? index}>
                    {sandbox?.slug ?? "NO SLUG"}
                </p>
            ))}
    </h2>
}

export default Sandboxes

9 replies

Gaming

Programming