Using Apollo to mix local and remote fields using the #client directive - graphql

I'm using apollo-client#2.6.10 in a VueJS application.
I have a user type that has (until recently) used local-only fields. Here is the local query and corresponding mutation:
query currentUserQuery {
user #client {
id
email
emailVerified
displayName
}
}
mutation setCurrentUser($id: ID!, $email: String!, $emailVerified: Boolean!, $displayName: String) {
update_current_user(
id: $id,
email: $email,
emailVerified: $emailVerified,
displayName: $displayName
) #client
}
And I also have a corresponding resolver for the mutation:
resolvers = {
Mutation: {
update_current_user: (_, { id, email, emailVerified, displayName }, { cache }) => {
const data = cache.readQuery({ query: currentUserQuery })
const user = {
__typename: 'User',
id,
email,
emailVerified,
displayName
}
data.user = user
cache.writeData({ data })
return user
}
}
So far, so good!
What I'd like to do now is mix in some additional fields from the remote api. So, I modified the query as such:
query currentUserQuery {
user {
id #client
email #client
emailVerified #client
displayName #client
tier {
id
name
}
}
}
I also updated the initial cache object written cache.writeQuery to include placeholder tier data.
But no matter how I try to wrangle this, the tier is always the initialised null value, and after inspecting network traffic I can see that the remote fields are not being fetched.
Should I be doing something different with resolvers? I've tried using local query resolvers for the local fields (instead of relying on direct fetches from the cache) to no avail.
After reading through the v2 docs and trying a variety of different approaches I'm at a loss to understand what's not working here.
Help greatly appreciated!

Related

How to make self resolving array of object types with Prisma and GraphQL

Maybe the title is not accurate but I really don't know how to describe it anymore. I went through multiple documentations and descriptions but still couldn't figure it out.
I want to implement a basic social media like followers/following query on my type User. I am using MySQL and for that I made a separate table called Follow as it's a many-to-many connection.
Here is a pseudo-ish representation of my tables in the database without the unnecessary columns:
Table - User
user_id primary key Int
Table - Follow
follow_er foreign_key -> User(user_id) Int
follow_ed foreign_key -> User(user_id) Int
A user could "act" as a follow_er so I can get the followed people
And a user could be follow_ed, so I can get the followers.
My prisma schema look like this:
model User {
user_id Int #id #default(autoincrement())
following Follow[] #relation("follower")
followed Follow[] #relation("followed")
}
model Follow {
follow_er Int
follower User #relation("follower", fields: [follow_er], references: [user_id])
follow_ed Int
followed User #relation("followed", fields: [follow_ed], references: [user_id])
##id([follow_er, follow_ed])
##map("follow")
}
By implementing this I can get the followers and following object attached to the root query of the user:
const resolvers = {
Query: {
user: async (parent, arg, ctx) => {
const data = await ctx.user.findUnique({
where: {
user_id: arg.id
},
include: {
following: true,
followed:true
}
})
return data
}....
Here is my GraphQL schema I tried to make:
type Query{
user(id: Int!): User
}
type User{
id: ID
following: [User]
followed: [User]
}
So I can get something like:
query {
user(id: $id) {
id
following {
id
}
followed{
id
}
}
}
}
But I couldn't make it work as even if I get the the array of objects of {follow-connections}:
[
{
follow_er:1,
follow_ed:2
},
{
follow_er:1,
follow_ed:3
},
{
follow_er:3,
follow_ed:1
},
]
I can't iterate through the array. As far as I know, I have to pass either the follow_er or follow_ed, which is a user_id to get a User object.
What am I missing? Maybe I try to solve it from a wrong direction. If anybody could help me with this, or just tell me some keywords or concepts I have to look for it would be cool. Thanks!
I would suggest creating self-relations for this structure in the following format:
model User {
id Int #id #default(autoincrement())
name String?
followedBy User[] #relation("UserFollows", references: [id])
following User[] #relation("UserFollows", references: [id])
}
And then querying as follows:
await prisma.user.findUnique({
where: { id: 1 },
include: { followedBy: true, following: true },
})
So you will get a response like this:

How to update the store after a mutation with relay?

I'm struggling to figure out how this should work. I have an application that has a current user, so, the topmost query looks like this:
query AppQuery {
currentUser {
id
email
...Account_currentUser
...AccountEdit_currentUser
}
}
AccountEdit_currentUser is defined this way:
export default createFragmentContainer(AccountEdit, {
currentUser: graphql`
fragment AccountEdit_currentUser on User {
email
name
nickName
}`
})
on the AccountEdit component. That component commits this mutation:
mutation AccountEditMutation($email: String!, $name: String!, $nickName: String!) {
updateAccount(input: {email: $email, name: $name, nickName: $nickName}) {
accountUpdated
currentUser {
id
email
name
nickName
}
}
}
After that happens, the server returns the correct values for email, name, nickName, etc. How should those new values end up in the store? Because it doesn't seem to automatic. Do I need to write a custom updater? and update config? I tried it a few times but I couldn't get anywhere close to something that even throws a reasonable error.
This updating of the store happens automatically and the reason why it wasn't is because the node_ids of the current user in the original query and on the subsequent query were different. Once I made them the same, it started working.

Limit Graphql results that belongs to owner in Strapi

I am using a simple Strapi policy like below to limit the REST result that belongs to the owner only, which documented in the following link.
https://github.com/strapi/strapi/issues/624
module.exports = async (ctx, next) => {
const { id, role } = ctx.state.user;
if(role !== 'administrator'){
ctx.query.owner = id;
}
await next();
};
Now I want to do the same for Graphql results, but it doesn't seems to work with the same code because "ctx.query" is undefined. I have tried looking at the all the request API but none of them seems to be work for Graphql query. The URL ended like 'http://localhost:1337/graphql', and 'ctx.request.query' is an empty [].
https://strapi.io/documentation/3.0.0-beta.x/guides/requests.html#api-reference
Here what I did to solve that problem:
Override the GraphQl Schema in api/activity/config/schema.graphql
module.exports = {
definition: ``,
query: `
notifications(sort: String, limit: Int, start: Int, where: JSON): [Activity]
`,
type: {},
resolver: {
Query: {
notifications: {
description: 'Return the auth user notifications',
policies: ['plugins.users-permissions.permissions'],
resolver: 'Activity.findNotifications'
},
},
},
};
Create a new function resolver in api/activity/controllers/Activity.js
module.exports = {
findNotifications(ctx) {
ctx.query = { ...ctx.query, owner: ctx.state.user.id }
if (ctx.query._q) {
return strapi.services.activity.search(ctx.query);
}
return strapi.services.activity.find(ctx.query);
},
}
In the controller you got the query and add the owner id filter.
Hope it helps.
Why are you looking at REST docs while searching for graphQL problem? There is no url query parsing at all.
Owner role (permissions) can be checked using policies - it's described here.
The following sections contain examples of misc permission/customization - resolvers have a context parameter. User data should (did't checked) be available at context.state.user.

Enumerating all fields from a GraphQL query

Given a GraphQL schema and resolvers for Apollo Server, and a GraphQL query, is there a way to create a collection of all requested fields (in an Object or a Map) in the resolver function?
For a simple query, it's easy to recreate this collection from the info argument of the resolver.
Given a schema:
type User {
id: Int!
username: String!
roles: [Role!]!
}
type Role {
id: Int!
name: String!
description: String
}
schema {
query: Query
}
type Query {
getUser(id: Int!): User!
}
and a resolver:
Query: {
getUser: (root, args, context, info) => {
console.log(infoParser(info))
return db.Users.findOne({ id: args.id })
}
}
with a simple recursive infoParser function like this:
function infoParser (info) {
const fields = {}
info.fieldNodes.forEach(node => {
parseSelectionSet(node.selectionSet.selections, fields)
})
return fields
}
function parseSelectionSet (selections, fields) {
selections.forEach(selection => {
const name = selection.name.value
fields[name] = selection.selectionSet
? parseSelectionSet(selection.selectionSet.selections, {})
: true
})
return fields
}
The following query results in this log:
{
getUser(id: 1) {
id
username
roles {
name
}
}
}
=> { id: true, username: true, roles: { name: true } }
Things get pretty ugly pretty soon, for example when you use fragments in the query:
fragment UserInfo on User {
id
username
roles {
name
}
}
{
getUser(id: 1) {
...UserInfo
username
roles {
description
}
}
}
GraphQL engine correctly ignores duplicates, (deeply) merges etc. queried fields on execution, but it is not reflected in the info argument. When you add unions and inline fragments it just gets hairier.
Is there a way to construct a collection of all fields requested in a query, taking in account advanced querying capabilities of GraphQL?
Info about the info argument can be found on the Apollo docs site and in the graphql-js Github repo.
I know it has been a while but in case anyone ends up here, there is an npm package called graphql-list-fields by Jake Pusareti that does this. It handles fragments and skip and include directives.
you can also check the code here.

How to update apollo cache after mutation (query with filter)

I am pretty new to GraphQL. I am using graph.cool in a Vue.js project with apollo.
I am using right now the in-memory cache.
I had previously a simple 'allPosts' query.
And after creating a new one, I used the update() hook and readQuery() + writeQuery()
However I want that logged in users can only see their posts. So I modified the query with a filter.
query userStreams ($ownerId: ID!) {
allStreams(filter: {
owner: {
id: $ownerId
}
}) {
id
name
url
progress
duration
watched
owner {
id
}
}
}
My thought was, that I only need to pass in the userid variable. However this is not working. I am always getting
Error: Can't find field allStreams({"filter":{"owner":{}}}) on object (ROOT_QUERY) undefined.
this.$apollo.mutate({
mutation: CREATE_STREAM,
variables: {
name,
url,
ownerId
},
update: (store, { data: { createStream } }) => {
const data = store.readQuery({
query: USERSTREAMS,
variables: {
id: ownerId
}
})
data.allStreams.push(createStream)
store.writeQuery({
query: USER_STREAMS,
variables: {
id: ownerId
},
data
})
}
})
When you use readQuery or writeQuery, you should use the same variable name. So replace
variables: { id: ownerId }
With
variables: { ownerId }
Also, the reason you are getting an exception is that readQuery throws an exception if the data is not in the store. That happens before the first time you use writeQuery (or get the data with some other query).
You could write some default values to the store before calling this mutation.
You could also use readFragment that returns null instead of throwing an exception. But that would require more changes to your code.

Resources