Is there a tutorial for local cluster deployment w...
# orm-help
j
Is there a tutorial for local cluster deployment with Prisma 1.7 anywhere? The speed of the free shared one is driving me crazy and the official docs havn’t been updated yet: https://www.prisma.io/docs/tutorials/cluster-deployment/local-(docker)-meemaesh3k
a
prisma init
generates a local
docker-compose.yml
which you can use to spin up your local instance via
docker-compose up --build -d
j
@andre Im using the React Fullstack template. Do you know if I should run this from /server or /server/database? https://github.com/graphql-boilerplates/react-fullstack-graphql
a
It seems like the
docker-compose.yml
hasn't been prepared for this boilerplate yet. You could run
prisma init
in a temporary directory and copy the generated
docker-compose.yml
over to your project.
Afterwards, you could execute
docker-compose up --build -d
and then switch into the
server/database
directory and execute
prisma deploy
there.
j
OK thanks! Ive got the graphQL playground running from docker but I cant connect to it with my React app.
IM using the settings that it generated: endpoint: http://localhost:4466 datamodel: datamodel.graphql
a
The API endpoint would be http://localhost:4466/default/default then 🙂
j
Im still getting an error when I run a query in the browser ‘’' { “data”: null, “errors”: [ { “message”: “Project not found: ‘default@default’;‘“, “locations”: [], “path”: [ “locations” ], “code”: 3016, “requestId”: “localapicjgxsy7g3002c09385t16cetu” } ] } ‘’'
a
Ah okay, then the Prisma service hasn't been deployed yet. Have you executed
prisma deploy
in
server/database
?
j
Yes, that seems to go OK: $ prisma deploy Deploying service
default
to stage
default
to server
local
36ms Service is already up to date. post-deploy: Running graphql get-schema --project database ✔️ project database - No changes
a
👍
The Prisma service is ready now.
j
And when i run npm run start it looks OK:
Server is running on http://localhost:4000
But I have this query that should work:
{ locations { id } }
But when I run it in the browser I get a big ole error:
equest to http://localhost:4466/default/default';: query: query ($_where: LocationWhereInput, $_orderBy: LocationOrderByInput, $_skip: Int, $_after: String, $_before: String, $_first: Int, $_last: Int) { locations(where: $_where, orderBy: $_orderBy, skip: $_skip, after: $_after, before: $_before, first: $_first, last: $_last) { id } } operationName: null variables: {} [GraphQL error]: Message: Project not found: ‘default@default’;’, Location: undefined, Path: undefined [Network error]: Error: Project not found: ‘default@default’;' Error: Project not found: ‘default@default’;' at BatchedGraphQLClient.<anonymous> (/Users/jameschetwood/Projects/prisma/docker-test/my-app/server/node_modules/http-link-dataloader/dist/src/BatchedGraphQLClient.js6935) at step (/Users/jameschetwood/Projects/prisma/docker-test/my-app/server/node_modules/http-link-dataloader/dist/src/BatchedGraphQLClient.js4023) at Object.next (/Users/jameschetwood/Projects/prisma/docker-test/my-app/server/node_modules/http-link-dataloader/dist/src/BatchedGraphQLClient.js2153) at fulfilled (/Users/jameschetwood/Projects/prisma/docker-test/my-app/server/node_modules/http-link-dataloader/dist/src/BatchedGraphQLClient.js1258) at <anonymous> at process._tickCallback (internal/process/next_tick.js1887)
a
Wait a minute. Do you try to connect your React app to the Prisma service or your GraphQL API?
j
The Prisma service I belive. I know that you’re not supposed to connect directly to the GraphQL API but im a bit confused about the settings
a
No worries 🙂 So the error comes from Playground or your React app?
j
From React, the playground is fine
a
Can you post the Apollo Client instance creation?
j
Sorry… what?
Is that the terminal read out from /server ?
a
The part of your React app where you create the Apollo Client instance.
j
Sure
const httpLink = new HttpLink({ uri: ‘http://localhost:4000' }) const middlewareLink = new ApolloLink((operation, forward) => { // get the authentication token from local storage if it exists const tokenValue = localStorage.getItem(AUTH_TOKEN) // return the headers to the context so httpLink can read them operation.setContext({ headers: { Authorization: tokenValue ?
Bearer ${tokenValue}
: ‘’, }, }) return forward(operation) }) // authenticated httplink const httpLinkAuth = middlewareLink.concat(httpLink) const wsLink = new WebSocketLink({ uri:
<ws://localhost:4000>
, options: { reconnect: true, connectionParams: { Authorization:
Bearer ${localStorage.getItem(AUTH_TOKEN)}
, }, }, }) const link = split( // split based on operation type ({ query }) => { const { kind, operation } = getMainDefinition(query) return kind === ‘OperationDefinition’ && operation === ‘subscription’ }, wsLink, httpLinkAuth, ) // apollo client setup const client = new ApolloClient({ link: ApolloLink.from([link]), cache: new InMemoryCache(), connectToDevTools: true, }) const token = localStorage.getItem(AUTH_TOKEN) ReactDOM.render( <ApolloProvider client={client}> <RootContainer token={token} /> </ApolloProvider>, document.getElementById(‘root’), )
a
const httpLink = new HttpLink({ uri: ‘<http://localhost:4000>' })
- This is not the Prisma service, but your GraphQL API. The error above can't be thrown in that case.
const httpLink = new HttpLink({ uri: ‘<http://localhost:4466/default/default>' })
would be the correct endpoint if you want to communicate with the Prisma service directly.
j
Sorry I think I got my terminology mixed up. Im not trying to do anything unusual.
My playground is viewable at http://localhost:4466/ so this must be the prisma server
a
Yeah, it is 🙂
is it queryable?
j
The playground works fine
a
Yeah, can you send queries?
j
Yes
a
Okay, so, construct a query and use it in your React app. When it runs in the Playground it will also work via Apollo.
As you already mentioned, in production, you should not connect your React app to a Prisma service directly.
j
In Apollo dev tools I get this error:
{ “data”: null, “errors”: [ { “message”: “Project not found: ‘default@default’;’“, “locations”: [], “path”: [ “locations” ], “code”: 3016, “requestId”: “localapicjgxtvlu1003c0938akbzcyrw” } ] }
And in the /server console I get this:
Request to http://localhost:4466/default/default';: query: query ($_where: LocationWhereInput, $_orderBy: LocationOrderByInput, $_skip: Int, $_after: String, $_before: String, $_first: Int, $_last: Int) { locations(where: $_where, orderBy: $_orderBy, skip: $_skip, after: $_after, before: $_before, first: $_first, last: $_last) { id } } operationName: null variables: {} [GraphQL error]: Message: Project not found: ‘default@default’;’, Location: undefined, Path: undefined [Network error]: Error: Project not found: ‘default@default’;' Error: Project not found: ‘default@default’;' at BatchedGraphQLClient.<anonymous> (/Users/jameschetwood/Projects/prisma/docker-test/my-app/server/node_modules/http-link-dataloader/dist/src/BatchedGraphQLClient.js6935) at step (/Users/jameschetwood/Projects/prisma/docker-test/my-app/server/node_modules/http-link-dataloader/dist/src/BatchedGraphQLClient.js4023) at Object.next (/Users/jameschetwood/Projects/prisma/docker-test/my-app/server/node_modules/http-link-dataloader/dist/src/BatchedGraphQLClient.js2153) at fulfilled (/Users/jameschetwood/Projects/prisma/docker-test/my-app/server/node_modules/http-link-dataloader/dist/src/BatchedGraphQLClient.js1258) at <anonymous> at process._tickCallback (internal/process/next_tick.js1887)
a
Ya, your endpoint in the HttpLink instantiation is wrong.
It should be
const httpLink = new HttpLink({ uri: '<http://localhost:4466/default/default>' })
.
if you want to communicate with the Prisma server from your React app directly.
j
OK now the query works
a
👍
j
But my resolvers are being ignored…
Sorry to seem ungrateful!
But I need my resolvers to work eg
locations(parent, args, ctx, info) { return ctx.db.query.locations({}, info); },
a
Ya, that is because you're communicating with the Prisma service directly 🙂
j
OK but I need the normal set up
Sorry if I was unclear!
a
Afterwards, the architecture will be clearer 🙂
j
I know that you have 2 servers. 1 is Prisma’s server which queries your database. The other server sits in between the client and the Prisma server and handles business logic, permission, etc
So I think I get the general concept, I just dont know which settings are wrong and dont know how to make sense of the errors I get - Im a front-end developer, defiantly not full stack.
a
Exactly, now your React App is communicating with the Prisma service directly, because I thought that you want to do that for testing. In a real world application, you will communicate with your GraphQL API which will communicate with Prisma then. So your GraphQL API which communicates with Prisma is using a binding called,
prisma-binding
. This should be configured to use the Prisma service endpoint.
The client should then use:
const httpLink = new HttpLink({ uri: '<http://localhost:4000>' })
j
Hmm both of these are set up like that
When I run a query in the browser then the first line of the /server console is”
So it looks like it is trying to reach the Prisma server
a
Do you run the query from Playground or from your React app?
j
From React
Sorry about the delay there, my wifi went down
Maybe its related to this issue: https://github.com/graphcool/prisma/issues/2278
a
Hm, I thought you are executing the query via React? Then it shouldn't be related.
j
I am, I guess it isnt then
n
Hey @Jim @andre I just skimmed your conversation. @Jim, it looks like a configuration problem, did you figure it out already? 🙂
j
Yes, I had to re-download the boilerplate and add my code back step by step. But it’s now working. Thanks again @andre
💪 2
a
Awesome. You’re very welcome 😊