Closed imCorfitz closed 3 years ago
Can you share the repo/code of your working example @CorfitzMe and @timhall This looks like a prominent issue in setting up for Sapper. There should be a straight forward way to solve the issue, if you have a working code sample do let us know because the example mentioned in README is erroneous.
I am preparing a small repo with my working version - but I realised I am using the sapper-start project: https://github.com/matt3224/sapper-start for having SASS support. That is the reason for me having to add the resolve({ preferBuiltins: true, mainFields: ['browser'] })
to rollup.config.js
@rococosans has actually made a great working demo here: https://github.com/rococosans/sapper-svelte-apollo-demo/.
One thing that might bite people is that node-fetch
must be listed under dependencies
in package.json, not under devDependencies
. Anything Sapper needs available at runtime apparently has to be in dependencies
, so I also put any graphql-*
and apollo-*
packages there. If you get lots of unexpected errors, that might be the answer.
This is my working repo using the sapper-start template by @matt3224. https://github.com/CorfitzMe/sapper-w-svelte-apollo
@CorfitzMe thanks for the shout out! Sorry, I'm just seeing this.
[sorry in advance for the novel]
In your example repo
<script context="module">
import client from '../lib/apollo';
import { gql } from 'apollo-boost';
const EVERYTHING = gql`
query everything{
todos {
data {
id
title
completed
}
}
}
`;
export async function preload() {
return {
cache: await client.query({
query: EVERYTHING
})
}
}
</script>
<script>
import { setClient, restore, query } from 'svelte-apollo';
export let cache;
restore(client, EVERYTHING, cache.data);
const todos = query(client, { query: EVERYTHING });
</script>
could be done like this:
<script context="module">
...
</script>
<script>
let todos = $$props.cache.data.everything
</script>
This method removes svelte-apollo
as a dependency. Which I don't mean to discourage this project in way! I think there is a discussion to be had and many improvements that are still to come.
Full disclosure I haven't tested this method with dynamic variables, so maybe that's were svelte-apollo comes in.
Also, the idea has been proposed to make a special script tag like...
<script context="graphql">
import client from '../../graphql.js'
const SOMETHING_QUERY = gql`
query SOMETHING_QUERY {
somethingQuery {
name
description
slug
}
}
`
const thing = client.query({
query: SOMETHING_QUERY,
})
</script>
Twist: Either method only seems to work from the route
directory and not in nested components.
The method I showed above works in src/routes/blog/index.svelte
, but not in src/routes/index.svelte
This is interesting. Can anyone make sense of this?
@rococosans Something as simple as import client from '../../graphql.js'
to import client from '../graphql.js'
- would that solve it?
__
And yes.. I noticed you can't make these request directly from nested components as SSR. I like the proposal on a dedicated graphql tag, and I know there is a preprocessor in the making for exactly that.. I am looking very much forward to see how that will work.
After restarting the server I was able to get the following working again from src/routes/index.svelte
.
const posts = $$props.cache.data.allBlogMarkdown
I was able to remove
export let cache
restore(client, ALL_BLOG_MARKDOWN_QUERY, cache.data)
const posts = query(client, { query: ALL_BLOG_MARKDOWN_QUERY })
Interested in learning, how come querying from a nested component breaks SSR?
All good things here. I'm looking forward to seeing how that solution turns out as well.
I tried @rococosans solution above.
When my cache received updates (e.g. logout out user) my components (e.g. navbar) didn't receive updates and displayed outdated data.
Is this expected @rococosans? Should your snippet be able to subscribe to cache changes?
@justinmoon I've opted for a custom graphql client. (Significant bundle savings) It's certainly a paired down solution, but it does what I need it to. I don't currently have a caching strategy implemented specifically with grahpql.
Either way I think your question is more related to session management and SSR. I'm not completely satisfied with my solution just yet, but it involves re-hydrating after session changes.
Will track this issue with #9
This part should be updated:
to
I kept getting errors about me not wrapping my query in a gql tag..
I also kept getting errors about fetch not being set globally and that I had to pass it as node-fetch in the creation of Apollo Client.
I found you answer online about installing
node-fetch
and include inserver.js
along withglobal.fetch = fetch;
... This didn't work for me. I had to importnode-fetch
in theapollo-client.js
file and pass it as second parameter.This caused another issue with Rollup as
node-fetch
uses some packages and gets them relative to its directory path. In order to solve those errors I added:resolve({ preferBuiltins: true, mainFields: ['browser'] })
to the rollup config file.
If anyone has a better solution to this - please let me know.. Cheers.