Difficulty retrieving database information using graphql to integrate with nextjs

Struggling to integrate Fauna dB with nextjs using Apollo, I keep facing roadblocks. I'm not sure if I made a mistake or if there's something else at play, but I am determined to find a solution. The latest error message I encountered was:

POST http://localhost:3000/graphql 404

Below is the snippet of my Apollo client script:

import {
    ApolloClient,
    InMemoryCache,
    createHttpLink,
} from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
  
const httpLink = createHttpLink({
    uri: process.env.FAUNADB_GRAPHQL_URL,
});
  
const authLink = setContext((_, { headers }) => { 
    const faunaKey = process.env.FAUNA_ADMIN_KEY;
    return {
      headers: { 
        ...headers,
        authorization: `Bearer ${faunaKey}`,
      }
    }
});
  
export const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
});

Any assistance would be greatly appreciated.

I've attempted to switch to different approaches, but without success. Furthermore, tutorials I have come across seem outdated (e.g., The with-fauna nextjs example doesn't work for me).

Answer №1

After discovering that my .local.env file was not functioning properly, I realized that using NEXT_PUBLIC_FAUNA_ADMIN_KEY allowed the key to be accessed by the browser, posing a security threat. Therefore, I must find a secure method for storing keys.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the versioning protocol followed by Next.js?

It's been a real challenge trying to unravel this mystery. Despite scouring Google and exploring their GitHub repository, I have yet to come across any information on their versioning process. Does anyone happen to know the details and could possibly ...

I am encountering an issue with my code where the function this.ProductDataService.getAllProducts is not recognized when

Encountering an issue while running unit test cases with jasmine-karma in Angular 7. The error received is: ProjectManagementComponent should use the ProjectList from the service TypeError: this.ProjectManagementService.getProject is not a function If I ...

The rendering of Draft.js headers is not functioning accurately

I am currently working in a next.js environment with tailwind installed and a simple draft.js Text Editor. I have a Toolbar Component that allows me to toggle inline style and block styles, but I am facing an issue where setting the block type to header- ...

Merging arrays from observables without the need to wait for all of them to finish

Within my application, I have established a process where data is fetched from a remote server at regular intervals. The retrieved data is structured as an array of objects and is then showcased in the HTML template using the angular async pipe. To enabl ...

typescript create a type from a schema

Recently, I received an auto-generated GraphQL schema mapping that looks like this: export const generatedSchema = { query: { __typename: { __type: 'String!' }, account_sample: { __type: '[account_sample!]!', __arg ...

Issue with error details being returned as expected in NextJS frontend when raising an exception in FastAPI

Currently, my tech stack consists of Fastapi for the backend and React (Nextjs) for the frontend. An issue I am facing is that when a post request is made from the frontend to the Fastapi backend and it fails, not all error details are being returned. Her ...

Navigating to a page within the useEffect hook

I am attempting to create a simple example of routing to a login page if no session is found. Here is the code snippet from _app.js located inside the pages folder: function MyApp({ Component, pageProps }) { const [user, setUser] = useState(null) c ...

What is the best way to update the background color of a row in an AG Grid table when it is clicked

I'm struggling to dynamically change the background color of a row in an ag-grid table when it is clicked. I have attempted using getRowStyle and getRowClass, but those methods only work when the table is initially loaded. I then tried utilizing onrow ...

Switch the Follow/Following button depending on the user's current follow status with the individual

I am currently working on a functionality to toggle between the Follow and Following buttons based on whether the current user is following another individual. I have implemented an NgIF statement in my code, but I am facing challenges in properly checking ...

Next JS 14: While in build mode, fetch requests are unable to retrieve data from the database since it does not have access to the most up-to-date information

While in development mode, all fetch requests are functioning properly and the database data is visible. However, upon building and deploying the application, new data written to the DB may not be updated or visible. There could also be issues with request ...

What causes delayed state updates in React/NextJS until another state is updated or a fast refresh occurs?

UPDATE: Version 13.3.0 is coming soon! In my code, I have a state variable named localArray that I need to update at a specific index. To achieve this, I decided to create a temporary array to make modifications and then set the state with the updated val ...

The output is displayed on the console, but it cannot be stored in a variable

var x = ""; Promise.all(listOfItems).then(function(results) { for (let j in results) { var newitem = results[j]; x = newitem; console.log(`x: ${x}`); } }); The output on the console displays x: "val ...

Tips for sending a post request using Angular 4

I'm currently facing an issue while attempting to execute a post request using Angular 4 to transmit lat and lng parameters: let data = {lat: this.newLat, lng: this.newLng}; this.http.post(url, data) .map(response => response.json()) .subscri ...

What causes the addition of the domain path before a remote image URL in the Next.js image optimizer?

Within my application, I am utilizing the ExportedImage component from the next-image-export-optimizer library in the following manner: import ExportedImage from 'next-image-export-optimizer' <ExportedImage src={media?.original_url} fill size ...

Exploring how to implement delegateToSchema in a NestJS resolver

I am faced with the challenge of working with both a local schema and a remote schema. The local schema is a subset of the remote schema and needs to proxy requests to the remote GraphQL server. Typically, I would handle this situation as follows: public ...

What is the significance of a React Functional Component returning JSX.IntrinsicElements?

I stumbled upon this React functional component in a particular documentation import React, { useState, useEffect } from 'react'; import { fabric } from 'fabric'; interface ITextProps { id: string; options: fabric.ITextboxOptions; ...

Using Material UI Slider along with Typescript for handling onChange event with either a single number or an

Just diving into Typescript and encountered an issue with a Material UI Slider. I'm trying to update my age state variable, but running into a Typescript error due to the typing of age being number and onChange value being number | number[]. How can I ...

The typings for object properties in Typescript

I recently encountered a function call in my code: var myVar = myFunction({ property: 'prop', functionProperty() { console.log(this.property); }, functionProperty2() { this.functionProperty(); } }); I' ...

Tips for transforming numerous observables into a single observable that emits a single value upon completion of all source observables

When submitting a form, I need to call an API method multiple times using Angular's HttpClient. Each call adds a specific item into another entity, as our backend does not provide a batch-add method. Therefore, I have to make individual calls for each ...

typescript error caused by NaN

Apologies for the repetitive question, but I am really struggling to find a solution. I am facing an issue with this calculation. The parameters a to g represent the values of my input from the HTML. I need to use these values to calculate a sum. When I tr ...