Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Apollo with Next.js getServerSideProps #215

Closed
EvHaus opened this issue Feb 18, 2022 · 4 comments
Closed

Using Apollo with Next.js getServerSideProps #215

EvHaus opened this issue Feb 18, 2022 · 4 comments
Labels
enhancement New feature or request sdk SDK package

Comments

@EvHaus
Copy link

EvHaus commented Feb 18, 2022

I'm trying to get @nhost/react-apollo working with Next.js's getServerSideProps so that I can fetch my data on the server-side and feed it to Apollo on the client to avoid the initial loading state that appears.

Looking at the Next.js Apollo example, I can see this is possible: https://github.com/vercel/next.js/tree/canary/examples/with-apollo

However, from what I can tell, the way they do this seems to be incompatible with @nhost/react-apollo because nhost's library doesn't provide any mechanism to access the client (which is needed for getServerSideProps).

Is this something the nhost team is aware of and planning to add support for in the future?

@guicurcio
Copy link
Contributor

guicurcio commented Feb 18, 2022

Yes, we are aware of this issue and we're working on coming up with a solution with examples for users. Though, in practice getServerSideProps runs in an isolated environment, so you can use that next.js example to fetch your data and feed it to the client after the request (not needing for @nhost/react-apollo to expose a non windows version of the nhost client.) As well as using any kind of graphql client to make an initial fetch.

@EvHaus
Copy link
Author

EvHaus commented Feb 21, 2022

Do you have any examples of how this could be done? I'm having a hard time figuring out this part:

...feed it to the client after the request...

@plmercereau plmercereau added sdk SDK package enhancement New feature or request labels Feb 21, 2022
@muttenzer
Copy link
Contributor

@EvHaus I just used the nhost client for that (Keep in mind: request will be sent with the "public" role):

export async function getServerSideProps() {

    // Get all template locales
    const { data: localesData } = await nhost.graphql.request(
        GET_TEMPLATE_LOCALES
    );

    return {
        props: {
            localesData,
        },
    };
}

And then use it in your page component via props:
const myServerSideFetchedLocales = props.localesData;

You can read more about the nhost sdk-client in the docs.
Hope that helps :)

@plmercereau
Copy link
Contributor

Hello,
We just released a set of new packages @nhost/nextjs, @nhost/react, @nhost/apollo and updated @nhost/react-apollo, they could be used as a basis to load a query in getServerSideProps. To sync the Apollo cache between the client and the server and we don't foresee to work on it in the next weeks. However, contributions are most welcome to eventually get a @nhost/nextjs-apollo!
You can have a look at the Rect documentation and the Next.js documentation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request sdk SDK package
Projects
None yet
Development

No branches or pull requests

4 participants