timhall / svelte-apollo

Svelte integration for Apollo GraphQL
MIT License
945 stars 67 forks source link

How to have multi clients ? #90

Open brightchip opened 3 years ago

brightchip commented 3 years ago

How to pass more than 1 Apollo clients ? I haven't tried this package but went through the document and wondering how to pass multi clients

unlocomqx commented 3 years ago

This lib saves the client to the svelte context so you can have multiple wrapper components and each one can have a different client

Example

<script lang='ts'>
    import { ApolloClient, InMemoryCache } from '@apollo/client/core';
    import { setClient } from 'svelte-apollo';

    const client = new ApolloClient({
        cache: new InMemoryCache()
    });
    setClient(client);
</script>

<slot />
<ApolloProvider>
Components...
</ApolloProvider>

You can probably even pass the options to ApolloProvider to configure the client

t-lock commented 1 year ago

@unlocomqx I don't think you have answered the question. Your example shows one client. I can read between the lines though when you say "you can have multiple wrapper components and each one can have a different client", you mean sibling components. So half your app's components that are children of one provider can use that client, while the other half that are children of the second provider can use that client. You apparently cannot use multiple clients in a single child component, precisely because the library chose to implement as a single key on context.

What I mean is, you cannot wrap your app as follows

<ApolloProvider1>
    <ApolloProvider2>
        <ChildComponent>
    </ApolloProvider2>
</ApolloProvider1>

With the expectation that ChildComponent could make queries with one client or the other.

You also couldn't use setClient multiple times with multiple clients in a single <ApolloProvider> component.

In order to "support multi client" the library would need to allow you to pass in the keyname for context so that you could have "client1" and "client2" both be consumable context simultaneously on a child component. Or pass an object with multiple keys, etc.

If you can come up with an example where one child component can make queries from more than one provider, please do share and prove me wrong!