#Apollo Provider with next13

1 messages · Page 1 of 1 (latest)

cinder galleon
#

Yes, but now the only issue is that you cannot use server side components in your whole app, as your whole app is wrapped in a clientside component and server components cannot exsist in a client component

#

@cinder hare @distant escarp I am inviting you guys to the thread for apollo provider incase we get any updates we can put it here

distant escarp
#

Great 🙂

#

Note; i also tried this:

import { ApolloProvider, gql } from '@apollo/client';
import client from '../apollo-client';

export function TestApolloWrap(props:{children:any}) {
  return <ApolloProvider client={client}>{props.children}</ApolloProvider>;
}```

And just wrap everything in that - no change; its the same thing - which kinda makes sense 🙂
cinder galleon
#

good try though there has to be a way to only wrap certain components so that we can still get the benifits of serverside components

slate lily
cinder galleon
#

yes obsidian had a simaler error message

slate lily
#

Oh wait, I forgot about the 'use client'

distant escarp
#

Okay, so I htink i solved it, but its not great. Its not "one fit" solutin for client and server

slate lily
#

But now my root page is broken. Great. It would have been nice to have comprehensive examples at launch

distant escarp
#

This SSR way of fetching Apollo:

  const { data:latestCommentsNews } = await client.query({query:QUERY_LATEST_POSTTHREADS});
  const { data:latestCommentsForum } = await  client.query({query:QUERY_LATEST_FORUMTHREADS});

replaced this clientside version - and it worked:

  const { data:latestCommentsNews } = useQuery(QUERY_LATEST_POSTTHREADS);
  const { data:latestCommentsForum } = useQuery(QUERY_LATEST_FORUMTHREADS);  ```

But if i do this, my component which loads data, is locked in "server" mode or "client" mode...
slate lily
#

Okay yeah my context works fine across page, provided it is being called inside something which is a client component, e.g. making the page a client component

distant escarp
#

yeahr, it would work, client side. But if you have any static data which you might as well load only serverside, you would have the above problem; your component can be one or the other - but not both.

slate lily
#

From what I've read of the docs so far, the idea is that you have server component pages and you fetch your data or whatever in there, then you pass that data to a client component that you use in the page, so you separate them. From what I've just tried, it seems to work for me. I believe that's the kind of setup that what you are talking about would use.

raw jungle
#

Does that mean then you can't query inside a server component with apollo client, I guess that makes sense until they add proper support for this

distant escarp
# slate lily From what I've read of the docs so far, the idea is that you have server compone...

Yes and no.

NextJs alrady had SSR. NxJS13 is upping the bet, by providing full-scale rehydrateable backend HTML output with client/server reusable components.

What you have probably have implemented is a regular not-NxJS13 client-side component, that uses Apollo like everything inside /pages would have done previously.

What I/we want to do, is to pull those Apollo-requests into the NxJS14 serverside rendering /app folder, and never do any requests clientside, nor even transfer components-compiled results as in NxJS12.

raw jungle
#

so essentially its querying in a client component

distant escarp
# raw jungle so essentially its querying in a client component

Apollo works in NxJS13 just fine - you have to decide if you query it as a server or as a client.

If you do server, query it directly client.query. - otherwise use the useQuery with the provider.

The problem with Apollo is that currently this means you components which uses Apollo diretly CANNOT function on both serverside and clientside.

#

(which kinda is the point with NXJS13.. )

raw jungle
#

yes that for me is not a huge deal, as already most of the SEO critical content was done in get serverside props (which would now be layouts or pages, something server side)

#

client things would then include apollo. still a bit of a bummer since apollo is so big

distant escarp
raw jungle
#

eager to try it out 👌

cinder galleon
#

Do we know if they are doing Q&A again? If so I will ask about this issue

distant escarp
raw jungle