Questions tagged [apollo-client]
Apollo Client, a remarkable JavaScript framework, empowers developers in constructing exceptional client interfaces by seamlessly retrieving data through GraphQL.
I am currently working on a Progressive Web App built with Next.js that needs to retrieve data from a Wordpress website, and I am still quite new to these technologies. These are the Wordpress plugins that I have installed: WPGraphQL WPGraphQL CORS WPGra ...
I am currently working on an ecommerce website for a personal project and I am struggling with setting up the place order functionality. After inputting the data, I want to retrieve the Id and redirect it to orders/[id]. Check out my code below: import Re ...
I'm struggling to understand Hooks, particularly when I encounter an Invalid hook call error. The latest issue is with using the useMutation hook from Apollo within a custom hook. Can someone please help me figure out what's going wrong? Component (where ...
Currently, I am developing an I18n module utilizing the Next.js framework (v5). The challenge I am facing is determining the user's default language universally in order to display the UI in that language. While it is relatively simple to resolve the lan ...
Struggling to make this work as expected. After some research, I discovered that nextjs/ssr has compatibility issues with subscriptions and it's important to verify the existence of process.browser. However, I am facing challenges in integrating my authLin ...
Currently, I am engaged in a fresh project utilizing vue along with vue-apollo. There is one component dedicated to displaying the user's name (UserShow.vue): <template> <div v-if="!this.$apollo.queries.user.loading"> Your name is ...
Currently, I am expanding my knowledge on GraphQL and Next.js by taking a course on Udemy. The course instructor utilizes ApolloClient from the apollo-boost package, but I have opted to use the newer @apollo/client package instead. In the original method ...
Currently, I am in the process of integrating graphql into my Vue project by following the guidance provided at https://github.com/Akryum/vue-apollo Although I have successfully installed 'apollo-client' via npm as per the requirements, I am encountering ...
Although the component successfully renders the error state, an uncaught exception is displayed in the console and a dialogue box appears in the browser. How can expected errors be handled to prevent this behavior? import { useMutation, gql } from "@a ...
While my data is being loaded at build time using the getStaticProps method, I am faced with a scenario where I need to create new data through a form submission: const handleSubmit = async ({ name, score }) => { const body = { name, email } await f ...
When working with Next.js server-side rendering (SSR), I often encounter a query failure on the first try due to the backend not being fully ready. In such cases, I would like to retry the fetch using ApolloClient. const PREVIEW = { query: MY_PREVIEW_ ...
The scenario is straightforward. I currently have a NodeJS GraphQL backend with user data. Whenever a new user is added, I am able to successfully fetch the updated user data using React Apollo. However, when I introduced an async operation to my backend ...
Currently, I am utilizing nuxt in conjunction with apollo-module. My main objective is to be able to intercept any potential network errors, specifically 401/403 errors, in order to display an error modal and log out the user. As per the documentation, it ...
Once a user logs in, the system returns a jwt token and a user object containing the id and firstName, which are then stored in cache (refer to the image link provided below). https://i.stack.imgur.com/oSXZ5.png I aim to retrieve the user information fro ...
https://i.stack.imgur.com/qXcZM.png Dealing with a memory leak in my new web application has proven to be quite challenging. Despite the fact that it did not manifest during local development, every 18 hours, a Kubernetes pod hosting a web client runs out ...
Below is the code I use to remove a user: const [selected, setSelected] = useState<string | null>(null); const DELETE_USER = gql` mutation RemoveUser($_id: String!) { removeUser(_id: $_id) } `; const [removeUser, { loading, error }] = useMut ...
Here is my code snippet: <blink> const [thisButtomSelected, setThisButtomSelected] = useState(false); var thisButton = []; const onAttributeClick = (e) => { thisButton[e.currentTarget.value] = { thisID: e.currentTarget.id, thisName: e. ...
Within my organization, we utilize an application that utilizes React, express, Apollo Server, and Apollo Client to showcase data from various sources. This app regularly updates the displayed data using a polling method. However, whenever I make code upda ...
Recently, I encountered an issue with my functional component that contains 3 checkboxes and 1 button. I utilized the useLazyQuery hook to ensure that my query was only sent upon clicking the button. However, a major drawback is that my component re-rend ...
Imagine having a collection of condensed items associated with user IDs. When clicked, I aim to asynchronously fetch and display additional data using an Apollo query - like username, address, etc. How can I effectively "cache" or store this information lo ...
After trying all the suggested solutions on Stack Overflow and researching through previous questions, I have come here seeking help. I am using the latest version of NextJS (version 14) and encountering an issue with integrating GraphQL Apollo client into ...
I have been working on developing a simple todo application using Django, Graphene, and NextJs. While I was successful in creating todos using graphiQL and Postman, I encountered a 400 Bad Request error when attempting to create a todo in NextJs. Even tryi ...
Recently, I set up a GraphQL server in Go by following a tutorial closely. My front-end is developed using Next.js and I'm currently working on creating a client to connect to the server. Despite referring to the subscription docs thoroughly, I can&ap ...
Has anyone encountered the issue where the context from getStaticProps is returning as undefined? Upon logging the context, I am receiving: { locales: undefined, locale: undefined } I require the information from the URL, but when attempting the same with ...
Scenario In my current setup with Next.js 13, I am utilizing Apollo Client to manage some client side variables. Objective I aim to trigger the onClick function before navigating to the href location. The Code I'm Using <Link href={`/sess ...
Help needed with resolving the ApolloError: forward is not a function problem. I have followed the documentation and tried adding an error code, but nothing seems to be working. Please assist! apollo.client.ts import { ApolloClient, InMemoryCache } from ...
element, I have incorporated two distinct mutations in a single react component: const [get_items, { error, loading, data }] = useMutation(GET_ITEMS); const [add_to_cart] = useMutation(ADD_TO_CART); To streamline and access both components' error, load ...
I have integrated Apollo GraphQL into my Next.js project to fetch posts and populate the content. Although the current code is functional, I am looking to enhance it by implementing the loading state of useQuery instead of the existing setup. This serves ...
I have successfully set up a dynamic route for a statically generated page component (I hope that's correct?) which functions perfectly in development mode. I am able to create pages in my headless CMS (KeystoneJS) and view them on my local environmen ...
Just a moment ago I posted this question on Stack Overflow, and now I have a follow-up query :) Take a look at this code snippet: import { ClassConstructor } from "class-transformer"; import { useQuery as useApolloQuery } from "@apollo/clie ...
When utilizing GraphQL to facilitate communication between a client and server across different domains, I took the necessary steps to enable CORS on my API website by referring to the documentation provided by Vercel. However, it appears that I am encount ...
I am facing an issue with my code as I attempt to utilize https://github.com/lfades/next-with-apollo, next-with-apolo. Despite following the setup, server-side rendering (SSR) is not working for me and it seems like the client call is still being made. If ...
As a newcomer to NextJS, I am facing the challenge of displaying real-time data fetched from a Hasura GraphQL backend on a page. In previous non-NextJS applications, I successfully utilized GraphQL subscriptions with the Apollo client library which levera ...
I am currently developing a Next.js application. This app pulls data from the server using graphql. The server being used is a postgraphile server. To generate the Apollo-client hooks, I am utilizing graphql-codegen. However, I have come across an issu ...
I've run into an issue with my project that involves using only React class components and fetching data from an Apollo server. The problem I'm facing is that, in Chrome, only the Navbar.jsx component is rendering. Even when I navigate to one of the link ...
I have been working with the graph.cool API in conjunction with React and Apollo. While developing an authentication system using graph.cool's default email pass integration, I encountered an issue where the login mutation worked perfectly fine, but the re ...
Currently, I am utilizing Next.js and React Apollo for my application. To ensure optimal performance, I have configured my application to run with pm2 in a clustered mode featuring two instances. However, I have encountered an issue where switching user pr ...
Currently, I am implementing a GraphQL query to fetch data for my Material UI table. My goal is to achieve infinite scrolling functionality when loading more data onto the table. Although the data is being populated correctly in the table itself, there se ...
Exploring the Contrasting Approaches of Implementing "apollo-client in next.js" in next-with-apollo npm library versus the method outlined in the next.js documentation. For the approach chosen by next.js for Apollo client integration, visit: https://githu ...
My data consists of a set of interconnected items like this: book { id ... related_entity { id ... } } Once Apollo caches it, there are two separate cache objects. The related_entity field on book points to an EntityNode object. Everything ...
After successfully adding a user to my database, I am encountering an issue where the query returns null in my client app even though it shows data in the GraphQL playground. To troubleshoot this problem, I have implemented a useEffect hook that triggers t ...
We currently have a docker image that sets up both the backend server and frontend NextJS application utilizing ApolloClient. However, during the build process of the NextJS application, the Apollo client attempts to query the backend server's graphql ...
Exploring the world of Next.js with Apollo Client has been quite an adventure for me. One challenge I am facing is establishing a smooth workflow between the server and client sides. In my SSR page, I execute a query within getServerSideProps and then tran ...
After reading through this blog post on integrating query components with Apollo (), I learned how to pass a function from a child component to its parent so that it can be called with the correct parameters. Despite following the instructions, I keep enc ...
Currently, I am in the process of developing a Next.js application that utilizes GraphQL with ApolloClient to manage API requests. Initially, I had success in setting up a page that functioned correctly and retrieved the appropriate data by passing an ID t ...
I've been using graphcms solely for my image assets and trying to integrate them into my Next JS (v12.0.1) frontend. However, I keep getting the error message hostname not configured in next.config.js, even though I have already specified it in my next.con ...
Is there a way to set up a token in my apollo client when the user logs in? I've been struggling with this issue. This is what I currently have in my index.js: const client = new ApolloClient({ ssrMode: SERVER_MODE, cache: new InMemoryCac ...
I currently have my express server running on a separate port from my client-side nextjs project. Typically, when the server is on the same port as the client, you can use getRequestHandler with next to pass the user object that can be accessed in the cli ...
I am currently facing an issue with executing a GraphQL request that includes variables using the apollo-boost client on a Flask + Flask-GraphQL + Graphene server. let data = await client.query({ query: gql`{ addItemToReceipt(receiptId: $receiptId, ...
I am currently working on an application using Next.js and Golang within a docker container. However, I have run into an issue with Next.js CSR graphql requests not functioning properly on AWS ECS Fargate. The SSR works fine, but the CSR request times out. ...
Greetings and Festive Wishes to All, I'm currently in the process of developing a website using KeystoneJS and NextJS, with Apollo Client integrated as well. However, I've encountered an issue specifically with Apollo Client. Despite trying var ...
I have been pondering why updating data within the Apollo Client cache seems more challenging compared to similar libraries such as react-query. For instance, when dealing with a query involving pagination (offset and limit) and receiving an array of item ...
I've developed a Next.js application with Strapi serving as both the CMS and authentication server. After successfully obtaining a JWT from the authentication endpoint, I have stored it in a cookie. To access secure content from Strapi, I must include ...
When using ApolloProvider, an app is wrapped with the following code: <ApolloProvider client={client}> <App /> </ApolloProvider> An issue arises in Nextjs where route components can be declared in the pages folder without adding them ...
When utilizing WPGraphiQL IDE, the data displays correctly as shown below: https://i.stack.imgur.com/wBwl8.png However, when I attempt the same query using Apollo Client on the Front-End, the children of the menu are returned as null. Retrieving data th ...
I have a scenario where I pass a query to the apollo client in my template file using a script tag. However, I want to find a more efficient way to handle this without having to specify the query every time. My idea is to pass a boolean value through a pro ...
I am attempting to establish a GraphQL connection from my React app. Here is my index.js: import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { ApolloProvider } from '@apollo/clien ...
I've developed an application using NextJS that is currently hosted on Netlify. The API, which is a NestJS project running GraphQL, is hosted on Heroku. While in local development mode, all my SSR pages work flawlessly. However, when transitioning to prod ...