Apollo GraphQL

Hello How can I use Apollo in Wasp?

import React from 'react';
import * as ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';

const client = new ApolloClient({
  uri: 'https://flyby-router-demo.herokuapp.com/',
  cache: new InMemoryCache(),
});

// Supported in React 18+
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
);

import React from 'react';
import * as ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';

const client = new ApolloClient({
  uri: 'https://flyby-router-demo.herokuapp.com/',
  cache: new InMemoryCache(),
});

// Supported in React 18+
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
);

normally I'd do like this but in wasp I am not sure where to put it.

15 Replies

MEE6•2mo ago

Wohooo @nicode_it, you just became a Waspeteer level 1!

kapa.ai•2mo ago

Hi @nicode_it. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Wasp, you can set up Apollo in the root component of your application. This is done in the client field inside the app declaration in your main.wasp file. Here's how you can do it:

app MyApp {  
 title: "My app",  
 // ...  
 client: {  
 rootComponent: import Root from "@src/Root.jsx",  
 }  
}

app MyApp {  
 title: "My app",  
 // ...  
 client: {  
 rootComponent: import Root from "@src/Root.jsx",  
 }  
}

Then, in your Root.jsx file, you can set up Apollo like this:

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';

const client = new ApolloClient({
  uri: '<https://flyby-router-demo.herokuapp.com/',>
  cache: new InMemoryCache(),
});

export default function Root({ children }) {  
 return (
   <ApolloProvider client={client}>
     {children}
   </ApolloProvider>
 )  
}

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';

const client = new ApolloClient({
  uri: '<https://flyby-router-demo.herokuapp.com/',>
  cache: new InMemoryCache(),
});

export default function Root({ children }) {  
 return (
   <ApolloProvider client={client}>
     {children}
   </ApolloProvider>
 )  
}

In this setup, children represents the actual pages of your application. As long as you render the children, you can do whatever you want in your root component. For more information, you can read about the root component in the API Reference (https://wasp-lang.dev/docs/project/client-config#rootcomponent-extimport) and about setting up a provider in the Wasp documentation (https://wasp-lang.dev/docs/project/client-config#setting-up-a-provider). Please note that the code snippets provided are based on the knowledge sources provided and may need to be adjusted to fit your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @nicode_it, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

nicode_it•2mo ago

I don't think this solution is correct, I will try.

martinsos•2mo ago

You should be able to use it as in any JS project, but you would have to manually plug it in and use it -> it is not something that Wasp supports out of the box as one of its integral parts.

nicode_it•2mo ago

thanks Do you think the way explained by the kapa.ai is good? I tried it quickly and it did not work but maybe I should try again.

martinsos•2mo ago

General direction sounds right to me -> that said, I haven't used Apollo much so I can't speak about the details. Maybe if you can explain more about the situation: what didn't work exactly, what do you think should work, which parts you are sure about and which you are not, ... . As I said, I don't know much about Apollo, so I can help with Wasp, but you will have to know the stuff from the Apollo side.

nicode_it•2mo ago

Thanks. Off topic but how do I set the auth to go to a specific page instead of / after login?

martinsos•2mo ago

https://wasp-lang.dev/docs/auth/overview#onauthsucceededredirectto-string

Overview | Wasp

Auth is an essential piece of any serious application. That's why Wasp provides authentication and authorization support out of the box.

nicode_it•2mo ago

Thanks mate. Could not find it smh

martinsos•2mo ago

It's a bit low-key in the docs yeah we should make it more prominent

nicode_it•2mo ago

I am enjoying wasp so far. Might start contributing if I can. Right now building a small gamified app related to github contributions. Will share when public.

martinsos•2mo ago

Awesome, that is really nice to hear :)! We are here for any help, and any feedback is always very welcome, so we can improve things based on it. Certainly share it in #🏠made-with-wasp , we have quite some cool stuff being built there!

nicode_it•2mo ago

BTW this method works, I had some typos..

martinsos•4w ago

Awesome! Do you think Wasp could have helped more? Maybe better error messaging or something like that?

nicode_it•4w ago

Honestly I don't remember now 😄

Gaming

Programming

Apollo GraphQL