With the current implementation, the demo server (and also any attempt for running this locally) returns An unexpected error has occurred.
.
I did a quick investigation and found out that this error is a result of a combination of issues on both the client and server.
Error Handling
|
const [{ fetching, data }] = useViewrQuery() |
Here, we are ignoring the error
object, therefore there can be cases where fetching === false
and data
is not an empty object, but data
is not the object that it should be; As a result, React would try to render the Viewer
component and would raise an unhandled exception because data.viewer
is null
.
To solve this issue, we can choose a more defensive approach and make sure that error
is empty and data.viewer
isn't null
.
Auth (server-side)
If the user is not authenticated, the token
variable in the line below would be null
:
|
const token = (await getToken({ req, secret })) as JwtToken |
The problem is viewer
resolver (code below), assumes that id
is always present; Therefore, the resolver tries to invoke findUnique
method with the id
variable from context, which would be undefined
for unauthenticated users. In absence of the id
, the server returns an error to the client, expressing the condition that passed to the findUnique
method is wrong.
|
t.field('viewer', { |
|
type: 'User', |
|
resolve: async (_, {}, { prisma, id }) => { |
|
return prisma.user.findUnique({ where: { id } }) |
|
}, |
|
}) |
A better implementation would be, again, choosing a more defensive approach and informing the client that an unauthenticated user cannot request for viewer's info, by raising a custom error.
I'd be glad if you comment on the mentioned problems. Also, I'm not aware of your plans for this boilerplate but, if you think that these problems should be fixed, I'd be happy to send a PR.
And BTW, thanks for the boilerplate.