SolidJS•4y ago•

4 replies

How does reactivity works in createStore?

Hi,

I'm quite new to SolidJS and Reactivity and I'm not sure how I should implement things.

So, I've created a context with a

createStore

createStore

for an Auth service.
Here's my AuthContext: https://gist.github.com/alveshelio/5d04ad7f3bf303b5e823ac2ad60b2a9a

Then in my

index.tsx

index.tsx

I'm wrapping the app with the context like so

 <AuthorizerProvider
      authorizerURL="http://localhost:3080"
      redirectURL={window.location.origin}
      clientID="dc7d8969-82a3-438d-a75e-bbeefe9ef94d"
    >
      <QueryClientProvider client={queryClient}>
        <Router>
          <App />
        </Router>
      </QueryClientProvider>
    </AuthorizerProvider>

 <AuthorizerProvider
      authorizerURL="http://localhost:3080"
      redirectURL={window.location.origin}
      clientID="dc7d8969-82a3-438d-a75e-bbeefe9ef94d"
    >
      <QueryClientProvider client={queryClient}>
        <Router>
          <App />
        </Router>
      </QueryClientProvider>
    </AuthorizerProvider>

I've then created my graphql client like so

export const graphQLClient = (): GraphQLClient => {
  const [state] = getAuthorizer();

const headerOptions = {
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
};

return new GraphQLClient('http://localhost:8080/v1/graphql', headerOptions());
};

export const graphQLClient = (): GraphQLClient => {
  const [state] = getAuthorizer();

const headerOptions = {
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
};

return new GraphQLClient('http://localhost:8080/v1/graphql', headerOptions());
};

With this implementation the

Authorization

Authorization

is never set in headers and . I've tried this

 const [token, setToken] = createSignal<string | undefined>();
  const [state] = getAuthorizer();
  //
  createEffect(() => {
    setToken(state.token?.id_token);
  });

 const [token, setToken] = createSignal<string | undefined>();
  const [state] = getAuthorizer();
  //
  createEffect(() => {
    setToken(state.token?.id_token);
  });

And then

...(token() && { Authorization:

...(token() && { Authorization:

Bearer ${token()}

}),

}),

but this doesn't work either.

I know that functions in SolidJs only run once and I though that maybe by the time I call

graphqlClient

graphqlClient

my state wouldn't be be set yet but I've confirmed that right before calling

graphqlClient

graphqlClient

the

id_token

id_token

is already set.

Any help would be greatly appreciated

Thank you

Gist

AuthorizerContext

GitHub Gist: instantly share code, notes, and snippets.

SolidJS•4y ago•

4 replies

hel.io

How does reactivity works in createStore?

Hi,

I'm quite new to SolidJS and Reactivity and I'm not sure how I should implement things.

So, I've created a context with a

createStore

createStore

for an Auth service.
Here's my AuthContext: https://gist.github.com/alveshelio/5d04ad7f3bf303b5e823ac2ad60b2a9a

Then in my

index.tsx

index.tsx

I'm wrapping the app with the context like so

 <AuthorizerProvider
      authorizerURL="http://localhost:3080"
      redirectURL={window.location.origin}
      clientID="dc7d8969-82a3-438d-a75e-bbeefe9ef94d"
    >
      <QueryClientProvider client={queryClient}>
        <Router>
          <App />
        </Router>
      </QueryClientProvider>
    </AuthorizerProvider>

 <AuthorizerProvider
      authorizerURL="http://localhost:3080"
      redirectURL={window.location.origin}
      clientID="dc7d8969-82a3-438d-a75e-bbeefe9ef94d"
    >
      <QueryClientProvider client={queryClient}>
        <Router>
          <App />
        </Router>
      </QueryClientProvider>
    </AuthorizerProvider>

I've then created my graphql client like so

export const graphQLClient = (): GraphQLClient => {
  const [state] = getAuthorizer();

const headerOptions = {
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
};

return new GraphQLClient('http://localhost:8080/v1/graphql', headerOptions());
};

export const graphQLClient = (): GraphQLClient => {
  const [state] = getAuthorizer();

const headerOptions = {
  headers: {
    'Content-Type': 'application/json',
    ...(state.token?.id_token && { Authorization: `Bearer ${state.token.id_token}` }),
  };
};

return new GraphQLClient('http://localhost:8080/v1/graphql', headerOptions());
};

With this implementation the

Authorization

Authorization

is never set in headers and . I've tried this

 const [token, setToken] = createSignal<string | undefined>();
  const [state] = getAuthorizer();
  //
  createEffect(() => {
    setToken(state.token?.id_token);
  });

 const [token, setToken] = createSignal<string | undefined>();
  const [state] = getAuthorizer();
  //
  createEffect(() => {
    setToken(state.token?.id_token);
  });

And then

...(token() && { Authorization:

...(token() && { Authorization:

Bearer ${token()}

}),

}),

but this doesn't work either.

I know that functions in SolidJs only run once and I though that maybe by the time I call

graphqlClient

graphqlClient

my state wouldn't be be set yet but I've confirmed that right before calling

graphqlClient

graphqlClient

the

id_token

id_token

is already set.

Any help would be greatly appreciated

Thank you

Gist

AuthorizerContext

GitHub Gist: instantly share code, notes, and snippets.

How does reactivity works in createStore?

How does reactivity works in createStore?

Similar Threads

Similar Threads

Similar Threads