Next.js 404 Issues

UncleZeze 🇿🇦 — Thu, 11 Feb 2021 08:09:56 +0000

Hey devs!!

I have a Next.js blog project. I have a page that is meant to render article content from a CMS. Querying the blog post data from the CMS works fine. The issue seems to be with Next.js specifically in that Next deems my page as non-existent.

Below is a snippet pages directory structure:

pages/
-------article/
--------------[slug].tsx

Previously the article page was rendering with no issues. For some unfathomable reason, Next returns a 404 when I navigate to this page.

I am using next@9.5.3

Any help will be appreciated

Processing .graphql extension in the Typescript compilation process.

UncleZeze 🇿🇦 — Wed, 15 Jul 2020 18:34:30 +0000

I am working on a feature where I need to query a remote graphql api. Graphql-let generates the necessary typings based on the remote graphql schema.

However, when I start my application (nextjs with a custom express server written in ts) the compilation process blows up when it comes across the .graphl extension.

A beer is ready to be claimed by a champion who can resolve the riddle below...

> graphql-let

[ graphql-let ] Done nothing, caches are fresh.
[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): server/**/*
[nodemon] watching extensions: ts,js,graphql
[nodemon] starting `ts-node --project tsconfig.server.json server/index.ts`

/.../node_modules/typescript/lib/typescript.js:139148
                var error = new Error(`Could not find source file: '${fileName}'.`);
                            ^
Error: Could not find source file: '/.../lib/reviews/queries/getReviews.graphql'.
    at getValidSourceFile (/.../node_modules/typescript/lib/typescript.js:139148:29)
    at Object.getEmitOutput (/.../node_modules/typescript/lib/typescript.js:139533:30)
    at getOutput (/.../node_modules/ts-node/src/index.ts:562:32)
    at Object.compile (/.../node_modules/ts-node/src/index.ts:775:32)
    at Module.m._compile (/.../node_modules/ts-node/src/index.ts:858:43)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.require.extensions.(anonymous function) [as .js] (/.../node_modules/ts-node/src/index.ts:861:12)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
[nodemon] app crashed - waiting for file changes before starting...

The offending piece of code is like so:

import {
    GetReviewsDocument,
    useGetReviewsQuery,
} from "../reviews/queries/getReviews.graphql";

const reviews = () => {
    try {
        const { data, error } = await useGetReviewsQuery({
            query: GetReviewsDocument
        });

        if (error) {
            console.log(`An error occurred while trying to fetch reviews. ${error.message}`);
        }

        console.log(`Success: ${JSON.stringify(data)}`);

    } catch (e) {
                    console.log(`An error occurred while trying to fetch reviews. ${e}`);
    }
});

export default reviews;

React Hooks Noob, please help...

UncleZeze 🇿🇦 — Tue, 23 Jun 2020 20:02:02 +0000

I have a sign up form that accepts basic username/password data. This needs to authenticate against a graphql endpoint using a custom hook. React Hooks rules dictate, you cannot call a hook within an event handler. How else can the custom hook be invoke to perform the authentication once the user submits the form?

DEV Community: UncleZeze 🇿🇦

Next.js 404 Issues

Processing .graphql extension in the Typescript compilation process.

React Hooks Noob, please help...